Pressable with custom icon onPress not working

366 Views Asked by At

I'm a React Native newbie and I'm trying to assess the viability of porting to Android a React Native app that was originally written (not by me...) with iOS in mind.

At the moment I'm not trying to have code that will easily generate both Android and iOS bundles, just having the Android app working properly, with whatever alteration needed. We are using React Native 0.65.3

After setting up the Android environment, I'm compiling it on a MacBook Pro M1 with this command:

npx react-native bundle --entry-file ./index.js --platform android --dev false --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

The app has several custom buttons, all working properly on iOS. But several are not firing the onPress event on Android...this is the generic MyIconButton code that all the buttons implement:

import React from 'react';
import { View, Pressable, StyleSheet } from 'react-native';

import { MyIcon } from './MyIcon';
import { Theme } from 'styles';

interface MyIconButtonProps {
    onPress: () => void;
    icon: string;
    iconProps?: { [x: string]: any };
    disable?: boolean;
    testID?: string;
}

export const MyIconButton: React.FC<MyIconButtonProps> = ({
    onPress,
    icon,
    iconProps,
    disable,
    testID,
}) => {
    const buttonStyle = {
        ...styles.button,
        opacity: disable ? 0.5 : 1.5,
    };

    return (
        <View testID={testID}>
            <Pressable style={buttonStyle} onPress={onPress} disabled={disable}>
                <MyIcon name={icon} fill="currentColor" {...iconProps} />
            </Pressable>
        </View>
    );
};

const { Spacing } = Theme;

const styles = StyleSheet.create({
    button: { padding: Spacing.x4 },
});

And here is a working button:

        <View style={{ zIndex: 5 }}>
            <MyIconButton
                onPress={onPress}
                icon="Hangup"
                iconProps={{ fill: Colors.red, width: 31, height: 31 }}
            />
        </View>

The following won't fire the onPress event:

            <View style={styles.container}>
                <MyIconButton
                    icon="Microphone"
                    iconProps={{
                        fill: this.props.isMicRecording
                            ? '#E51235'
                            : 'rgba(255, 255, 255, 0.5)',
                        width: 30,
                        height: 30,
                    }}
                    onPress={() =>
                        this.props.isMicRecording
                            ? this.stopRecognizing()
                            : this.startRecognizing()
                    }
                    disable={this.props.disabled}
                />
            </View>

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: '100%',
        alignItems: 'center',
        justifyContent: 'center',
        position: 'relative',
    },
});

This one too won't fire the event:

            <MyIconButton
                onPress={() => 
                    this.changeVol(volume !== 0 ? 0 : 0.5)
                }
                icon="Mute"
                iconProps={{
                    fill: volume !== 0 ? Rgba.white.x5 : Colors.blue,
                    height: 24,
                    width: 24,
                }}
            />

The only notable difference I can spot is the "zIndex: 5" in the View encapsulating the button...but I did try to add the zIndex property with no improvement...

Thank you all for any idea of what is going wrong here!

0

There are 0 best solutions below