0

I'm using react-native-router-flux navigation(version: ^4.0.0-beta.21) for React Native.(version: 0.48.3) The scenes are as follows:

<Scene key="scene_condition"
       tabs={true}
       type="reset"
       tabBarStyle={styles.tabBarStyle}
       tabBarSelectedItemStyle={styles.tabBarSelectedItemStyle}
       navigationBarStyle={styles.navBarStyle}
       titleStyle={styles.navBarTitleStyle}
       hideTabBar={false}
       hideNavBar={true}
       duration={0}
       tabBarPosition="bottom"
       labelStyle={{fontSize: 7}}
       title="">
    <Scene key="scene_condition_car"
           tabBarLabel={gettext("Model")}
           title={gettext("Model")}
           component={Car}
           icon={TabIcon}
           duration={0}
           iconTittleHidden
           iconName="directions-car"
           leftButtonIconStyle={styles.moduleButton}
           leftButtonImage={require('./img/icons/left.png')}
           onLeft={(props) => requestOverview(props.request.id)}
           navigationBarStyle={styles.navBarStyle}
           titleStyle={styles.navBarTitleStyle}/>
    <Scene key="scene_condition_specs"
           tabBarLabel={gettext("Specifications")}
           title={gettext("Specifications")}
           labelStyle={{fontSize: 18}}
           component={CarSpecs}
           icon={TabIcon}
           iconTittleHidden
           duration={0}
           iconName="control-point-duplicate"
           leftButtonIconStyle={styles.moduleButton}
           leftButtonImage={require('./img/icons/left.png')}
           onLeft={(props) => requestOverview(props.request.id)}
           navigationBarStyle={styles.navBarStyle}
           titleStyle={styles.navBarTitleStyle}/>
    <Scene key="scene_condition_picture"
           tabBarLabel={gettext("Pictures")}
           title={gettext("Pictures")}
           component={CarPicture}
           icon={TabIcon}
           iconTittleHidden
           duration={0}
           iconName="photo-camera"
           leftButtonIconStyle={styles.moduleButton}
           leftButtonImage={require('./img/icons/left.png')}
           onLeft={(props) => requestOverview(props.request.id)}
           navigationBarStyle={styles.navBarStyle}
           titleStyle={styles.navBarTitleStyle}/>
</Scene>

Thus, main scene and three tab scenes. My question is how can I hide tabBar and navBar on the tab scene with key scene_condition_picture?

The render method of that component is as follows:

render() {
        const self=this;

        if(this.state.showCamera){
            return <CameraApp cameraData={this.state.data}/>;
        }

        return (
            <View>
                <StatusBar backgroundColor="blue" barStyle="light-content"/>
                <Zoom visible={this.state.zoomVisible} close={() => this.setState({zoomVisible: false})} image={this.state.zoomImage} imageIndex={this.state.zoomIndex} pictures={this.state.zoomPictures} remove={this.onRemoveImage.bind(this)} />
                <FlatList
                    data={this.state.pictures}
                    renderItem={({item}) => {
                        return (
                            <View style={styles.card}>
                                <Card title={item.title} mandatory={item.mandatory} image={item.image} noImage={item.noImage} onPress={() => self.pictureOverlay(item)}/>
                            </View>
                        )
                    }}
                    keyExtractor={() => Common.generateUUID()}
                    numColumns={3}
                />
            </View>
        )
    }

Thus, I want to hide tabBar and navBar only if this.state.showCamera is true. Then I want to load camera and I do not need tabBar or navBar.

If this.state.showCamera is false then I want to show tabBar or navBar and that is in this case good.

Thus the only thing that I need is to hide tabBar or navBar if this.state.showCamera is true.

Any idea?

Boky
  • 11,554
  • 28
  • 93
  • 163
  • I have never tried but [`hideNavBar`](https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md#scene) prop and returning a null component for [`navBar`](https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md#scene) prop should work I think. – bennygenel Sep 21 '17 at 07:45
  • @bennygenel No. It doesn't work. – Boky Oct 09 '17 at 08:42

0 Answers0