CODEWITHSUNDEEP
javascriptreact-native
mayankmehtani
mayankmehtani

Reputation: 435

How to keep touchable elements pressable when outside parent container

I'm trying to create a dropup menu which is just the opposite of a drop down menu. The object has an 'inactive' state where it is collapsed and an 'active' state where the menu expands upwards (see right picture) showing all options. The touchable opacity elements containing '1x', '2x' however for some reason become unpressable when the menu expands. The menu options contained within the parent view are pressable (intended functionality). I would like for the elements contained outside the parent (bar in main) to also be pressable. For some reason this issue is only there in the android version of the app, the issue isn't there in iOS.

I've tried adjusting z-scores and elevation of these buttons and their respective views but that doesn't seem to work.

Pictures of main page below.

Main.js

class Main extends Component {
    render() {
        return (
            <View style={{flex: 1, flexDirection:'column-reverse', backgroundColor:'black'}}>
                <View style = {styles.bar}>
                    <DropUpMenuTwo />
                </View>
            </View>
        )
    }
}

export default (Main)

const styles = StyleSheet.create({
    bar: {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height * 0.10,
        backgroundColor: 'white',
        flexDirection:'column-reverse'
    }
});

DropUpMenu Code

let data = [{
        value: '1x',
    }, {
        value: '2x',
    }, {
        value: '4x',
    },
    {
        value: '8x',
    },
    {
        value: '10x',
    }
]

export default class DropUpMenuTwo extends Component<{}> {
    constructor(props) {
        super(props)

        var options = []

        for (let i = 0; i < data.length; i++) {
            options.push(

                    <TouchableOpacity style={styles.speedRectangle} onPress={ () => this.handle_press(i,data[i].value)} >

                            <Text>
                                {data[i].value}
                            </Text>

                    </TouchableOpacity>

            )
        }
        this.state = {
            active: false,
            options_shown: options,
            current_selected: options[data.length-1]
        }
    }


    render() {
        return (
            <View>
                {this.state.current_selected}
            </View>
        )
    }
}

Upvotes: 0

Views: 882

Answers (1)

mayankmehtani
mayankmehtani

Reputation: 435

The solution to this was using TouchableOpacity from the 'react-native-gesture-handler' library

Upvotes: 1

Related Questions