Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TouchableHighlight goes right through the tooltip #5

Open
cablegunmaster opened this issue Apr 13, 2016 · 3 comments
Open

TouchableHighlight goes right through the tooltip #5

cablegunmaster opened this issue Apr 13, 2016 · 3 comments

Comments

@cablegunmaster
Copy link

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
Copy link
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

@khanhdd83
Copy link

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

@lwhiteley
Copy link
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
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants