CODEWITHSUNDEEP
javascriptreact-native
Chris Henry
Chris Henry

Reputation: 199

React native Hide navigation bar element

i have code for a working navigation bar, however i need to hide the navigation bar, due to having a video player to when clicked fullscreen mode. the navigation bar does not hide.

Navbar.js file here is the code for the navbar

export default class Navbar extends Component {
  render() {
    return(
      <Header
        style={{backgroundColor: Colors.navbarBackgroundColor}}
        backgroundColor={Colors.navbarBackgroundColor}
        androidStatusBarColor={Colors.statusBarColor}
        noShadow={true}
        >
        {this.props.left ? this.props.left : <Left style={{flex: 1}} />}
        <Body style={styles.body}>
          <Title style={styles.title}>{this.props.title}</Title>
        </Body>
        {this.props.right ? this.props.right : <Right style={{flex: 1}} />}
      </Header>
    );
  }
}

Here is the file where I am using the narbar, how can i hide ?

import Navbar from '../component/Navbar';

onFullScreen(fullScreen) {

}


return(
  <SideMenuDrawer ref={(ref) => this._sideMenuDrawer = ref}>
//Hide this navbar
 <Navbar left={left} right={right} title={this.props.title} />
  <Container style={{backgroundColor: '#fdfdfd'}}>
  <Video url={'http://techslides.com/demos/sample-videos/small.mp4'}
  onFullScreen={status => this.onFullScreen(status)}
  style={{ width: Dimensions.get('window').width, height: 200}}/>
  </Container>
  </SideMenuDrawer>
  );
}

Upvotes: 2

Views: 584

Answers (2)

Ben Kane
Ben Kane

Reputation: 10040

You can conditionally render a component based on a boolean. So you could introduce a boolean you toggle based on if you're in fullscreen or not, then use it to decide if you want to render the nav bar:

{!isFullscreen && <Navbar left={left} right={right} title={this.props.title} />}

In reality that might be this.props.isFullscreen or this.state.isFullscreen depending on where you want to track the value, but that's the general concept.

Here's an example using internal state based on your current code:

export default class YourComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isFullScreen: false
    };
  }

  onFullScreen = fullScreen => {
    this.setState({
      isFullScreen: fullScreen
    });
  }

  render() {
    const {isFullScreen} = this.state;

    return (
      <SideMenuDrawer ref={(ref) => this._sideMenuDrawer = ref}>
        {!isFullScreen && <Navbar left={left} right={right} title={this.props.title} />}

        <Container style={{ backgroundColor: '#fdfdfd' }}>
          <Video
            url={'http://techslides.com/demos/sample-videos/small.mp4'}
            onFullScreen={this.onFullScreen}
            style={{ width: Dimensions.get('window').width, height: 200 }} />
        </Container>
      </SideMenuDrawer>
    );
  }
}

I don't have all the info about your project, so this assumes the value passed back to Video's onFullScreen prop is a boolean. If it's an object, you might need to use something like this instead:

onFullScreen = status => {
  this.setState({
    isFullScreen: status.fullScreen
  });
}

Upvotes: 1

nima moradi
nima moradi

Reputation: 2628

using your navbar is not a good idea always it's better to use native element's but by the way you should have a callback for video play and stop

videoWillPlay = (event) => {
    this.setState({flexSize: 0,Height:0});
};

videoWillStop = (event) => {
    this.setState({flexSize: 3.5,Height:1});
};

then you can set navbar height zero or if it have flex zero the flex
and you should dynamic style

<Navbar left={left} right={right} title={this.props.title} 
    style={{flex: this.state.flexSize}}/>

you can also make video play to full size and don't touch navbar

Upvotes: 1

Related Questions