CODEWITHSUNDEEP
react-nativetouchableopacityonpress
Mithun Adhikari
Mithun Adhikari

Reputation: 569

React native TouchableOpacity onPress event not working calling from other class

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;

Upvotes: 0

Views: 1486

Answers (1)

Maulana Prambadi
Maulana Prambadi

Reputation: 1043

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>
  );
}

Upvotes: 1

Related Questions