CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
elporfirio
elporfirio

Reputation: 336

How to call a function from react-navigation header?

I am actually using react navigation https://reactnavigation.org/, I have a Component with a method:

class Sing extends Component {
   singASong = () => {
     console.log('hello i am singing');
   }
}

this component will be rendered with react-navigation and a custom header, the question is: how to call the method singASong from the custom header?:

const routeStackNavigation = {
  SingingMode: {
    screen: Sing,
    navigationOptions: ({ navigation }) => ({
      header: (
        <CustomNav onPressAction={() =>{
                 // how to call the method singASong from here ?
                }
              }
        />
      ),
    }),
  },
};

UPDATE

I set and test the value with this:

  this.props.navigation.setParams({'onPress': 'akumen' });
    setTimeout(() => {
      console.log(this.props.navigation.getParam('onPress')); // akumen
    }, 2000);

And i tests values with:

      onPress={() =>{
        console.log('NAVIGATION',navigation);
        console.log('ON PRESS',navigation.getParam('onPress'));
        console.log('PARAMS',navigation.state.params);
        return navigation.getParam('onPress');
        }
      }

but get undefined

Undefined Values

FOR STACK NAVIGATION

Below I share pic with my real world example, it was a stack navigation and I did not notice before, but param it just set under the right stack, so take this as motivation to explore:

Stack NAvigation

Upvotes: 0

Views: 1395

Answers (1)

Alexander Vidaurre Arroyo
Alexander Vidaurre Arroyo

Reputation: 2242

You can use navigation params:

In componentDidMount

this.props.navigation.setParams({onPressAction: ()=>this.singASong()})

In navigationOptions

<CustomNav onPressAction={navigation.getParam("onPressAction") }/>

Upvotes: 1

Related Questions