10

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.

2
  • Any way you can post the values of the this.props.size? Also, is there a specific reason you are using position: absolute? Thanks. Dec 10, 2015 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. <MyActionButton size={20} />
    – kitta
    Dec 14, 2015 at 7:07

5 Answers 5

44

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>
2
  • 1
    I could have wasted days debugging, thank you for the component ordering part :) Nov 23, 2017 at 19:15
  • Wow. Thank you very much. This solution of positioning it last worked for me 💃 worked for me Dec 31, 2020 at 3:57
6

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

0
3

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

1
  • Just what style information got this to work for you? Apr 14, 2020 at 14:28
2

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";
0

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:

  1. Remove all the styling
  2. Create fresh component without styling
  3. Make sure it is working without styling
  4. Then state adding your styling

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.