React native stackNavigator call function from header

Question

Hi everyone I'm using stacknavigator. I just got 2 pages and everypage has functions. In the mainpage I'm fetching data. In mainpage header options I put touchableopacity in right on header, when onpress navigates second page.

First I gotta give the fetched data as navigation param but they'r in different file

Secondly I gotta call save function from header button which is in secondpage

navigation and options

const HomeStack = createStackNavigator()
const navOptFirstPage = ({ route, navigation }) => {

  return {
    headerTitleStyle: { alignSelf: 'center' },
    title: "title",
    headerTintColor: '#fff',
    headerStyle: {
      
      shadowColor: 'transparent',
    },

    headerLeft: () => (
      <Box mt={15} ml={10}>
        <TouchableOpacity >
          <Text color={'#FFFFFF'}>Hi</Text>
        </TouchableOpacity>
      </Box>
    ),

    headerRight: () => (
      <Box m={10}>
        <TouchableOpacity onPress={() => navigation.navigate('SecondPage')}>
          <Text color={'#FFFFFF'}>Edit with route param</Text>
        </TouchableOpacity>
      </Box>
    ),
  };
};
const navOptSecondPage = ({ route, navigation }) => {
  return {
    headerTitleStyle: { alignSelf: 'center' },
    title: "title",
    headerTintColor: '#fff',
    headerStyle: {
     
      shadowColor: 'transparent',
    },

   

    headerRight: () => (
      <Box m={10}>
        <TouchableOpacity >
          <Text color={'#FFFFFF'}>Save</Text>
        </TouchableOpacity>
      </Box>
    ),
  };
};
function HomeStackS() {

  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="FirstPage"
        component={FirstPage}
        options={navOptFirstPage}
        

      />
      <HomeStack.Screen
        name="SecondPage"
        component={SecondPage}
        options={navOptSecondPage}

      />
    </HomeStack.Navigator>
  )
}

first page componentDidmount

componentDidMount() {   
    const url = "https://aaaaXXXX1.herokuapp.com/getData";
    fetch(url).then((response) => response.json())
    .then((responseJson) => {
        this.setState({
            //this is the data i gotta apss it to other screen
        dataSource: responseJson.data,        
        })
    })
    .catch((error) => {
        console.log(error);
    });
  }

second page funcion i gotta call it from header

componentDidMount() {
    //sets the data
    this.setState(
        {
          dataSource: this.props.route.params.data,        
        },
    this.props.navigation.setParams({ functionCallFromHeader: this.functionCallFromHeader});
  }
  functionCallFromHeader = () => {
    alert("Awesome");
  }

Look like this

question from:https://stackoverflow.com/questions/65860158/react-native-stacknavigator-call-function-from-header

Answer 1

Waitting for answers