How to use navigation properly in React native

Question

I just started using React Native and at the moment I am trying to learn how to build a simple mobile application (testing on Andriod emulator). I got two screens/scenes at the moment (Home and Graph). this is what it should look like: header nav. design

I've been searching all over the internet, but can't seem to find the best way on how to implement this kind of header-navigation --> When pressed on the graph icon: the VIEW on the Home screen needs to swipe to the left (out of the screen) and the graphVIEW needs to come in from the right of the screen (like an animation). I 've looked at react-navigation Tabs / Stacks, but they all seem to have fixed layouts etc.

Can someone help me with this or point me in the right direction?

Thank you very much!

Ravi Raj · Accepted Answer · 2017-06-12 06:02:17Z

I hope this is what your looking for...

Each screen has its own navigationOptions which helps to configure how its is presented.As of v1.0.0-beta.9 Navigation options can now be a function that receives same props that are available to the screen component.

Add navigationOptions inside your Home screen. Now set Custom headerRight, your graph image wrapped inside some touchable item and hook the navigation.navigate to onPress as shown below.

static navigationOptions = ({ navigation, screenProps }) => ({
 title: 'Home',
 headerRight:(
  <TouchableHighlight onPress={() => navigation.navigate('GraphScreen')} >
   <Image source={require('./my-graph-icon.png')} />
  </TouchableHighlight>
 ) 
});

Note: The navigationOptions list are different for tab and stack navigators to which the screen is added to, the above should work for stack navigator.

Check React-Navigation docs for navigation options here

Collectives™ on Stack Overflow

How to use navigation properly in React native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related