beefe / react-native-popup

popup for react-native
169 stars 41 forks source link

TouchableHighlight goes right through the tooltip #5

Open cablegunmaster opened 8 years ago

cablegunmaster commented 8 years ago

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.

lwhiteley commented 8 years ago

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

khanhdd83 commented 8 years ago

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

lwhiteley commented 8 years ago

@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