CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigation
Rami Chasygov
Rami Chasygov

Reputation: 2784

Navigate in React-Native

I trying to navigate in react-native, this is my source 

import React from 'react';
import { StackNavigator } from 'react-navigation';
import { Text, TouchableOpacity } from 'react-native';

import LoginForm from './components/LoginForm';
import EmployeeList from './components/EmployeeList';
import EmployeeCreate from './components/EmployeeCreate';

const AddButton = (param) => (
  <TouchableOpacity onPress={() => console.log(param)}>
    <Text style={styles.addButtonStyle}>Add</Text>
  </TouchableOpacity>
);

const styles = {
  addButtonStyle: {
    fontSize: 18,
    marginRight: 25,
    color: '#007AFF'
  },
  headerTitleStyle: {
    fontWeight: 'normal',
    alignSelf: 'center',
    marginLeft: 50
  }
};

const RouterComponent = StackNavigator({
  EmployeeList: {
    screen: EmployeeList,
    navigationOptions: {
      title: 'Employee List',
      headerTitleStyle: styles.headerTitleStyle,
      headerLeft: null,
      headerRight: AddButton()
    }
  },
  EmployeeCreate: {
    screen: EmployeeCreate,
    navigationOptions: {
      title: 'Employee Create'
    }
  },
  Home: {
    screen: LoginForm,
    navigationOptions: {
      title: 'Please, Log In',
      headerTitleStyle: styles.headerTitleStyle
    }
  }
});

export default RouterComponent;

Actually what I need, it's in my const AddButton reach this.props.navigation.navigate('EmployeeCreate'); for me be able to navigate to EmployeeCreate from AddButton, but AddButton doesn't have any props. I'm tried to throw props as parameter in AddButton, but nothing good happen. Anybody know, how fix this issue?

Upvotes: 0

Views: 150

Answers (1)

justelouise
justelouise

Reputation: 770

In the EmployeeList component in the StackNavigator, you can define the navigationOptions as such:

navigationOptions: ({navigation}) => 
return {
  title: 'Employee List',
  headerTitleStyle: styles.headerTitleStyle,
  headerLeft: null,
  headerRight: AddButton(navigation)
}

Then in the AddButton component, you can already use the navigation.navigate function.

Upvotes: 1

Related Questions