Tukukkk

I've written a React Native app, iOS was the priority so I built that first. It's in the App Store and works perfectly, however I've just started working on Android and although everything appears to be working correctly except for touch events, which are not firing at all.

None of the touchable elements are calling the onPress callback, nor is the Button element. I've even tried stripping the app down completely, removing the navigator, and adding a load of touchable elements to the initial screen but still none of the onPress callbacks are firing.

Below is the code for the initial screen of my app, though I doubt any of this code is causing the issue:

// @flow

import React, { type Element } from 'react';

import { View, Text, Image, TouchableOpacity } from 'react-native';

import type { NavigatorScreenProps } from 'react-navigation';

import i18n from '../../i18n';

import style from './style';



type Props = {

  navigation: NavigatorScreenProps

}



export default function SignIn ({ navigation }: Props): Element<typeof View> {

  return (

    <View style={style.container}>

      <View style={style.top}>

        <Image source={require('../../assets/images/purpleWithTransparentBackground.png')} style={style.logo} />

      </View>

      <View style={style.bottom}>

        <TouchableOpacity activeOpacity={0.97} onPressIn={() => console.log('in')} onPressOut={() => console.log('out')} onPress={() => { console.log('do something!'); navigation.navigate('EnterEmail'); }} style={[style.submit, { zIndex: 99999, elevation: 99999 }]}>

          <Text style={style.submitText}>

            {i18n.t('SIGN_IN')}

          </Text>

        </TouchableOpacity>

      </View>

      <Image source={require('../../assets/images/cityscapeGrey.png')} style={style.cityscape} />

    </View>

  );

}

Component styles:

import { StyleSheet, Dimensions } from 'react-native';

import defaultStyles from '../../style';



const { width: screenWidth } = Dimensions.get('window');



export default StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: defaultStyles.white

  },



  top: {

    flex: 1,

    justifyContent: 'flex-end',

    alignItems: 'center',

    width: '100%'

  },



  bottom: {

    flex: 1,

    width: '100%'

  },



  animatedContainer: {

    flex: 1,

    alignItems: 'center',

    justifyContent: 'center',

    width: '100%'

  },



  postcode: {

    padding: 12,

    height: 50,

    backgroundColor: 'white',

    width: '100%',

    borderRadius: 5,

    fontSize: 17

  },



  text: {

    width: 296,

    height: 44,

    fontFamily: 'SFProText-Light',

    fontSize: 16,

    fontWeight: '500',

    fontStyle: 'normal',

    lineHeight: 22,

    letterSpacing: 0,

    textAlign: 'center',

    color: defaultStyles.balticSea

  },



  logo: {

    marginBottom: 14

  },



  error: {

    color: defaultStyles.brickRed,

    marginVertical: 12,

    width: '100%',

    textAlign: 'center'

  },



  submit: {

    width: 311,

    height: 56,

    borderRadius: 4,

    backgroundColor: defaultStyles.mountainMeadow,

    justifyContent: 'center',

    alignItems: 'center',

    alignSelf: 'center',

    marginTop: 30

  },



  submitText: {

    width: 311,

    height: 21,

    fontFamily: 'SFProDisplay-Heavy',

    fontSize: 18,

    fontWeight: 'bold',

    fontStyle: 'normal',

    letterSpacing: 0,

    textAlign: 'center',

    color: defaultStyles.white

  },



  highlight: {

    color: defaultStyles.mountainMeadow

  },



  cityscape: {

    position: 'absolute',

    left: 0,

    bottom: 0,

    width: screenWidth,

    resizeMode: 'repeat'

  }

});

Thanks in advance for any help.

You need to give height and width to TouchableOpacity

            <TouchableOpacity

                activeOpacity={0.97} 

                onPressIn={() => console.log('in')} 

                onPressOut={() => console.log('out')} 

                onPress={() => { console.log('do something!'); navigation.navigate('EnterEmail'); }} 

                style={[style.submit, { zIndex: 99999, elevation: 99999, height:200, width:200 }]}>

                <Text style={style.submitText}>

                    {i18n.t('SIGN_IN')}

                </Text>

            </TouchableOpacity>

