I have a global wrapper for my app that handles clicks to automatically dismiss the keyboard when it's open. However, this leads to the ScrollView not working since it is wrapped inside of a Pressable.
const MyApp = () => (
<Pressable onPress={Keyboard.dismiss}>
<ScrollView>
<Text>Example text</Text>
<Text>Example text</Text>
<Text>Example text</Text>
<Text>Example text</Text>
</ScrollView>
</Pressable>
)
I expected to be able to fix this by adding the onStartShouldSetResponder
prop to the ScrollView:
const MyApp = () => (
<Pressable onPress={Keyboard.dismiss}>
<ScrollView onStartShouldSetResponder={() => true}>
<Text>Example text</Text>
<Text>Example text</Text>
<Text>Example text</Text>
<Text>Example text</Text>
</ScrollView>
</Pressable>
)
However, this didn't work as expected and I had to use the following code to make it work:
const MyApp = () => (
<Pressable onPress={Keyboard.dismiss}>
<ScrollView>
<View onStartShouldSetResponder={() => true}>
<Text>Example text</Text>
<Text>Example text</Text>
<Text>Example text</Text>
<Text>Example text</Text>
</View>
</ScrollView>
</Pressable>
)
This requires creating a custom style prop for the View that wraps the content of ScrollView. I'm not sure why my expected solution didn't work and what I am misunderstanding about the onStartShouldSetResponder
prop on the ScrollView. What is the technical reason why my expected solution doesn't work?