React Native, TouchableOpacity wrapping floating button get nothing

Question

I'm creating a simple action button (floating button)

This is working :

<View style={{
    width: this.props.size,
    height: this.props.size,
    borderRadius: this.props.size / 2,
    backgroundColor: '#ee6e73',
    position: 'absolute',
    bottom: 10,
    right: 10,
    flexDirection:'row'
}}>
    <Text>
        +
    </Text>
</View>

This is not :

<TouchableOpacity
        onPress={()=>{
        }} >
    <View style={{
        width: this.props.size,
        height: this.props.size,
        borderRadius: this.props.size / 2,
        backgroundColor: '#ee6e73',
        position: 'absolute',
        bottom: 10,
        right: 10,
        flexDirection:'row'
    }}>
        <Text>
            +
        </Text>
    </View>
</TouchableOpacity>

Just wrap with TouchableOpacity then my button not show up without any errors.

React 0.1.7, Android

Then I try move styling from View to TouchableOpacity, It's work

<TouchableOpacity
        onPress={()=>{
        }} 
        style={{
            width: this.props.size,
            height: this.props.size,
            position: 'absolute',
            borderRadius: this.props.size / 2,
            backgroundColor: '#ee6e73',
            bottom: 10,
            right: 10,
        }}>
    <Text>
        +
    </Text>
</TouchableOpacity>

Can any one explain me why?

React Native docs said

[https://facebook.github.io/react-native/docs/touchableopacity.html][1]

A wrapper for making views respond properly to touches. This is done without actually changing the view hierarchy, and in general is easy to add to an app without weird side-effects.

This mean I wrap my original view and it would work as I expected, But it's not.

Any way you can post the values of the this.props.size? Also, is there a specific reason you are using position: absolute? Thanks. — Nader Dabit, Dec 10 '15 at 22:15
Yeah, I using position: absolute for floating a button in front of the others. this.props.size is for set the size of this button. It's a Number. e.g. — kitta, Dec 14 '15 at 07:07

score 44 · Accepted Answer · edited May 15 '20 at 18:49

From my experience, TouchableOpacity does not work well with absolute positioning. Perhaps if you remove that, the onPress will work again.

Also please note that it is EXTREMELY important what element you render first and what you render last.

For example, if you do:

<View>
    <TouchableOpacity style={{position:'absolute'}} onPress={()=> 
           {console.log("It works or not?")}}>
   </TouchableOpacity>
    <Text style={styles.aStyle}>
        Some text bla bla......
    </Text>
</View>

There is a pretty good chance that the Text will be rendered on top of the TouchableOpacity, therefore you won't be able to get the onPress working.

Then since the position is absolute, all you have to do is render it as the last child of the View:

<View>
    <Text style={styles.aStyle}>
        Some text bla bla
    </Text>
    <TouchableOpacity style={{position:'absolute'}} onPress={()=> 
       {console.log("It works or not?")}}>
   </TouchableOpacity>
</View>

I could have wasted days debugging, thank you for the component ordering part :) — Mauricio Pasquier Juan, Nov 23 '17 at 19:15
Wow. Thank you very much. This solution of positioning it last worked for me worked for me — Proff Mushiana Mulweli, Dec 31 '20 at 03:57

score 6 · Answer 2 · answered Oct 24 '19 at 16:49

6

I know this is old but I had this issue and nothing above worked until adding flex: 1 to my TouchableOpacity.

answered Oct 24 '19 at 16:49

Thingamajig

4,107
7
33
61

score 3 · Answer 3 · answered Jun 04 '16 at 04:26

3

TouchableOpacity does not assume the style of the view it is the parent of. You need provide it style information.

answered Jun 04 '16 at 04:26

Hamicorn Fury

751
6
8

Just _what_ style information got this to work for you? – Alex McCabe Apr 14 '20 at 14:28

score 2 · Answer 4 · answered Apr 22 '22 at 01:01

Incase anyone else stumbles across this, and none of these suggestions work my fix was to instead import TouchableOpacity from react-native instead of react-native-gesture-handler

So

import { TouchableOpacity } from "react-native";

Instead of

import { TouchableOpacity } from "react-native-gesture-handler";

score 0 · Answer 5 · answered Mar 24 '22 at 11:13

I had a similar issue after a lot of debugging I found out that negative margin was the problem.

Beware of negative margin when using TouchableOpacity

Debugging step:

Remove all the styling
Create fresh component without styling
Make sure it is working without styling
Then state adding your styling

React Native, TouchableOpacity wrapping floating button get nothing

5 Answers5

Linked