I have a textInput in a View which is positioned at the center using flex. the problem is, when you start writing in the textInput, the text gets centered, even though I didn't style it that way...
The initial cursor is at the correct position, but as soon as the user starts typing, the text centers.
What's weird is that this issue is only with ios, not android...
I tried adding a style of textAlign: left, but it didn't anything. What am I doing wrong, and how can I fix that?
Here's a link to the project: https://snack.expo.io/S1PlOqFvN
import React from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textFieldStyling} placeholder="Try typing something..."></TextInput>
<Text style={styles.textStyling}></Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'orange',
alignItems: 'center',
justifyContent: 'center',
},
textStyling: {
fontSize: 50,
textAlign: 'center',
},
textFieldStyling: {
color: 'blue',
},
});
TextInput in React Native does not have a close tag
<TextInput
style={styles.textFieldStyling}
placeholder="Try typing something..."
/>
Related
When I have on my screen InputAccessoryView which has component without nativeID (So it is constantly showing even if the keyboard is not shown) and I open and close Modal (react-native modal) then InputAccessoryView disappear from the screen with the component. I don't know why this is happening and also I don't know how to keep this InputAccessoryView on the screen.
Here is the code to reproduce it:
import * as React from 'react';
import { View, ScrollView, AppRegistry, TextInput, InputAccessoryView, Button } from 'react-native';
import {Modal, Text, TouchableHighlight, Alert} from 'react-native';
import Constants from 'expo-constants';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {text: 'Placeholder Text', modalVisible: false,};
}
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
render() {
return (
<View style={{flex:1}}>
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<View style={{marginTop: 22, padding: 50, backgroundColor: '#0066ff'}}>
<View>
<TouchableHighlight
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text style={{color:"#ffffff"}}>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
<ScrollView style={{ backgroundColor: '#6ED4C8'}}>
<Text></Text>
<TouchableHighlight
onPress={() => {
this.setModalVisible(true);
}}>
<Text style={{padding: 40, backgroundColor: "#ff3300"}}>Show Modal</Text>
</TouchableHighlight>
</ScrollView>
<InputAccessoryView backgroundColor="#ff9900" >
<TextInput
style={{
padding: 20,
paddingTop: 50,
}}
onChangeText={text => this.setState({text})}
value={this.state.text}
/>
</InputAccessoryView>
</View>
);
}
}
Here you can find the online version (Keep in mind that the issue is only relevant for IOS):
https://snack.expo.io/SJB7ipm6B
Some Images:
Thank you for your time and your help!
Try with this. I am re-rendering InputAccessoryView once the modal is closed
{(!this.state.modalVisible) && <InputAccessoryView backgroundColor="#ff9900">
<TextInput
style={{
padding: 20,
paddingTop: 50,
}}
onChangeText={text => this.setState({text})}
value={this.state.text}
/>
</InputAccessoryView>}
I just hit the same issue. After digging around for a while I figured out that setting the presentationStyle prop to overFullScreen on the modal fixes it for me without re-rendering the InputAccessoryView.
I have a TextInput with backgroundColor of 'rgba(255,255,255,0.16)' as below:
example on snack: https://snack.expo.io/rkEhXn6Nr
import * as React from 'react';
import { TextInput, View, StyleSheet } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.paragraph}
value={"bleep bleep bleep bleep"}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'green',
},
paragraph: {
padding: 24,
margin: 24,
fontSize: 24,
textAlign: 'center',
backgroundColor: 'rgba(255,255,255,0.16)',
},
});
It looks like as if there's a view (THERE ISN'T) with that background color and a text element also with that background color wrapped inside. How can I only have the "view" to have that background color? It looks fine on android:
Problem/Explanation:
This issue only occurs on iOS, because there it is used as performace tweak to avoid alpha blending. On iOS devices, a <Text/> automatically gets the same backgroundColor as the parent view. For more information about color inheritance you can have a look this issue on github.
In your specific case, your are applying a background color to the text container and by accident also to the text itself. That's why you get an "highlighted" Text. I could easily recreate this behavior with a simple Text Component. See the following mage:
Solution:
To overcome this issue and have a cross-platform working solution, you need to add a View which surrounds your TextInput and apply the backgroundColor (and the other container styles) there.
Code:
<View style={styles.container}>
<View style={styles.textContainer}>
<TextInput
style={styles.paragraph}
value={"bleep bleep bleep bleep"}
/>
</View>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'green',
},
textContainer: {
margin: 24,
padding: 24,
backgroundColor: 'rgba(255,255,255,0.16)',
},
paragraph: {
fontSize: 24,
textAlign: 'center',
},
});
Working Example:
https://snack.expo.io/ByOzRyHHr
Output:
Please take a look at this. Don't know if that works for you. Looked pretty decent on my iOS Simulator.
import React, { useState } from 'react';
import { View, StyleSheet, TextInput } from 'react-native';
const App = () => {
const [name, setName] = useState();
return (
<View style={styles.container}>
<View style={styles.textInputContainer}>
<TextInput
style={styles.paragraph}
value={name}
onChangeText={setName}
/>
</View>
</View>
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'green',
},
textInputContainer: {
marginHorizontal: 24,
backgroundColor: 'rgba(255,255,255,0.16)',
},
paragraph: {
margin: 24,
fontSize: 24,
textAlign: 'center',
},
});
https://snack.expo.io/S112z5NSr
React native on iOS shows the Touchable Opacity weirdly. It is rendered in such way that the button is half buried into the title. Style and creation should be right. I was following a tutorial. Copied and pasted the code from the instructor, but it is still going wrong. I wrapped the button in another styled view section and everything was fine, I wonder why this is the case.
<View>
{function()}
</View>
function() {return <Button />}
Button:
import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
const Button = ({ onPress, children }) => {
const { buttonStyle, textStyle } = styles;
return (
<TouchableOpacity onPress={onPress} style={buttonStyle}>
<Text style={textStyle}>
{children}
</Text>
</TouchableOpacity>
);
};
const styles = {
textStyle: {
alignSelf: 'center',
color: '#007aff',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10
},
buttonStyle: {
flex: 1,
alignSelf: 'stretch',
backgroundColor: '#fff',
borderRadius: 5,
borderWidth: 1,
borderColor: '#007aff',
marginLeft: 5,
marginRight: 5
}
};
export { Button };
I am using react-native-deck-swiper and have cards with buttons on them. The buttons do not work on iPhone 7 only. Tried several phones. What's even more interesting is that react-native-tinder-swipe-cards has the same issues, so it seems to be something that I'm doing wrong. Code:
import React from 'react';
import {Alert, Text, TouchableHighlight, View, StyleSheet} from "react-native";
import Swiper from "react-native-deck-swiper";
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Swiper
ref='swiper'
cards={['asdf','23423']}
renderCard={(question) => {
return (
<TouchableHighlight
onPress={() => Alert.alert('I work')}>
<Text> {question} </Text>
</TouchableHighlight>
)
}}
cardIndex={0}
>
</Swiper>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Same code without swiper works fine:
import React from 'react';
import {Button, Alert, Text, TouchableHighlight, View, StyleSheet} from "react-native";
import Swiper from "react-native-deck-swiper";
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<TouchableHighlight
onPress={() => Alert.alert('asdf')}>
<Text> I like pants </Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
I highly appreciate any help. Thanks!
I have a login form with two text inputs stacked vertically and a container view with two buttons below the inputs:
I want the two buttons to stretch to fill the width of the button container (red), so each button would take half its size. However I can't get it to work. I've tried various combinations of flex* properties with no luck.
In native iOS I would use a UIStackView for this with orientation = horizontal. React Native documentation says that pretty much any layout can be achieved with flexbox.
This is what my component looks like right now:
import React, {Component} from 'react';
import {KeyboardAvoidingView, TextInput, View, StyleSheet} from 'react-native';
import Button from 'react-native-button';
export default class Login extends Component {
render() {
return (
<KeyboardAvoidingView style={styles.container}>
<TextInput
placeholder="LOGIN"
placeholderTextColor="#505050"
style={styles.input}/>
<TextInput
placeholder="PASSWORD"
placeholderTextColor="#505050"
style={styles.input}/>
<View style={styles.buttonContainer}>
<Button
onPress={() => this.logIn()}
style={[styles.button, styles.loginButton]}>
Log in
</Button>
<Button
onPress={() => this.register()}
style={[styles.button, styles.registerButton]}>
Register
</Button>
</View>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: 16,
backgroundColor: 'lightgray'
},
input: {
height: 40,
marginBottom: 12,
paddingHorizontal: 8,
backgroundColor: 'white'
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red'
},
button: {
padding: 8,
color: 'white',
backgroundColor: 'steelblue'
},
loginButton: {
marginRight: 8
}
});
If I add flex: 1 to the button style they become:
What am I doing wrong?
Yes. Its because of the react-native-button component. You have to use the containerStyle property of the Button component to style the container.
import React, {Component} from 'react';
import {KeyboardAvoidingView, TextInput, View, StyleSheet} from 'react-native';
import Button from 'react-native-button';
export default class Login extends Component {
render() {
return (
<KeyboardAvoidingView style={styles.container}>
<TextInput
placeholder="LOGIN"
placeholderTextColor="#505050"
style={styles.input}/>
<TextInput
placeholder="PASSWORD"
placeholderTextColor="#505050"
style={styles.input}/>
<View style={styles.buttonContainer}>
<Button
onPress={() => this.logIn()}
style={styles.buttonText}
containerStyle={styles.button}
>
Log in
</Button>
<Button
onPress={() => this.register()}
style={styles.buttonText}
containerStyle={styles.button}
>
Register
</Button>
</View>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: 16,
backgroundColor: 'lightgray'
},
input: {
height: 40,
marginBottom: 12,
paddingHorizontal: 8,
backgroundColor: 'white'
},
buttonContainer: {
height: 60,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red'
},
button: {
flex: 2,
padding: 8,
backgroundColor: 'steelblue',
alignSelf: 'stretch',
justifyContent: 'center',
},
buttonText: {
color: 'white',
}
});