Having a ScrollView inside any kind of touchable causes a very common problem in the Android platform. The problem is that you can not scroll the ScrollView because the touchable steals user’s touch, but it works as expected on IOS platform. You might ask why you would need this nested situation. Well, I wanted to have a long text inside a modal which raises the need to have ScrollView wrapped by a TouchableWithoutFeedback.

The following code is the first version that was working on IOS and not in Android

<TouchableWithoutFeedback onPress={() => {}}>
    <Text> My Header </Text>
    <View>
        <ScrollView>
            <Text> This is a very long text </Text>
        </ScrollView>
    </View>
</TouchableWithoutFeedback>

 

The solution to this problem is very straightforward, you just need to add onStartShouldSetResponder={() => true} to the View which wraps the intended ScrollView. So, it will not pass the user’s touch event to the higher level TouchableWithoutFeedback.

<TouchableWithoutFeedback onPress={() => {}}>
    <Text> My Header </Text>
    <View onStartShouldSetResponder={() => true}>
        <ScrollView>
            <Text> This is a very long text </Text>
        </ScrollView>
    </View>
</TouchableWithoutFeedback>

 

As you see, this problem has a very simple solution, but it wasted my time enough to make me write this post. I hope this will save time for someone.