Skip to content

TouchableHighlight goes right through the tooltip #5

@cablegunmaster

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions