Enable ScrollView in both direction react native

Question

How to enable ScrollView in horizontally and vertically both. But i don't want to use ListView. Please suggest how can i do that. I want to scroll whole render method View in both directions. Here is my code. In this, all the TextView and TextInput appears in one line after ScrollView Settings. I want each view separately.

render() {
    const { navigate } = this.props.navigation;
    if (this.state.isLoading) {
      return (
        <View style={{ flex: 1, paddingTop: 20 }}>
          <ActivityIndicator />
        </View>
      );
    }
    return (
<View style={styles.MainContainerViewCamp}>

<Text style={{ padding: 5, fontSize: 35, backgroundColor: '#00BCD4', marginBottom: 7 }}>Data Slabs</Text>
    <ScrollView keyboardShouldPersistTaps='always' style={styles.container}
            directionalLockEnabled={false}
            horizontal={true}>

      <View style={styles.SwitchOuterSectionStyle}>
      <Text style={styles.textViewContainer}>A(1,1) </Text>
        <TextInput placeholder="CPR*" value={this.state.cpr1} style={styles.TextInputStyleClass}

           keyboardType='numeric'

          onChangeText={cpr1 => this.setState({ cpr1 })} underlineColorAndroid='transparent' />

        <TextInput placeholder="CPM*" value={this.state.cpm1} style={styles.TextInputStyleClass}

           keyboardType='numeric'

          onChangeText={cpm1 => this.setState({ cpm1 })} underlineColorAndroid='transparent' />
      </View>


      <View style={styles.SwitchOuterSectionStyle}>
      <Text style={styles.textViewContainer}>B(0.75,0.75) </Text>

        <TextInput placeholder="CPR*" value={this.state.cpr2} style={styles.TextInputStyleClass}

           keyboardType='numeric'

          onChangeText={cpr2 => this.setState({ cpr2 })} underlineColorAndroid='transparent' />

        <TextInput placeholder="CPM*" value={this.state.cpm2} style={styles.TextInputStyleClass}

           keyboardType='numeric'

          onChangeText={cpm2 => this.setState({ cpm2 })} underlineColorAndroid='transparent' />

      </View>

      <View style={styles.SwitchOuterSectionStyle}>
      <Text style={styles.textViewContainer}>C-Default(0.5,0.5) </Text>
        <TextInput placeholder="CPR*" value={this.state.cpr3} style={styles.TextInputStyleClass}

           keyboardType='numeric'

          onChangeText={cpr3 => this.setState({ cpr3 })} underlineColorAndroid='transparent' />

        <TextInput placeholder="CPM*" value={this.state.cpm3} style={styles.TextInputStyleClass}

          editable={this.state.bud} keyboardType='numeric'

          onChangeText={cpm3 => this.setState({ cpm3 })} underlineColorAndroid='transparent' />

      </View>

      <View style={styles.SwitchOuterSectionStyle}>
      <Text style={styles.textViewContainer}>D(0.25,0.25)</Text>
        <TextInput placeholder="CPR*" value={this.state.cpr4} style={styles.TextInputStyleClass}

           keyboardType='numeric'

          onChangeText={cpr4 => this.setState({ cpr4 })} underlineColorAndroid='transparent' />
        <TextInput placeholder="CPM*" value={this.state.cpm4} style={styles.TextInputStyleClass}

          editable={this.state.bud} keyboardType='numeric'

          onChangeText={cpm4 => this.setState({ cpm4 })} underlineColorAndroid='transparent' />

      </View>

      <View style={styles.SwitchOuterSectionStyle}>
       <Text style={styles.textViewContainer}>E(0,0)</Text>
        <TextInput placeholder="CPR*" value={this.state.cpr5} style={styles.TextInputStyleClass}

          keyboardType='numeric'

          onChangeText={cpr5 => this.setState({ cpr5 })} underlineColorAndroid='transparent' />
        <TextInput placeholder="CPM*" value={this.state.cpm5} style={styles.TextInputStyleClass}

          editable={this.state.bud} keyboardType='numeric'

          onChangeText={cpm5 => this.setState({ cpm5 })} underlineColorAndroid='transparent' />
      </View>

      <TouchableOpacity
        style={styles.SubmitButtonStyle}
        activeOpacity={.5}
        onPress={this.onSaveDataSlabs} >
        <Text style={styles.TextStyle}> SAVE </Text>
      </TouchableOpacity>
    </ScrollView>
  </View>
);
}

And here is the stylesheet:-

const styles = StyleSheet.create({

  MainContainerViewCamp: {
    justifyContent: 'center',
    paddingTop: (Platform.OS === 'ios') ? 20 : 30,
    padding: 5,
  },
  SwitchOuterSectionStyle: {
    flexDirection: 'row',
    padding: 4,
    justifyContent: 'center',
    alignItems: 'center'

  },
  textViewContainer: {
    padding: 7,
    fontSize: 17,
    width: 150,
  },
  TextInputStyleClass: {
    textAlign: 'left',
    paddingLeft: 7,
    margin: 10,
    width: 150,
    height: 40,
    borderWidth: 1,
    borderColor: '#00BCD4',
  },
  listViewStyle: {
    borderWidth: 1,
    height: 360,
    borderColor: '#87ceeb',
  },
  SubmitButtonStyle: {
    marginTop: 10,
    paddingTop: 15,
    paddingBottom: 15,
    backgroundColor: '#00BCD4',
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#fff'
  },
  TextStyle: {
    color: '#fff',
    textAlign: 'center',
  }
});

Answer 1

Just set both directionalLockEnabled and horizontal to make it work

<ScrollView 
    style={styles.container}
    directionalLockEnabled={false}
    horizontal={true}
>

And there is a library that you can use. It's Four-way scrolling Scroller View for react-native.