State change in parent component does not trigger re-render of NavigationSlidingTab

[EricCarrGH]

I have form components that updates parent state, and uses that parent state to re-render (checkboxes, etc).

As soon as I placed the View inside a NavigationSlidingTab, state changes stop triggering a render.

The docs for react-native-tab-view (Ex-Navigation wraps this for sliding tabs) states to add my state properties that change to the navigationState prop.

But I'm not sure how to pass that in through the ExNavigationSlidingTab wrapper. Any examples on how to do this? Have a state change in the parent componant trigger a re-render of the NavigationSlidingTab tabs?

Example render function. The view outside of the tab updates fine, but inside the tab it does not:

  render() {

    return (
      <View style={{flex:1}}>      

        <View>
          <TouchableOpacity onPress={()=> this.setState({toggle: !this.state.toggle})}>
            <Text>{this.state.toggle ? "ON" : "OFF"}</Text>
          </TouchableOpacity>
        </View>

        <SlidingTabNavigation                
          id="tabs"
          navigatorUID="tabs"
          initialTab="default"
          renderLabel = {({route, focused}) => <Text>{route.key}</Text>}
          >
          <SlidingTabNavigationItem id="default">

            <View>
              <TouchableOpacity onPress={()=> this.setState({toggle: !this.state.toggle})}>
                <Text>{this.state.toggle ? "ON" : "OFF"}</Text>
              </TouchableOpacity>
            </View>

          </SlidingTabNavigationItem>
        </SlidingTabNavigation>

      </View>
    );
}

Thanks!

[femiveys]

Have you been able to solve this. I have a similar problem.

[EricCarrGH]

I ended up adding react-native-tab-view to my project and following the example to include it in my view. It worked perfectly with regard to state/renders. Took about a half hour to integrate. Much less time then I spent troubleshooting this with ex-navigation's wrapper.