Closed
Description
Is this a bug report?
Yes
Have you read the Bugs section of the Contributing to React Native Guide?
Yes
Environment
react-native-cli: 2.0.1
react-native: 0.46.1
npm 5.0.3
node 8.1.3
0.27.5
Target Platform: Android 7.1.1 and 8.0
OS: OSX 10.12.5
Steps to Reproduce
- Place an input inside a
flex: 1 - Type something
- IT breaks
Expected Behavior
Keep the ui consistent while i'm typing
Actual Behavior
When Input value is not empty the ui looks different
Here a gif that shows the issue: https://cl.ly/1Y2z0J1p1i2L
Reproducible Demo
Code:
Render return
<View style={{flex: 1}}>
<Animatable.View animation="scaleDown" easing="ease-out" delay={150} style={[styles.wrapper, {backgroundColor: 'red'}]}>
<View style={styles.overlay} />
</Animatable.View>
<View style={styles.screen}>
<View style={styles.top}>
<Animatable.View animation={this.state.entryAnimationEnd ? 'fadeIn' : null} style={styles.welcomeWrapper}>
<Text style={[styles.welcomeText, styles.welcomeTitle]}>Welcome</Text>
<Text style={styles.welcomeText}>test</Text>
</Animatable.View>
</View>
<KeyboardAvoidingView style={styles.bottom} behavior="padding">
<View style={[styles.inputsBg, {top: triangleHeight}]} />
<TextInput
ref={(textInput) => this.textInput = textInput}
autoCapitalize="none"
validator="url"
tintColor="#999"
containerStyle={styles.textField}
label={I18n.t('login.Platform URL')} />
<View style={styles.buttonWrapper}>
<Button
fullWidth
onPress={this.bootstrapAttempt}
disabled={this.props.appConfig.remoteFetching === 'LOADING'}
type="neutral">
Go to login
</Button>
</View>
</KeyboardAvoidingView>
</View>
</View>
style
export default StyleSheet.create({
screen: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-around'
},
textField: {
marginLeft: 16,
marginRight: 16
},
overlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'black',
opacity: 0.4,
zIndex: 1
},
bgImage: {
...StyleSheet.absoluteFillObject,
width: null,
height: null,
resizeMode: 'cover',
zIndex: 0
},
wrapper: {
...StyleSheet.absoluteFillObject
},
top: {
flex: 1
},
bottom: {
flex: 1
},
inputsBg: {
backgroundColor: '#f5f5f5',
...StyleSheet.absoluteFillObject
}
});