using with react navigation and passing navigate props

[barron9]

navigate not working,appears null if it another tab selected.

class Chats extends React.Component {

   const { navigate } = this.props.navigation;
  renderItem={({item}) => <TouchableOpacity onPress={() => navigate('Chat')}><View style={{flex: 1,flexDirection:'row'}}>

> TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')
> 
> This error is located at:
>     in Chats (at App.js:294)
>     in StaticContainer (at SceneComponent.js:11)
>     in RCTView (at View.js:71)
>     in View (at SceneComponent.js:10)
>     in SceneComponent (created by ViewPagerAndroid)
>     in AndroidViewPager (at ViewPagerAndroid.android.js:238)
>     in ViewPagerAndroid (at createAnimatedComponent.js:147)
>     in AnimatedComponent (at index.js:246)
>     in RCTView (at View.js:71)
>     in View (at index.js:387)
>     in ScrollableTabView (at App.js:289)
>     in HomeScreen (at SceneView.js:31)
>     in SceneView (at CardStack.js:412)
>     in RCTView (at View.js:71)
>     in View (at CardStack.js:411)
>     in RCTView (at View.js:71)
>     in View (at CardStack.js:410)
>     in RCTView (at View.js:71)
>     in View (at createAnimatedComponent.js:147)
>     in AnimatedComponent (at Card.js:26)
>     in Card (at PointerEventsContainer.js:55)
>     in Container (at CardStack.js:454)
>     in RCTView (at View.js:71)
>     in View (at CardStack.js:383)
>     in RCTView (at View.js:71)
>     in View (at CardStack.js:382)
>     in CardStack (at CardStackTransitioner.js:97)
>     in RCTView (at View.js:71)
>     in View (at Transitioner.js:192)
>     in Transitioner (at CardStackTransitioner.js:49)
>     in CardStackTransitioner (at StackNavigator.js:60)
>     in Unknown (at createNavigator.js:52)
>     in Navigator (at createNavigationContainer.js:212)
>     in NavigationContainer (at App.js:323)
>     in App (at renderApplication.js:35)
>     in RCTView (at View.js:71)
>     in View (at AppContainer.js:102)
>     in RCTView (at View.js:71)
>     in View (at AppContainer.js:122)
>     in AppContainer (at renderApplication.js:34)
> render
>     index.delta?platform=android&dev=true&minify=false:58868:53
> proxiedMethod
>     index.delta?platform=android&dev=true&minify=false:34324:37
> finishClassComponent
>     index.delta?platform=android&dev=true&minify=false:7731:43
> updateClassComponent
>     index.delta?platform=android&dev=true&minify=false:7712:38
> beginWork
>     index.delta?platform=android&dev=true&minify=false:7987:42
> performUnitOfWork
>     index.delta?platform=android&dev=true&minify=false:9780:31
> workLoop
>     index.delta?platform=android&dev=true&minify=false:9832:49
> _invokeGuardedCallback
>     index.delta?platform=android&dev=true&minify=false:2774:21
> invokeGuardedCallback
>     index.delta?platform=android&dev=true&minify=false:2736:39
> renderRoot
>     index.delta?platform=android&dev=true&minify=false:9887:36
> performWorkOnRoot
>     index.delta?platform=android&dev=true&minify=false:10478:40
> performWork
>     index.delta?platform=android&dev=true&minify=false:10415:30
> batchedUpdates
>     index.delta?platform=android&dev=true&minify=false:10560:26
> batchedUpdates
>     index.delta?platform=android&dev=true&minify=false:4107:37
> _receiveRootNodeIDEvent
>     index.delta?platform=android&dev=true&minify=false:4190:23
> receiveTouches
>     index.delta?platform=android&dev=true&minify=false:4220:34
> __callFunction
>     index.delta?platform=android&dev=true&minify=false:2361:49
> <unknown>
>     index.delta?platform=android&dev=true&minify=false:2131:31
> __guardSafe
>     index.delta?platform=android&dev=true&minify=false:2323:13
> callFunctionReturnFlushedQueue
>     index.delta?platform=android&dev=true&minify=false:2130:21
> 

[Slowyn]

Hello, @barron9.
I don't see any mention of react-native-underline-tabbar in your stacktrace. There is a direct message that error is located in your code. I suspect issue is in the way how you use your Navigator. You pass props incorrectly. You may want to ask your question on StackOverflow.

P.S. Please, next time before creating an issue, make sure the problem is not on your side :)
P.P.S. If the problem is really in code of this module, feel free to reopen an issue, and provide more details in order I could help you.

[barron9]

how can you go another page with this tell your solution?

[barron9]

i am at example code i want to open a new class when i tap somewhere

[Slowyn]

It doesn't relate to this component, but anyway.
Here you can read the documentation for react-native-scrollable-tab-view. The documentation says

• page (Integer) - set selected tab(can be buggy see #126

It means you can set selected tab by passing page prop to tab-view.
Here is an example

      <ScrollableTabView page={this.state.currentPageIndex}>
       /* this.state./currentPageIndex is just for example */
        <ReactPage tabLabel="React" />
        <FlowPage tabLabel="Flow" />
        <JestPage tabLabel="Jest" />
      </ScrollableTabView>