45 lines
1.2 KiB
JavaScript
45 lines
1.2 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { Text, Button } from 'react-native';
|
|
import {
|
|
Menu,
|
|
MenuProvider,
|
|
MenuOptions,
|
|
MenuOption,
|
|
MenuTrigger
|
|
} from 'react-native-popup-menu';
|
|
|
|
class CloseOnBackExample extends Component {
|
|
state = {
|
|
customBackHandler: false,
|
|
}
|
|
|
|
customBackHandler = (instance) => {
|
|
alert(`Back button was pressed. Current menu state: ${instance.isMenuOpen() ? 'opened' : 'closed'}`);
|
|
return true;
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<MenuProvider
|
|
style={{flexDirection: 'column', padding: 30}}
|
|
backHandler={this.state.customBackHandler ? this.customBackHandler : true}>
|
|
<Menu>
|
|
<MenuTrigger text='Select option' />
|
|
<MenuOptions>
|
|
<MenuOption value={1} text='One' />
|
|
<MenuOption value={2}>
|
|
<Text style={{color: 'red'}}>Two</Text>
|
|
</MenuOption>
|
|
<MenuOption value={3} disabled={true} text='Three' />
|
|
</MenuOptions>
|
|
</Menu>
|
|
<Button
|
|
title={this.state.customBackHandler ? "Change to default" : "Change to custom"}
|
|
onPress={() => this.setState({ customBackHandler: !this.state.customBackHandler })}/>
|
|
</MenuProvider>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default CloseOnBackExample;
|