Using Scroll View in React Native

Question

I want parent Screen to be fixed and Child Screen to be scrollable. using scroll doesn't provide me that functionality so what should I do ?

Answer 1

The ScrollView component does exactly what you want. The order of your components is the only important factor here.

In general, everything that is nested inside a ScrollView is scrollable, and everything outside is not. Hence,

<View>
    <View>
        // not scrollable
    </View>
    <ScrollView>
        // scrollable
    </ScrollView>
    <View>
      // not scrollable
    </View>
</View>

Here is an example of a scrollable container using ScrollView that is nested inside a parent View which is fixed, meaning not scrollable.

<SafeAreaView style={{ margin: 5 }}>
      <View>
        {Array(5)
          .fill(0)
          .map((_) => {
            return (
              <View style={{ margin: 10 }}>
                <Text>Not scrollable</Text>
              </View>
            )
          })}
      </View>
      <ScrollView>
        {Array(5)
          .fill(0)
          .map((_) => {
            return (
              <View style={{ margin: 10 }}>
                <Text>Scrollable</Text>
              </View>
            )
          })}
      </ScrollView>
      <View>
        {Array(5)
          .fill(0)
          .map((_) => {
            return (
              <View style={{ margin: 10 }}>
                <Text>Also not scrollable</Text>
              </View>
            )
          })}
      </View>
    </SafeAreaView>

which yields five text components at that top which are not scrollable, followed by five text components that are scrollable, followed by five text components that aren't scrollable.