React-native-tab-view: Swipe slider inside child view of TabViewAnimated also make tab scroll and changed

[mtr1012]

I have TabViewAnimated and some childs component inside it. Every child have slider inside. Everytime i swipe the slider, it make tab also scroll and changed. I want to swipe only the slider and not make tab scroll. Anyone please help.

Many thanks !

[never00miss]

You should study about panresponder first, and understand how react Native capture event.

Just example, try to make scrollview on scrollview, and try panresponder with that

[kidmysoul]

@mtr1012 Have you solved it? I have the same question for rendering slider in react native tab view, cannot slide any more.

[sarykemmoun]

@mtr1012 and @kidmysoul Did you resolve it?
I have the same issue in iOS:
When moving the slider the whole tab scrolls. Doesn't happen in Android.

[kidmysoul]

@sarykemmoun
No,I did not resolve it.I decided not use this library any more.At the end I make several view components by my self.

[sarykemmoun]

For everybody who needs:
Finally, I've solved it by a workaround.
I set the TabViewAnimated props of swipe to be depends on the state and changed the state when swiping the slider. See the code below:

<TabViewAnimated
     ...
     animationEnabled={this.state.allowScroll}
     swipeEnabled={this.state.allowScroll}        
/>

<Slider
   ...
   onValuesChangeStart={()=>  { this.setState({allowScroll: false}); }}
   onValuesChangeFinish={() => { this.setState({allowScroll: true}); }}
 />               

[satya164]

Hey, I just released a new alpha 2.0.0-alpha.0 of the library. It's rewritten using react-native-gesture-handler and react-native-reanimated addresses a many platform specific bugs and performance problems. The documentation is updated as well.

Please try the new version and see if it addresses your issue. If not, please open a new issue following the issue template.

[naorzr]

I had a similar issue and upgrading to 2.2.1 solved it.