React-navigation custom OnClick

Question

I'm trying to make a button in the middle of the screen that will navigate user when clicked and i'm using react-navigation library. How do i do it without stackNavigator, HeaderNavigator or DrawerNavigator ?

import React, { Component } from 'react';
import { Text } from 'react-native';
import { Button } from 'react-native-elements';

    export default class LoginButton extends Component {
      onPressButton() {
        console.log('pressed');
      }
      render() {
        return (
              <Button
              title='LOG IN'
              buttonStyle={styles.loginButton}
              onPress= ## how do i do it?
              />
        );
      }
    }

    const styles = {

      loginButton: {
        width: 290,
        height: 50,
        backgroundColor: '#A91515',
        alignItems: 'center',
        borderRadius: 4,
        marginTop: 35,
        marginLeft: 49,
        justifyContent: 'space-around'
      }
    };

You can create your custom navigators as well. Apart from that won't it be useless to use react-navigation and not use the Navigators? Any specific reason why you don't want to use the navigators your mentioned in the question? — aajiwani

Maiko Francisco Rugeria Maiko Francisco Rugeria · Accepted Answer · 2017-07-25T10:49:21

I have used StackNavigator but not the others so this answer is only for StackNavigator. First you need a router.

export const AppNavigator = StackNavigator({
   Home: { screen: Home },
   NextPage: { screen: NextPage}
})

Next you need the views for Home and Next Page. Make sure that the class name is the same as the screen's value in your router. Then, in your index.ios/android.js, in your AppRegistry, put AppRegistry.registerComponent('Appname', () => AppNavigator). AppNavigator is the name of your StackNavigator.

Next, go back to your code above. Below render(), put const { navigate } = this.props.navigation.

Finally, inside your onPress property, add navigate('NextPage'). NextPage is the name of your next screen.

All of these are in react-navigation's docs. Take time to read it to understand how my answer above works.

https://reactnavigation.org/docs/intro/

Hope this helps!

Final code:

import { StackNavigator } from 'react-navigation'
import React, { Component } from 'react'
import { AppRegistry, View, Text, Button } from 'react-native'

const AppNavigator = StackNavigator({
   Home: { screen: Home },
   NextPage: { screen: NextPage }
})

export default class Home extends Component{
   render(){
      const { navigate } = this.props.navigation
      return(
         <View>
            <Text>Homepage</Text>
            <Button title='NextPage' onPress={navigate('NextPage')}></Button>
         </View>
      )
   }
}

export default class NextPage extends Component{
   render(){
      return(
         <View>
            <Text>NextPage</Text>
         </View>
      )
   }
}

AppRegistry.registerComponent('AppName', () => AppNavigator)

This might not be accurate because I haven't really executed this.

React-navigation custom OnClick

1 Answers