TouchableOpacity button is not working with absolute position + transform animation

Description

I am trying to implement a Floating action button using React-Native. I was able to implement this in iOS, But when it comes to android it’s not working. The issue is I cannot press the button. I know that position:'absolute' is not working very well in Android.

React Native version:

Run react-native info in your terminal and copy the results here. System: OS: macOS Mojave 10.14.6 CPU: (4) x64 Intel® Core™ i5-4278U CPU @ 2.60GHz Memory: 26.49 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 10.16.2 - /usr/local/bin/node Yarn: 1.10.1 - /usr/local/bin/yarn npm: 6.9.0 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.7.5 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1 Android SDK: Not Found IDEs: Android Studio: Not Found Xcode: 11.2.1/11B500 - /usr/bin/xcodebuild

npmPackages: @react-native-community/cli: Not Found react: 16.11.0 => 16.11.0 react-native: 0.62.1 => 0.62.1

Expected Results

I want to show an Alert message in Android when user clicks on the button

Snack, code example, screenshot, or link to a repository:

snack Link : https://snack.expo.io/z88E3rOGm

import React, { useState } from 'react';
import {
    View,
    Text,
    TouchableWithoutFeedback,
    Animated,
    Image,
    StyleSheet,
    Alert,
    TouchableOpacity,
} from 'react-native';

const DrinksFAB = () => {
    const [animation] = useState(new Animated.Value(0));

    const labelPositionInterploate = animation.interpolate({
        inputRange: [0, 1],
        outputRange: [-30, -70],
    });

    const opacityInterpolate = animation.interpolate({
        inputRange: [0, 0.8, 1],
        outputRange: [0, 0, 8],
    });

    const labelStyle = {
        opacity: opacityInterpolate,
        transform: [
            {
                translateX: labelPositionInterploate,
            },
        ],
    };

    let _open = 0;
    const toggleOpen = () => {
        const toValue = _open ? 0 : 1;

        Animated.timing(animation, {
            useNativeDriver: true,
            toValue: toValue,
            duration: 200,
        }).start();
        _open = !_open;
    };
    let range = 0;
    return (
        <>
            {[1,2].map((i) => {
                range = -70 + range;
                return (
                    <TouchableOpacity
                        style={[styles.button]}
                        onPress={() => {
                            Alert.alert('hey');
                            //Alert.alert('hey');
                        }}
                    >
                        <>
                            <Animated.View
                                style={[
                                    styles.button,
                                    styles.other,
                                    {
                                        transform: [
                                            {
                                                scale: animation,
                                            },
                                            {
                                                translateY: animation.interpolate(
                                                    {
                                                        inputRange: [0, 1],
                                                        outputRange: [0, range],
                                                    },
                                                ),
                                            },
                                        ],
                                    },
                                ]}
                            >
                                <Animated.Text
                                    style={[styles.label, labelStyle]}
                                >
                                    Coffee
                                </Animated.Text>
                            </Animated.View>
                        </>
                    </TouchableOpacity>
                );
            })}

            <TouchableOpacity
                onPress={toggleOpen}
                style={[
                    styles.button,
                    styles.pay,
                ]}
            >
               
                <Text>Pay</Text>
            </TouchableOpacity>
        </>
    );
};

export default DrinksFAB;

const styles = StyleSheet.create({
    button: {
        width: 60,
        height: 60,
        alignItems: 'center',
        justifyContent: 'center',
        shadowColor: '#333',
        shadowOpacity: 0.1,
        shadowOffset: { x: 2, y: 0 },
        shadowRadius: 2,
        borderRadius: 30,
        position: 'absolute',
        bottom: 20,
        right: 20,
        backgroundColor: '#ffff',
    },
    pay: {
        backgroundColor: '#00B15E',
    },
    other: {
        bottom: 5,
        right: 0,
        backgroundColor: '#e2e2e2',
    },
    label: {
        flex: 1,
        flexWrap: 'nowrap',
        color: '#000',
        position: 'absolute',
        fontSize: 14,
    },
});

[niubajr19]

You can just set zIndex:1 in the parent container. Automaticaly, the children containers will be able to be click.

[Aashu-Dubey]

I’m having exact same problem with react-native version 0.61.5 I had to use TouchableNativeFeedback as a workaround for android.