CODEWITHSUNDEEP
androidreact-native
N Sharma
N Sharma

Reputation: 34507

How to use toolbar in react native android application

I am learning react-native programming where I am trying to integrate http://react-native-material-design.github.io/installation for material design.

I want to use this http://react-native-material-design.github.io/components/toolbar view in my application as there is no such documentation for how to use it.

Can anyone help me how can I use this view in my application. Thanks in advance.

PS: I do not want to use this https://facebook.github.io/react-native/docs/toolbarandroid.html

Upvotes: 8

Views: 2972

Answers (1)

eden
eden

Reputation: 6103

Apart from not knowing what navigator you're using, with react-native-router-flux you can easily setup a NavBar (or Toolbar in Android words) by simply adding navBar={MyCustomNavBar} to the Scene where you want your toolbar to exist, 

<Scene sceneStyle={{marginTop: Metrics.navBarHeight}} component={HomeScreen} key="home" navBar={MyCustomNavBar}/>

and

import MyCustomNavBar from './components' at the top of your navigator.

CustomNavBar can be anything you can imagine. You may add Icons, Buttons, Logos or even animated search bar. Just mind that in React Native, toolbars are positioned absolute, and they have a fixed height, therefore all the Scenes in Navigator must have a marginTop style, in order to prevent content being overlapped. An example MyCustomBar can have a wrapper view such as

render() {
 return (
   <View style={containerStyle}>
      ...
   </View>
 )
}

with containerStyles of

container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: Metrics.navBarHeight,
  }

NavBar heights are not the same in Android and iOS (54 and 64 respectively)

Upvotes: 3

Related Questions