onPress is not working in my project

Expo SDK
1

Hi, hope you will be fine, Actually I am facing some issue in my project which onPress is not working in my project either on button or touchableOpacity. Here is my code:

<Button
                                    title="Continue"
                                    onPress={() => this.onRadioPressed()}
                                />

  onRadioPressed() {
        console.log('Done');
        this.props.navigation.navigate('Jobs');
    }

I also tried to use onPree like onPress={this.onRadioPressed} and onPress={() => this.onRadioPressed.bind(this) but still not working. Please help, thanks!

2

try:
onPress={() => {

           this.onRadioPressed();

          }}
3

Yes I tried but still not working. and if I use onPress={console.log('Something')}, it get’s execute when page loads without any error.

4

are you using TouchableOpacity?

5

<TouchableOpacity onPress={() => {

            this.onRadioPressed();

          }}

       >

            <View >

              <Text >test</Text>

            </View>

          </TouchableOpacity>
6

No, but I also tried using TouchableOpacity instead of Button but not working, here is my code, please take a look:

import React from 'react';
import {
    Text,
    View,
    StyleSheet,
    ProgressBarAndroid,
    TouchableOpacity,
    Button
} from 'react-native';

export default class OrderScreen extends React.Component {
    onRadioPressed() {
        console.log('Done');
        this.props.navigation.navigate('Jobs');
    }
    render() {
        return (
            <View>
                <View style={styles.liveOrders}>
                    <Text style={styles.ordersText}> Live Orders </Text>
                    <Text style={styles.ordersText}>
                        <Text style={styles.goal}>
                            0
                        </Text>
                    </Text>
                </View>
                <View style={{marginTop: 50}}>
                    <View style={styles.liveOrders}>
                        <View style={styles.orderContainer}>
                            <View style={styles.orderNameDiv}>
                                <Text style={styles.orderName}> Med4home Pharmacy </Text>
                            </View>
                            <View style={styles.dFlex}>
                                <View>
                                    <Text style={styles.text}> Price </Text>
                                    <Text style={styles.dabba}> 32 </Text>
                                </View>
                                <View>
                                    <Text style={styles.text}> Time </Text>
                                    <Text style={styles.dabba}> 6:07 </Text>
                                </View>
                            </View>
                            <View>
                                <Text style={styles.orderTxt}>
                                    By accepting this order you accept to abide by all the terms and conditions associated with the delivery.
                                </Text>
                                <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                    <ProgressBarAndroid
                                        styleAttr="Horizontal"
                                        indeterminate={false}
                                        progress={0.7}
                                        color="#2196F3"
                                        style={styles.progressBar}
                                    />
                                </View>
                                <Button
                                    title="Continue"
                                    onPress={() => {
                                        this.onRadioPressed()
                                    }}
                                />
                            </View>
                        </View>
                    </View>
                </View>
            </View>
        );
    }
}; // id = 113b830eel2af54
const styles = StyleSheet.create({
    orderTxt: {
        fontSize: 15,
        color: '#6c757d',
        textAlign: 'center',
        paddingTop: 12,
        paddingBottom: 10
    },
    text: {
        textAlign: 'center',
        color: 'white',
        fontSize: 20,
        textTransform: 'uppercase',
        marginBottom: 5
    },
    dFlex: {
        display: 'flex',
        justifyContent: 'space-around',
        backgroundColor: '#3369ff',
        flexDirection: 'row',
        paddingTop: 20,
        paddingBottom: 20,
        paddingLeft: 15,
        paddingRight: 15,
        borderBottomLeftRadius: 10,
        borderBottomRightRadius: 10
    },
    dabba: {
        color: 'black',
        backgroundColor: 'white',
        width: 150,
        paddingTop: 7,
        paddingBottom: 7,
        textAlign: 'center',
        borderRadius: 30,
        fontSize: 23,
        marginBottom: 30
    },
    liveOrders: {
        display: 'flex',
        height: 100,
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        width: '100%',
        borderRadius: 10
    },
    progressBar: {
        width: '30%',
        marginTop: 0,
        margin: 'auto',
        paddingBottom: 8
    },
    orderName: {
        color: 'white',
        textAlign: 'center',
        fontSize: 27,
        textTransform: 'uppercase',
        paddingTop: 20,
        backgroundColor: '#3369ff',
        borderTopRightRadius: 10,
        borderTopLeftRadius: 10
    },
    ordersText: {
        width: '45%',
        padding: 0,
        fontSize: 20,
        fontWeight: '700',
        letterSpacing: 2,
        backgroundColor: '#3369ff',
        borderColor: '#3369ff',
        textTransform: 'uppercase',
        height: 60,
        textAlign: 'center',
        color: 'white',
        lineHeight: 60
    },
    goal: {
        width: '100%',
        height: 50,
        textAlign: 'center',
        borderRadius: 50,
        backgroundColor: 'white',
        color: 'black',
        padding: 15,
        display: 'flex'
    },
    orderContainer: {
        width: '90%',
        padding: 0,
        fontSize: 20,
        fontWeight: '700',
        borderRadius: 10,
        letterSpacing: 2,
        backgroundColor: '#3369ff',
        textTransform: 'uppercase',
        height: 60,
        textAlign: 'center',
        shadowOffset: {width: 10, height: 10,},
        shadowColor: 'red',
        shadowOpacity: 1.0,
    }
/*    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#3369ff',
        marginTop: 10,
        flexDirection: 'column'
    },
    button: {
        padding: 17,
        backgroundColor: '#3369ff',
        color: 'white',
        borderRadius: 50,
        width: 300,
        textAlign: 'center',
        fontSize: 18,
        letterSpacing: 1,
        textTransform: 'uppercase',
    },
    buttonTwo: {
        padding: 17,
        backgroundColor: '#7f7f7f',
        color: 'white',
        borderRadius: 50,
        width: 300,
        textAlign: 'center',
        fontSize: 18,
        letterSpacing: 1,
        textTransform: 'uppercase',
        marginTop: 60
    }*/
    /*,
    containerFluid: {
        width: '100%',
        paddingRight: 15,
        paddingLeft: 15,
        marginRight: 'auto',
        marginLeft: 'auto'
    },
    row: {
        display: 'flex',
        flexWrap: 'wrap',
        marginRight: -15,
        marginLeft: -15,
    },
    form: {
        backgroundColor: '#3369ff',
        height: 340,
        textAlign: 'center',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-evenly',
        flexDirection: 'column',
        borderRadius: 15
    },
    outForm: {
        display: 'flex',
        width: '100%',
        justifyContent: 'center',
    }*/
});
8 
<Button
 onPress={this.onRadioPressed}
 title="Continue"
/>
9

yes I also tried this.

10

Your code looks fine on snack (anxious tea - Snack) I get the response from the console.

11

Hi, Thanks for your response, I was solved my issue.

12

@hammad6264 I’m intermittently seeing the same issue in my application after trying both the NativeBase and React Native Elements UI kits. How did you fix the issue?

Follow-up edit: My button not pressing issue could be related to this react-native issue: On Android, when debugging, clicking on a clickable does nothing a few times · Issue #29083 · facebook/react-native · GitHub

13

How did you fix the problem? I’m seeing the same issue. I tried putting the onPress on both the TouchableOpacity and the Text component inside the touchable and neither worked for me.

import React from 'react';
import MapView, { Marker, Callout } from 'react-native-maps';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

export default class Map extends React.Component {
   constructor(props) {
      super(props);
   }
   componentDidMount() {

   }

   // THIS FUNCTION ISN'T FIRING IN THE ONPRESS HANDLER OF TEXT OR TOUCHABLE OPACITY
   onButtonPress = () => {
      console.log('view more press in marker of location');
      alert('sflknfa');
   }

   // this works
   onMarkerPress = (e) => {
      console.log('marker press: ', e.nativeEvent);
   }

   render() {
      const markers = this.props.bizArr.slice().map(biz => (
         <Marker key={biz._id} coordinate={biz.coordinates} onPress={this.onMarkerPress} >
            <Callout>
                  <Text>{biz.name}</Text>
                  <TouchableOpacity onPress={() => this.onButtonPress()} >
                     <Text style={{color: 'blue'}} >
                        View Restaurant
                     </Text>
                  </TouchableOpacity>
            </Callout>
         </Marker>
      ));

      return (         
         <MapView 
            onPress={this.props.onPress}
            compassOffset={{x: -10,y: 65}}
            initialRegion={{
               latitude: 5,
               longitude: 20,
               latitudeDelta: 180,
               longitudeDelta: 180,
            }}
            showsUserLocation={true}
            region={this.props.region}
            style={styles.mapStyle}>
                  {/* https://icons8.com/license */}
                  {markers}
            </MapView>
      );
   }
}
14

Hi, in my case I cut my TouchableOpacity from the place where I was using it and paste it outside that View. And it was started working to me. Maybe it was the styling issue in View where I was using it. Try checking your Styles or moving your TouchableOpacity or button outside of that View or try commenting all the code but left TouchableOpacity and see if its work or not, that’s how I was solved it .