CODEWITHSUNDEEP
react-nativereact-navigation
Bomber
Bomber

Reputation: 10967

react navigationv2, navigate function not in header props

I have setup my StackNavigator like so:

const AppNavigator = StackNavigator(
    {
        Home: {
            screen: HomeScreen
        },
        Month: {
            screen: Month
        },
        Day: {
            screen: Day
        }
    },
    {
        headerMode: "screen",
        navigationOptions: {
            header: props => <CustomHeader {...props} />
        }
    }
);

I can navigate from each screen using this.props.navigation.navigate("Month");

However, in my CustomHeader, I cannot see this prop navigate to invoke. I need to navigate back to the home screen using a button in my header.

  resetForm() {
    const {
      resetForm,
      clearCredentials,
      navigation
    } = this.props;

  this.props.navigation.navigate("Home");


  }

How can I access the navigate prop to move to another screen?

CustomHeader in full:

import React, { Component } from "react";

import { connect } from "react-redux";
import {
  Image,
  View,
  Text,
  Modal,
  Button,
  TouchableOpacity,
  AsyncStorage,
  StyleSheet,
  Platform,
  Alert,
  TouchableHighlight
} from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { NavigationActions } from "react-navigation";
import {
  setYear,
  setStudent,
  setGroup,
  fetchCategories,
  resetForm,
  resetData,
  fetchEvents
} from "../actions/events";

class CustomHeader extends Component {
  constructor() {
    super();

    this.resetForm = this.resetForm.bind(this);
    this.fetchEvents = this.fetchEvents.bind(this);
    this.showAlert = this.showAlert.bind(this);
  }

  resetForm() {
    const navigateAction = NavigationActions.navigate({
      routeName: "Home",

      params: {},

      action: NavigationActions.navigate({ routeName: "Home" })
    });

    this.props.dispatch(navigateAction);
  }

  showAlert() {
    Alert.alert("Events refreshed");
  }

  fetchEvents() {
    const {
      fetchEvents,
      navigate,
      credentials: { group }
    } = this.props;
    resetData();
    fetchEvents(group);
    navigate("Month");
    this.showAlert();
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.resetForm}>
          <Image
            source={require("../img/logout.png")}
            style={{ width: 25, height: 30 }}
          />
        </TouchableOpacity>

        <TouchableOpacity onPress={this.fetchEvents}>
          <Image
            source={require("../img/refresh.png")}
            style={{ width: 20, height: 30 }}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    resetForm: () => dispatch(resetForm()),
    fetchEvents: id => dispatch(fetchEvents(id)),
    resetData: () => dispatch(resetData())
  };
};

const mapStateToProps = state => {
  return {
    categories: state.fetchCategories,
    isLoading: state.isLoading,
    credentials: state.setCredentials
  };
};

export default connect()(CustomHeader);

Upvotes: 0

Views: 61

Answers (1)

tuan.tran
tuan.tran

Reputation: 1881

You must pass navigation to navigationOptions to use in header component. Your AppNavigator should be like this

const AppNavigator = StackNavigator(
{
    Home: {
        screen: HomeScreen
    },
    Month: {
        screen: Month
    },
    Day: {
        screen: Day
    }
},
{
    headerMode: "screen",
    navigationOptions: ({ navigation }) => ({
        header: props => <CustomHeader {...props} navigation={navigation}/>
    })
}
);

CustomHeader

...
resetForm() {
  const {navigation} = this.props;
  navigation.navigate("Home");
}
...

Upvotes: 1

Related Questions