React Native: Handling multiple numeric inputs

Question

I am in the process of building a matrix of numeric text inputs, and have had a lot of trouble since the numeric keyboard doesn't have a Return or Next button. In addition, the numeric keyboard lacks a Done bar, so I had to use the TouchableWithoutFeedback component to handle dismissing it.

I am wondering if there is a recommended way to seamlessly input many numbers into a matrix of react-native TextInputs?

Below is my code, I have colored the containers to help lay the application out.

import React from 'react';
import { StyleSheet, Text, View, TextInput, TouchableWithoutFeedback, Keyboard} from 'react-native';

class InputBox extends React.Component {
  render() {
        return (
          <View style={styles.inputContainer}>
            <TextInput
              keyboardType="numeric"
              style={styles.matrixNumberInput}
            />
          </View>
        )
    }
}

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {'size': 3};
  }

  render() {
    return (
      <View style={styles.rootContainer}>
        <TouchableWithoutFeedback  onPress={Keyboard.dismiss}>
          <View style={styles.appContainer}>
            <View style={styles.matrixContainer}>
              { this._renderMatrixInputs() }
            </View>

            <View style={styles.solutionsContainer}>
              {/* solutions here */}
            </View>

          </View>
      </TouchableWithoutFeedback>
    </View>

    );
  }

  _renderMatrixInputs() {
    // harcoded 3 x 3 matrix for now....
    let views = [];
    let {size} = this.state;
      for (var r = 0; r < size; r++) {
          let inputRow = [];
          for (var c = 0; c < size; c++) {
              inputRow.push(
                <InputBox value={'X'} key={r.toString() +c.toString()} />
              );
          }
        views.push(<View style={styles.inputRow} key={r.toString()}>{inputRow}</View>)
        }
    return views
  }
}

const styles = StyleSheet.create({
  rootContainer: {
    flex:25,
    backgroundColor: 'lightyellow',
  },
  appContainer: {
    flex:1,
    backgroundColor: 'lightblue'
  },
  matrixContainer: {
    marginTop: 25,
    flex: 3, // take up half of screen
    backgroundColor: 'ivory',
  },
  solutionsContainer: {
    flex:5, // take up other half of screen
    backgroundColor: 'lavenderblush',
  },
  inputRow: {
      flex: 1,
      maxHeight: 75,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
  },
  inputContainer: {
      flex: 1,
      margin: 3,
      maxHeight: 35,
      maxWidth: 75,
      borderBottomWidth: 1,
      borderBottomColor: 'gray',
  },

  matrixNumberInput: {
    flex:1,
    backgroundColor:"azure"
  }

});

Thanks!

Meysam Izadmehr · Accepted Answer · 2017-04-26 05:23:11Z

2

For handling next and done in keyboard, you can use react-native-smart-scroll-view. It's a scrollView for working with textInputs.

answered Apr 26, 2017 at 5:23

Meysam Izadmehr

3,2601 gold badge19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

wcwagner Over a year ago

I'm afraid this won't work as they state: Warning this will not work if keyboardType for the TextInput is set to 'number-pad', 'decimal-pad', 'phone-pad' or 'numeric' as they do not have a return key

wcwagner Over a year ago

My keyboards are of type Numeric, which means react-native-smart-scroll-view won't work, as stated in their docs.

Meysam Izadmehr Over a year ago

Sorry, i didn't see that.

Collectives™ on Stack Overflow

React Native: Handling multiple numeric inputs

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related