React native TouchableOpacity onPress event not working calling from other class

Question

What I wanted to do was create a TouchableOpacity once and use it everywhere in my program. I countered a problem when handling the press event. I imported the TouchableOpacity in other class and wanted to handle the onPress event there. But my code is not working.There is no problem with import as well. Here is my class importing the TouchableOpacity component

import React, {Component} from 'react';
import {Text,View,Alert} from 'react-native';
import MyButton from './MyButton';

class FrontPage extends Component{
 OnPressNextButton=()=> {
   Alert.alert('You tapped the next button');
 }
 OnPressBackButton=()=> {
  Alert.alert('You tapped the back button');
}
  render(){
    return(
      <View style={styles.viewStyle}>
          <View >
            <MyButton  buttonText="Back" onPress={this.OnPressBackButton} />
            </View>
            <View style={styles.marginStyle}>
              <MyButton  buttonText="Next" onPress={this.OnPressNextButton} />
          </View>
        </View>
    );

  }
}const styles={
  viewStyle:{
    flexDirection:'row',
    borderWidth:1,
    borderBottomWidth:0,
    borderRadius:2,
    borderColor:'#ddd',
    shadowColor:'#000',
    shadowOffset:{width:0, height:2},
    shadowOpacity:0.2,
    marginLeft:5,
    marginRight:5,
    marginTop:5,
    elevation:1,
    position:'relative'
  },marginStyle:{
    marginLeft:128
  }
};
export default FrontPage;

and the TouchableOpacity component is created as

import React,{Component} from 'react';
import {Text,View,TouchableOpacity} from 'react-native';
const MyButton=(props)=>{

  return(
    <TouchableOpacity style={styles.buttonStyle} >
      <Text style={styles.textStyle}>
        {props.buttonText}
      </Text>
    </TouchableOpacity>
  );
}
const styles={
  buttonStyle:{
    width:100,
    height:50,
    borderWidth:1,
    alignItems:'center',
    borderRadius:5,
    backgroundColor:'#fff',
    borderColor:'#007aff',
    shadowOpacity:0.8,
    marginLeft:5,
    marginRight:5,
    marginTop:455,
    position:'relative'
  },
  textStyle:{
    color:'#00f',
    borderColor:'#007aff',
    fontSize:20,
    paddingTop:10,
    paddingBottom:10,
    fontWeight:'600'
  }
};
export default MyButton;

Answer 1

You should pass props to onPress action in your TouchableOpacity component in this code i put the same name onPress callback in the FrontPage component you can change the name onPress callback in this component with you name you want

This should be in your FrontPage Component

return(
  <View style={styles.viewStyle}>
      <View >
        <MyButton  buttonText="Back" onPress={this.OnPressBackButton} />
        </View>
        <View style={styles.marginStyle}>
          <MyButton  buttonText="Next" onPress={this.OnPressNextButton} />
      </View>
    </View>
);

this is should be your TouchableOpacity component

const MyButton=({ onPress })=>{

  return(
    <TouchableOpacity style={styles.buttonStyle} onPress={onPress}>
      <Text style={styles.textStyle}>
        {props.buttonText}
      </Text>
    </TouchableOpacity>
  );
}