I have one TextInput with some predefined text.
The problem is that on Android the text is displayed at the bottom of the text input. I tryed with textAlignVertical: 'top' to display it at top position, but without success the strange thing is that on the IOS is working perfectly
React Native TextInput Multiline
multiline
If true, the text input can be multiple lines. The default value is false. It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with textAlignVertical set to top for the same behavior in both platforms.
current behaviour:
the text is displayed at the bottom
desired behaviour:
the text to be displayed at the top
index.js
render() {
return (
<View style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
paddingTop: 20,
paddingBottom: 50,
paddingLeft: 20,
paddingRight: 20}}>
<TextInput
style={{
flex: 1,
textAlignVertical: 'top',
borderWidth: 1}}
autoCapitalize={'none'}
autoCorrect={false}
value={this.state.textTabs}
multiline={true}
onChangeText={(text) => {this.setState({textTabs: text})}}
underlineColorAndroid={'transparent'}
editable={true}
/>
</View>
);}
Thanks in advance
Related
I have the following code which is used to put a text label right next to a text input inline:
<View style={{ flexDirection: "row", alignItems: "center" }}>
<Text
style={{ fontSize: 16, backgroundColor: "green" }}
>
🇺🇸 +1{" "}
</Text>
<TextInput
style={{
fontSize: 16,
backgroundColor: "red",
flex: 1,
}}
placeholder="Enter your phone number"
/>
</View>
As you can see, I put them in a flex row view, aligning them to the center. For some reason, on Android, you can see the text input has a larger height, despite having the same font size.
There seemed to be some kind of hidden padding so I tried adding padding: 0 but that didn't work either. On iOS, they are the exact same height. Any idea of what I can do here?
To be clear, I want them to be the same height on Android as iOS correctly does. Thank you for your help.
You may add paddingVertical: 0 to style. This will reset the Android native module padding.
<View style={{ flexDirection: "row", alignItems: "center" }}>
<Text
style={{ fontSize: 16, backgroundColor: "green" }}
>
🇺🇸 +1{" "}
</Text>
<TextInput
style={{
fontSize: 16,
backgroundColor: "red",
flex: 1,
paddingVertical: 0
}}
placeholder="Enter your phone number"
/>
</View>
Result
Source: https://stackoverflow.com/a/37882782/20002061
I want to apply a different borderRadius and padding styling to nested texts, but as far as I could understand this is not supported by react native yet. Is there a workaround for this ?
What I tried so far is :
<Text>
<Text
style={{
backgroundColor: 'green',
borderRadius: 12,
}}>
Text1
</Text>
<Text
style={{
backgroundColor: 'blue',
borderRadius: 12,
}}>
Text2
</Text>
</Text>
Expected Result: Text with different backgrounds and with a borderRadius.
Actual Result: backgrounds are differnet but no borderRadius is applied
You can put this code in the text style
<View
style={{
backgroundColor: 'green',
borderRadius: 10,
borderWidth: 1,
borderColor: '#fff',
padding: 10
}}>
<Text>Text1</Text>
</View>
I am trying to make a form with multiple input fields using react-native. I want the form submit button to remain at the bottom of the screen. I've used the following structure
<KeyboardAwareScrollView
contentContainerStyle={{
backgroundColor: "black",
flexGrow: 1
}}
enableOnAndroid={true}
>
<View style={styles.container}>
<View style={styles.formContainer}>
{/*Form input components here*/}
</View>
<View style={styles.buttonContainer}>
<Button
icon={<Icon name="back" size={24} color="white" />}
onPress={props.setModalVisible}
buttonStyle={styles.backButton}
/>
<Button
buttonStyle={styles.button}
containerStyle={{ flex: 1 }}
title="Update Info"
onPress={props.setModalVisible}
/>
</View>
</View>
</KeyboardAwareScrollView>
The container has style
container: {
padding: 10,
backgroundColor: "green",
flex: 1
},
The form container has style
formContainer: {
padding: 15,
flex: 1,
backgroundColor: "blue"
},
Button container has style
buttonContainer: {
padding: 15,
flexDirection: "row",
backgroundColor: "yellow",
marginTop: 'auto'
},
Using the above code the button sticks to the bottom when there is no keyboard as I expected. I've added background color for easy visualization. Image -
Form View
But when I click on a text field and scroll up I see that the container "shrinks" and the bottom of the screen is black and button is now close to input fields. Background color of KeyboardAwareScrollView contentContainerStyle fills the bottom when I [fully scroll to bottom][3]
How do I make sure that the button still sticks to the bottom in scrollview and the content container height remains the same as screen height?
I am using "react-native-keyboard-aware-scroll-view": "0.8.0",
I've tried removing marginTop: 'auto' from the buttonContainer, fixing the height of the container and all sorts of combinations with flexGrow and flex on KeyboardAwareScrollView.
I'm struggling with Android version of my simplest ever React Native app.
Seems like Android ignores some of the props, namely translucent in <StatusBar /> and, most annoyingly, multiline and underlineColorAndroid in the <TextInput />.
Here's the code, it's pretty straightforward:
<View style={[styles.main, {backgroundColor: background_color}]} >
<StatusBar
barStyle="light-content"
translucent={true} />
<View style={[styles.header, {backgroundColor: background_color}]}>
<Button name='clear' disable={this.state.text} action={this.clearInput} />
<Button name='run' disable={this.state.text} action={this.openFullScreen}/>
</View>
{
this.state.fontLoaded ? (
<TextInput
style={styles.input}
ref='input'
onChangeText={(text) => this.setState({text: text})}
placeholder={this.state.placeholder}
value={this.state.text}
multiline={true}
placeholderTextColor={placeholder_color}
returnKeyType='done'
blurOnSubmit={true}
numberOfLines={5}
autocorrect={false}
underlineColorAndroid='transparent' />
) : null
}
</View>
const styles = StyleSheet.create({
main: {
flex: 1,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'flex-start'
},
header: {
height: 88,
width: '100%',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between'
},
input: {
width: '94%',
flex: 1,
fontSize: 50,
lineHeight: 1,
fontFamily: 'Roboto',
fontStyle: 'normal',
fontWeight: '900',
color: '#ffffff',
overflow: 'hidden',
textAlignVertical: "top",
//lame fix for Android
//paddingTop: Platform.OS == 'android' ? 40 : 0,
},
});
This is what it looks like on iOS:
iOS-with-text
And this is the mess on Android: android-with-text
As you can see, for some reason it a) draws the text on the top of the screen instead of top of the TextInput, b) doesn't do line breaks, overlapping all of the words on just 1 line (BTW I tried changing textBreakStrategy prop but to no avail), and с) still shows a white underline. Placeholder state on Android looks fine though (meaning placeholder is located right where it should be and has line breaks).
It's my first RN app and I used create-react-native-app to set up the project.
react-native-cli: 2.0.1
react-native: 0.47.2
Any advice would be much appreciated!
UPD: lineHeight: 1 caused half of the trouble (not sure what its problem with translucent and underlineColorAndroid is though). NTS: never ever blindly copy paste your styles from your web ReactJS app.
Couple of things. Multiline is not enough to enable the wrapping. You also need to use numberOfLines as a prop.
Also, I think your problem is just the height of the TextInput or the flex surrounding the TextInput.
And lastly, it could be that your style header view has either a top attribute or a position absolute that is messing with the view.
If this does not solve it, please post your styles.
Edit: Some of those styles could be messing with the height. Try starting with something more simpler like this:
input: {
width: '94%',
flex: 1,
height: 60, //-> Add this to make sure the text has a height instead of flex
//fontSize: 50, -> This is huge, the text might not be able to show entirely.
//lineHeight: 1, -> Line height is not the amount of lines. Is the size. It should be around the font size, so either remove it or try setting this value to 50 like the font size.
fontFamily: 'Roboto',
fontStyle: 'normal',
fontWeight: '900',
color: '#ffffff',
//overflow: 'hidden', -> This might be messing with the header
textAlignVertical: "top",
//lame fix for Android
//paddingTop: Platform.OS == 'android' ? 40 : 0,
},
If I have a ViewPagerAndroid inside of a ScollView with RefreshControl enabled, the RefreshControl will steal the pan movement from the ViewPagerAndroid.
What I mean is, by dragging the ViewPager to the left midway and then, without releasing the touch, start to drag down, the RefreshContorl will activate, appearing and resetting the state of the ViewPager.
I tried to disable the RefreshControl as soon as the ViewPager returns something other than idle, but if the swipe is quick enough (which usually is), the update does not happen on time to stop the RefreshControl from appearing.
My layout is as simple as possible:
<View style={styles.container}>
<ScrollView style={{ flex: 1 }} removeClippedSubviews={true}>
<View style={{ height: 500, width: 350, marginBottom: 15, backgroundColor: 'cyan' }}>
<ViewPagerAndroid style={{ flex: 1 }}>
<View><Text style={{ fontSize: 30 }}>{'Page1'}</Text></View>
<View><Text style={{ fontSize: 30 }}>{'Page2'}</Text></View>
</ViewPagerAndroid>
</View>
<View style={{ height: 500, width: 350, marginBottom: 15, backgroundColor: 'lightblue' }}>
<ViewPagerAndroid style={{ flex: 1 }}>
<View><Text style={{ fontSize: 30 }}>{'Page1'}</Text></View>
<View><Text style={{ fontSize: 30 }}>{'Page2'}</Text></View>
</ViewPagerAndroid>
</View>
</ScrollView>
</View>
I'm using a Mac, react-native version 0.27.2
You're having ViewPagerAndroid in ScrollView, it should be the other way round.
btw. I'm using scrollable tabview with refreshcontrol and it works well. It doesn't use ViewPagerAndroid, as far as I know, but it's crossplatform and performs well (after disabling dev mode and reloading).