I just added 200 for both for testing.

Working code from Android:

<View style={{
flex: 1,
backgroundColor: 'red'
}}>
<View style={style.container}>
<View style={style.top}>
</View>
<View style={style.bottom}>
<TouchableOpacity activeOpacity={0.97} onPressIn={() => alert('in')} onPressOut={() => alert('out')} onPress={() => { alert('do something!'); }} style={[style.submit, { zIndex: 99999, elevation: 99999 }]}>
<Text style={style.submitText}>
GENERAL TEXT
</Text>
</TouchableOpacity>
</View>
</View>
</View>

I found the cause of the problem.

Short answer:

I have a component in the root of my app that was creating an invisible overlay. This happened because display: 'none' and position: 'absolute' don't work if applied to the same element on Android.

Long answer:

In my root component I have a menu that comes up from the bottom of the screen called OptionsMenu:

export default function App (): Element<typeof Provider> {

  return (

    <Provider store={store}>

      <ActionSheetProvider>

        <OptionsMenuContext.Provider>

          <>

            <Navigation uriPrefix={DEEP_LINK_URI_PREFIX} ref={setNavigator} />

            <Notification />

            <OptionsMenu />

          </>

        </OptionsMenuContext.Provider>

      </ActionSheetProvider>

    </Provider>

  );

}

Inside OptionsMenu there is an overlay that covers the screen, this is so we can dim everything when the menu appears. The overlay (the outermost Animated.View) has position: 'absolute' as well as display: 'none'. The display setting comes from a prop and the position comes from style.container:

function OptionsMenu ({ hideOptionsMenu, overlayDisplay, overlayOpacity, containerPositionBottom, options =  }: Props): Element<typeof Animated.View> {

  return (

    <Animated.View style={[style.container, { display: overlayDisplay }]}>

      <TouchableWithoutFeedback onPress={hideOptionsMenu}>

        <Animated.View style={[style.overlay, { opacity: overlayOpacity }]} />

      </TouchableWithoutFeedback>

      <Animated.View style={[style.optionsContainer, { bottom: containerPositionBottom }]}>

        {options.map(({ icon, text, onPress, type, component: Component }: Option) => !Component

          ? (

            <TouchableOpacity activeOpacity={0.97} key={text} disabled={!onPress} onPress={onPress} style={style.optionContainer}>

              {!!icon && (

                <Image source={icon} style={[style.optionIcon, optionTypeTintMap[type]]} />

              )}

              <Text style={[style.optionText, optionTypeColorMap[type || 'neutralColor']]}>

                {text}

              </Text>

            </TouchableOpacity>

          ) : (

            <Component key={text} />

          ))}

      </Animated.View>

    </Animated.View>

  );

}



export default withOptionsContext(OptionsMenu);

The problem was that on Android the absolute positioning will override the display setting. So the solution was to wrap an absolute positioned component inside a component which controlled the display setting:

OptionsMenu/style.js:

export default StyleSheet.create({

  container: {

    flex: 1,

    // Removed these:

    // position: 'absolute',

    // left: 0,

    // bottom: 0,

    // width: screenWidth,

    // height: screenHeight,

    // zIndex: 19,

    // elevation: 19

  },



  // Moved styles to new property:

  overlayContainer: {

    flex: 1,

    position: 'absolute',

    left: 0,

    bottom: 0,

    width: screenWidth,

    height: screenHeight,

    zIndex: 19,

    elevation: 19

  },

OptionsMenu/OptionsMenu.js:

function OptionsMenu ({ hideOptionsMenu, overlayDisplay, overlayOpacity, containerPositionBottom, options =  }: Props): Element<typeof Animated.View> {

  return (

    // Added new <View /> to control display setting separately:

    <View style={[style.container, { display: overlayDisplay }]}>

      <Animated.View style={style.overlayContainer}>