I have one small issue, not sure if it my fault our it is an bug.
Bug appears only after keyboard has been shown. It adds extra padding/margin in top. Gifs below:
import React, { Component } from 'react';
import {
AppRegistry,
Navigator,
Text,
StyleSheet,
StatusBar,
View
} from 'react-native';
import Login from './components/login';
export default class app extends Component {
render() {
return (
<View style={styles.container}>
<StatusBar
backgroundColor="transparent"
barStyle="default"
translucent={true}
/>
<Navigator
initialRoute={{ name: 'Login', title: 'Login', component: Login, navigationBarHidden: true }}
renderScene={(route, navigator) => {
return <route.component navigator={navigator}/>;
}}
navigationBar={
<Navigator.NavigationBar
routeMapper={{
LeftButton: (route, navigator, index, navState) => {
return null;
},
RightButton: (route, navigator, index, navState) => {
return null;
},
Title: (route, navigator, index, navState) => {
return (
<Text style={styles.navigationBarText}>{route.title}</Text>
);
}
}}
style={styles.navigationBar}
navigationStyles={Navigator.NavigationBar.StylesIOS}
/>
}
/>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1
},
navigationBar: {
backgroundColor: 'red'
},
navigationBarText: {
marginVertical: 10,
fontSize: 16,
fontWeight: '700'
}
});
AppRegistry.registerComponent('app', () => app);
import React, {Component} from 'react';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scrollview'
import {
Text,
StyleSheet,
TextInput,
View,
ScrollView,
KeyboardAvoidingView
} from 'react-native';
import Register from './register';
class Login extends Component {
render() {
return (
<View style={styles.View}>
<KeyboardAwareScrollView keyboardDismissMode="interactive" keyboardShouldPersistTaps={true} getTextInputRefs={() => {
return [this._firstNameTI, this._lastNameTI, this._countryTI, this._stateTI, this._addrTI, this._emailTI, this._msgTI, this._notesTI];
}}>
<TextInput style={styles.TextInput} placeholder={'First Name'} ref={(r) => { this._firstNameTI = r; }} returnKeyType={'next'} onSubmitEditing={(event) => this._lastNameTI.focus()}/>
<TextInput style={styles.TextInput} placeholder={'Last Name'} ref={(r) => { this._lastNameTI = r; }} returnKeyType={'next'} onSubmitEditing={(event) => this._countryTI.focus()}/>
<TextInput style={styles.TextInput} placeholder={'Country'} ref={(r) => { this._countryTI = r; }} returnKeyType={'next'} onSubmitEditing={(event) => this._stateTI.focus()}/>
<TextInput style={styles.TextInput} placeholder={'State'} ref={(r) => { this._stateTI = r; }} returnKeyType={'next'} onSubmitEditing={(event) => this._addrTI.focus()}/>
<TextInput style={styles.TextInput} placeholder={'Address'} ref={(r) => { this._addrTI = r; }} returnKeyType={'next'} onSubmitEditing={(event) => this._emailTI.focus()}/>
<TextInput style={styles.TextInput} keyboardType="email-address" placeholder={'Email'} ref={(r) => { this._emailTI = r; }} returnKeyType={'next'} onSubmitEditing={(event) => this._msgTI.focus()}/>
<TextInput style={styles.TextInput} placeholder={'Message'} ref={(r) => { this._msgTI = r; }} returnKeyType={'next'} onSubmitEditing={(event) => this._notesTI.focus()}/>
<TextInput style={styles.TextInput} placeholder={'Notes'} ref={(r) => { this._notesTI = r; }} returnKeyType={'go'}/>
</KeyboardAwareScrollView>
</View>
);
}
}
var styles = StyleSheet.create({
View: {
flex: 1,
paddingTop: 64
},
TextInput: {
borderWidth: 1,
height: 40,
marginTop: 5,
marginLeft: 5,
marginRight: 5,
paddingHorizontal: 5
}
});
export default Login