Skip to content

Instantly share code, notes, and snippets.

@thekevinscott

thekevinscott/TabbingThroughInputs.js

Created February 15, 2017 00:59
Show Gist options
  • Save thekevinscott/22b66e5fe9ae35d633a28e27c129bc8b to your computer and use it in GitHub Desktop.
Save thekevinscott/22b66e5fe9ae35d633a28e27c129bc8b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Kevin Scott created this gist Feb 15, 2017.
    94 changes: 94 additions & 0 deletions TabbingThroughInputs.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,94 @@
    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);