Skip to content

TouchableHighlight goes right through the tooltip #5

Open

Description

@cablegunmaster

I got it working but the tooltip centers itself right below my button.
Which makes the button unseeable, and the text unreadable.

Layered: Normal screen everything except 1 thing becomes grey.
The tooltip gets layered ontop of everything EXCEPT the TouchableHighlight button.
which shines above everything else.

import React,{
    Component,
    StyleSheet,
    Text,
    TextInput,
    View,
    TouchableHighlight
} from 'react-native';
import Popup from 'react-native-popup';

export default class SomeClass extends Component {

    onPressFunction() {
        this.popup.tip({
            content: 'come on!'
        });
    }

render() {
           <View style={styles.container}>
                    <Popup ref={(popup) => { this.popup = popup }}/>
                    <TouchableHighlight style={styles.FunctionBodyButton} >
                        <Text style={styles.FunctiondBodyButtonText} onPress={this.onPressFunction.bind(this)}>
                            Do something in the middle of my screen                        
                     </Text>
                    </TouchableHighlight>
        </View>
}

}

const styles = StyleSheet.create({
    FunctionBodyButton: {
        padding: 10,
        marginTop: 50,
        borderRadius: 25,
        backgroundColor: '#1fa345'
    },
    FunctionBodyButtonText: {
        fontSize: 18,
        color: 'white',
        textAlign: 'center'
    }
});

Also : TouchableNativeFeedback seems to suffer the same fate.
Specs:
react-native: 0.23.1
react-native-popup: 0.5.2

The idea is really good , but right now if I wanna use the tooltip like its in the overlay state.

Activity

  1. lwhiteley commented on Jul 11, 2016

    @lwhiteley
    Contributor

    didn't test this but i know React native enforces z-index based on the order you define the components

    you should try putting the Popup as the last component within the view tag after the TouchableHighlight

  2. khanhdd83 commented on Aug 11, 2016

    @khanhdd83

    undefined is not an object (evaluating 'this.popup.confirm') in sub module?

  3. lwhiteley commented on Aug 12, 2016

    @lwhiteley
    Contributor

    @khanhdd83 you should post yours in a new issue with better context on what you have done so someone can attempt to solve it.. similar to the main body of this post

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions