CODEWITHSUNDEEP
react-nativescrollview
Ethan Yan
Ethan Yan

Reputation: 121

ScrollView inside of TouchablewithoutFeedback

I am trying to make a text reader. It has Header and a content with mass characters, so it's required scrollview to let the user read all the staff.

But now what confused me is, I am trying to hide the header when people press the screen for the short period, and when people scroll down, which has finger touch the screen and move a bit, header still there.

Right now what I tried is, 

<TouchableWithoutFeedback style={{padding: 40}} onPress={()=>this.pressScreen()} pressRetentionOffset={{top:1,left:1,bottom:1,right:1}}>
      <ScrollView style={{width: screen.width,
      height:screen.height*0.8}}>
        <Text>{this.state.data.chptTitle}</Text>
        <Text>{this.state.data.chptContent}</Text>
      </ScrollView>
</TouchableWithoutFeedback>

but clearly it doesn't work becuase pressRetentionOffset cannot work with scrollView. What should I do? Any advice?

Upvotes: 0

Views: 1315

Answers (1)

Noitidart
Noitidart

Reputation: 37238

I would not wrap it on an onPress. I would put the ScrollView as parent and then wrap all the Text within in a parent Text, then use the onPress of the parent <Text>. Like this:

  <ScrollView style={{padding: 40, width: screen.width,
  height:screen.height*0.8}}>
    <Text onPress={()=>this.pressScreen()}>
      <Text>{this.state.data.chptTitle}</Text>
      <Text>{this.state.data.chptContent}</Text>
    </Text>
  </ScrollView>

To me personally, it doesn't make sense to make a ScrollView be the child of a Touchable*

Upvotes: 1

Related Questions