React Native - creating flexible matrix of inputs - matrix

Question

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!