How to trigger a function from another component in react native? - reactjs

Question

import { copilot, walkthroughable, CopilotStep } from 'react-native-copilot';
class DashboardContent extends Component {
state ={
secondStepActive: true
};
componentDidMount() {
this.props.start()
this.props.copilotEvents.on('stepChange', this.handleStepChange);
}
handleStepChange = step => {
console.log(`Current step is: ${step.name}`);
};
render() {
return (
<View> ...... <View/>
);
}
}
export default copilot({
animated: true,
overlay: 'svg',
})(DashboardContent);
I am using the react-native-copilot library for a walkthrough. I wish to trigger the this.props.start() function which starts the walkthrough using a button from my NavBar component - The _infoPage function in the code below should trigger the function basicaly.
The code for the Navbar is :
class NavBar extends Component {
state ={
isModalVisible: false,
email:'',
emailError: false,
emailErrorMessage: '',
};
_profileEdit() {
Actions.profileedit();
}
_notificationsPage(){
Actions.notifications();
}
_infoPage = () =>{
this.props.toggleTour();
}
toggleModal = () => {
this.setState({isModalVisible: !this.state.isModalVisible});
};
render() {
const {index, routes} = this.props.tabs;
console.log(index);
return (
<SafeAreaView>
<View style={styles.container}>
<StatusBar />
<TouchableOpacity onPress={this._infoPage}>
<MaterialCommunityIcons name="information-outline" size={24} color="#979797" style={{padding:10}}/>
</TouchableOpacity>
</View>
</SafeAreaView>
);
}
}
function mapStateToProps(state){
return {
tabs : state.tabs
}
}
function mapDispatchToProps(dispatch){
return {
changeCounter : (index) => dispatch({type:'PAGE_CHANGED',payload: index}),
toggleTour: () => dispatch({
type: 'TOUR_OPENED'
})
}
}
export default connect(mapStateToProps, mapDispatchToProps)(NavBar);
I was thinking of putting this.props.start() inside a function and calling the function from another component.
How do I go about this?
Here is my App.js
export default class App extends Component {
render() {
return (
<Provider store = {store}>
<Routes />
</Provider>
);
}
}
The call for the NavBar is in Routes:
export default class Routes extends Component {
render() {
return (
<Router navBar={TopNavbar}>
<Scene key="root">
...
</Scene>
</Router>
);
}
}

Answer 1

You could pass the function as a prop in the other component, for example in your render function you could do the following:
render() {
return (
<View>
<YourComponent startTutorial={this.props.start}></YourComponent>
</View>
);
}
Then in YourComponent call this.props.startTutorial(); from a button or any event.
** Update
So in your case you can do the following:
export default class App extends Component {
render() {
return (
<Provider store = {store}>
<Routes /*here*/ startTutorial={this.props.start} />
</Provider>
);
}
}
export default class Routes extends Component {
/*here*/
CTopNavbar = ({ children }) => (
<TopNavbar startTutorial={this.props.startTutorial}>
{children}
</TopNavbar>
);
render() {
return (
<Router navBar={/*here*/CTopNavbar}>
<Scene key="root">
...
</Scene>
</Router>
);
}
}
Then in NavBar run this.props.startTutorial(); in your button.