0

I am trying to implement a linear algebra calculator app with react-native, and am having trouble creating the matrix to input numbers into.

I don't want the matrix to be fixed in size, but rather have it flexible so the user can resize it according to their needs.

So far I have this:

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

class InputBox extends React.Component {
  render() {
        return (
            <View style={styles.inputBox}>
            </View>
        )
    }
}

export default class App extends React.Component {
  render() {
    return (
        <View style={styles.rootContainer}>
          <View style={styles.topContainer} />
          <View style={styles.matrixContainer}>
            { this._renderMatrixInputs() }
          </View>
        </View>
    );
  }

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

const styles = StyleSheet.create({
  rootContainer: {
    flex: 1
  },
  topContainer: {
    flex: .25,
  },
  matrixContainer: {
    flex: 8,

  },
  inputBox: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        borderBottomWidth: 0.5,
        margin: 10,
        borderColor: '#91AA9D'
    },
    inputRow: {
        flex: 1,
        maxHeight: 75,
        flexDirection: 'row',
        justifyContent: 'space-between'
    }

});

The above code isn't functional, but it displays the look that I'm going for. Here it is rendered on an iPhone simulator

I would appreciate it if someone could help me implement the resizing feature and help implement the TextInput boxes properly.

Thanks!

Community
  • 1
  • 1
wcwagner
  • 95
  • 1
  • 2
  • 8
  • What's wrong with the code you posted? as far as i can tell all you need to do is change the size variable and put it in the state or pass it through props to make it more dynamic (you also need to replace the 3 in the nested for loop). Then just add a `TextInput` in the InputBox component. – Ahmed Wagdi Apr 23 '17 at 20:28
  • @AhmedWagdi How would you recommend sizing the `TextInput`s? Should I use explicit height and width or use the `flex` property? Thanks – wcwagner Apr 23 '17 at 20:57
  • Use the flex property for width, you already have that setup correctly so you shouldnt need to change anything. For the height it depends on how you want it displayed, do you want it to take up more height as more rows are added or do you want it to remain the same height? – Ahmed Wagdi Apr 24 '17 at 09:16
  • @AhmedWagdi I want it to stay the same height. Right now I'm having a lot of trouble getting the keyboard to dismiss, as Numeric keyboards in react don't have a done button, and using TouchableWithoutFeedback with this flex matrix is troublesome – wcwagner Apr 25 '17 at 01:18
  • Try doing the following: 1) on your `rootContainer` try restricting the height to about 300 2) import `KeyboardAvoidingView` from RN and wrap your `rootContainer` in it. 3) Try putting these settings on your KeyboardAvoidingView: `` Play around with the configuration till you get something that you like – Ahmed Wagdi Apr 25 '17 at 11:53
  • Hey @AhmedWagdi, thanks a lot for the help! I got most of my desired functionality working, but hit a wall with regards to auto focusing the next input. I have posted a new question with my updated code in case you wanted to take a look: https://stackoverflow.com/questions/43625281/react-native-handling-multiple-numeric-inputs – wcwagner Apr 26 '17 at 04:49

0 Answers0