0

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?

MManke
  • 103
  • 3

0 Answers0