0

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!

mj4318
  • 31
  • 3
  • Where is the MyIconButton code? is that the one that implements pressable in it? – VinodA Feb 05 '23 at 04:49
  • What about disable, sure that it is not set on the latter? – user18309290 Feb 05 '23 at 05:18
  • @VinodA yes, the MyIconButton code is the one implementing the Pressable nested in the view – mj4318 Feb 05 '23 at 05:33
  • @user18309290 there are several buttons extending MyIconButton that are not working properly and only one has the "disable" property. Besides, when running the app the buttons are clearly enabled, because their color change between "enable" and "disable" state – mj4318 Feb 05 '23 at 05:35
  • Check this link as the reference to this issue;- https://stackoverflow.com/questions/41651732/react-native-onpress-not-working – ekibet Feb 05 '23 at 05:47
  • Could you [edit](https://stackoverflow.com/posts/75350163/edit) the question and share the whole `MyIconButton` component? – RubenSmn Feb 05 '23 at 14:08
  • Did you try wrapping the functions into brackets `{}`. So something like: `onPress={() =>{ this.props.isMicRecording ? this.stopRecognizing() : this.startRecognizing() } }` – RubenSmn Feb 05 '23 at 19:45
  • @RubenSmn I just did, following your suggestion. Unfortunately no change...what is really interesting is that, for instance, the button controlling the volume will change the icon's color when I press the physical volume buttons and for instance set it to 0 (this is the expected behavior). So it's not that the whole component is broken...it's just the clicking that doesn't work.... – mj4318 Feb 05 '23 at 22:57
  • 1
    @RubenSmn turns out, the issue is with a style...the buttons that are not working are wrapped inside a View and container is defined as const styles = StyleSheet.create({ container: { ...Layout.overlay, top: 'auto', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'stretch', }, box: { ...Flexbox.centerXY, flex: 1, }, }); – mj4318 Feb 07 '23 at 14:25
  • Layout.overlay is defined as: const Layout = StyleSheet.create({ overlay: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, }, }); By commenting out ...Layout.overlay the buttons finally work, but of course are misplaced in the screen...I'm going to focus on that... – mj4318 Feb 07 '23 at 14:27

0 Answers0