Henry Okonkwo
Henry Okonkwo

Reputation: 373

ScrollView Not Scrolling in small view height in react native

I am working on a react native project but my scrollView is not working on small View height. This is my code.

<View style={{height: 300}}>
    <ScrollView>
        <View>
            ...
        </View>
        <View>
            ...
        </View>
        ...
    </ScrollView>
</View>

Please what could be the problem?

UPDATE

I have added more styling to explain further... The scrollView is in a bottom sheet react-native-raw-bottom-sheet which is the RBSheet as seen in the code. The scrollView isn't scrolling. Is anything wrong?

    <View>
      <RBSheet
        ref={ref}
        closeOnDragDown={true}
        closeOnPressMask={true}
        height={500}
        customStyles={{
          draggableIcon: {
            backgroundColor: Colors.light,
          },
          container: {
            borderTopLeftRadius: 16,
            borderTopRightRadius: 16,
          },
        }}>
        <View style={{flex: 1}}>
            <View style={{padding: 16}}>
                <View style={{height:300}}>
                  <ScrollView showsVerticalScrollIndicator={true}>
                    <View
                      style={[
                        FlexDirections.row,
                        JustifyContent.spaceBetween,
                        {paddingVertical: 8},
                      ]}>
                      <Text style={FontWeight.bold}>Name</Text>
                      <Text>Jane doe</Text>
                    </View>
                    ...

                  </ScrollView>
                </View>
            </View>
        </View>
      </RBSheet>
    </View>

Upvotes: 0

Views: 2518

Answers (1)

CR7
CR7

Reputation: 587

You can set closeOnDragDown to false.

If you need closeOnDragDown to be true, what you can try is to add an TouchableOpacity directly after the ScrollView like this:

   <ScrollView showsVerticalScrollIndicator={true}>
      <TouchableOpacity activeOpacity={1}>
        <View
          style={[
            FlexDirections.row,
            JustifyContent.spaceBetween,
            { paddingVertical: 8 },
          ]}>
          <Text style={FontWeight.bold}>Name</Text>
          <Text>Jane doe</Text>
        </View>
      </TouchableOpacity>
    </ScrollView>

Upvotes: 1

Related Questions