Skip to content

Instantly share code, notes, and snippets.

@mrkpatchaa
Forked from thekevinscott/TabbingThroughInputs.js
Created February 18, 2019 10:01
Show Gist options
  • Save mrkpatchaa/d589b506696fcb7dd3a959b03c8e4879 to your computer and use it in GitHub Desktop.
Save mrkpatchaa/d589b506696fcb7dd3a959b03c8e4879 to your computer and use it in GitHub Desktop.
import React from 'react';
import {
StyleSheet,
View,
TextInput,
AppRegistry,
} from 'react-native';
class App extends React.Component {
constructor(props) {
super(props);
this.focusNextField = this.focusNextField.bind(this);
this.inputs = {};
}
focusNextField(id) {
this.inputs[id].focus();
}
render() {
return (
<View style={styles.outerContainer}>
<TextInput
placeholder="one"
blurOnSubmit={ false }
onSubmitEditing={() => {
this.focusNextField('two');
}}
returnKeyType={ "next" }
style={styles.textInput}
ref={ input => {
this.inputs['one'] = input;
}}
/>
<TextInput
placeholder="two"
blurOnSubmit={ false }
onSubmitEditing={() => {
this.focusNextField('three');
}}
returnKeyType={ "next" }
style={styles.textInput}
ref={ input => {
this.inputs['two'] = input;
}}
/>
<TextInput
placeholder="three"
blurOnSubmit={ false }
onSubmitEditing={() => {
this.focusNextField('four');
}}
returnKeyType={ "next" }
style={styles.textInput}
ref={ input => {
this.inputs['three'] = input;
}}
/>
<TextInput
placeholder="four"
blurOnSubmit={ true }
returnKeyType={ "done" }
style={styles.textInput}
ref={ input => {
this.inputs['four'] = input;
}}
/>
</View>
);
};
}
const styles = StyleSheet.create({
outerContainer: {
flex: 1,
paddingTop: 60,
alignItems: 'center',
flexDirection: 'column',
},
textInput: {
alignSelf: 'stretch',
borderRadius: 5,
borderWidth: 1,
height: 44,
paddingHorizontal: 10,
marginHorizontal: 20,
marginBottom: 20,
},
});
export default App;
AppRegistry.registerComponent('NextInput', () => App);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment