I am trying to use the KeyboardAvoidingView with behavior="padding".
When I am trying to enter any text in TextInput, the TextInput field is not moving up. I have added a small view in the end which is moving up but the the view above it.
I have also with KeyboardAvoidingView height property with offset. It was working few components like 2 TextInputs. But when I add all the components the UI goes insane and behave jumbled up.
Any any idea whats happening over here?
Here the link of tutorial which I have followed.
render() { return (<View style={styles.backgroundContainer}><Loader loading={this.state.isLoading} /><KeyboardAvoidingView keyboardVerticalOffset={10} style={styles.mainContainer} behavior='padding'><View style={styles.formContainer}><View style={[styles.centerContainer, { marginTop: 40 }]}><Image source={require('./../../Resources/logo.png')} /><Text style={{ fontWeight: 'bold', color: 'gray', fontSize: 25 }}>AppName</Text><Text style={styles.loginMsg}> Login to your Account </Text></View><View style={styles.inputFieldsContainer}><Image style={{ width: 30, height: 30, margin: 5 }} source={require('./../../Resources/logo.png')} /><TextInput placeholder='Email' returnKeyType='next' keyboardType='email-address' onChangeText={(value) => this.setState({ userEmail: value })} onSubmitEditing={() => this.passwordInput.focus()} style={styles.inputFields} /></View><View style={styles.inputFieldsContainer}><Image style={{ width: 30, height: 30, margin: 5, }} source={require('./../../Resources/logo.png')} /><TextInput returnKeyType='go' secureTextEntry placeholder='Password' ref={(input) => this.passwordInput = input} onChangeText={(value) => this.setState({ password: value })} style={styles.inputFields} /></View><View style={styles.buttonContainer}><Button fontSize='8' color='gray' title='Remember Me' onPress={() => { console.log('Remember Me Clicked'); }} /><Button color='gray' title='Forgot Password?' onPress={() => { console.log('Forgot Password Clicked'); }} /></View><TouchableOpacity style={styles.buttonLogin} onPress={() => { console.log('Login Clicked'); }}><Text style={{ fontSize: 20, fontWeight: 'bold', color: 'white' }}>Login</Text></TouchableOpacity><View style={{ height: 1, backgroundColor: 'gray', marginTop: 20, marginBottom: 1 }}></View><View style={[styles.centerContainer, { marginBottom: 10 }]}><Text style={styles.loginMsg}>Don't have a Account</Text><TouchableOpacity style={styles.buttonRegister} onPress={() => navigate('Register')} ><Text style={styles.buttonRegisterText}>REGISTER NOW</Text></TouchableOpacity></View></View><View style={{ height: 10, backgroundColor: '#628499', }}></View></KeyboardAvoidingView></View> );}const styles = StyleSheet.create({backgroundContainer: { flex: 1, backgroundColor: 'green'},mainContainer: { flex: 1, margin: 25, borderWidth: 1, borderRadius: 5, borderColor: 'gray', backgroundColor: 'white', justifyContent: 'space-between'},formContainer: { flex: 1, paddingLeft: 25, paddingRight: 25},centerContainer: { alignItems: 'center', marginBottom: 10,},loginMsg: { margin: 10, fontSize: 20, color: 'gray'},inputFieldsContainer: { flexDirection: 'row', margin: 10, borderWidth: 1, borderRadius: 5, borderColor: 'gray',},inputFields: { flexGrow: 1, marginTop: 5, marginBottom: 5, height: 30, backgroundColor: 'rgba(255,255,255,0.4)', paddingHorizontal: 10,},buttonContainer: { flexDirection: 'row', justifyContent: 'space-between'},buttonLogin: { alignItems: 'center', height: 40, marginTop: 10, marginLeft: 50, marginRight: 50, padding: 5, backgroundColor: '#2980b9', borderWidth: 1, borderRadius: 5, borderColor: 'gray'},buttonRegister: { alignItems: 'center', height: 40, marginLeft: 50, marginRight: 50},buttonRegisterText: { fontSize: 20, fontWeight: 'bold', color: 'gray'},loading: { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center'}, });