Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**
- * Demostrate how the positioning of a fullscreen modal on Android tablet's can go wrong
- */
- import React, { Component } from 'react';
- import {
- AppRegistry,
- StyleSheet,
- Modal,
- Text,
- TouchableHighlight,
- TouchableWithoutFeedback,
- View
- } from 'react-native';
- class ModalProblem extends Component {
- constructor(props) {
- super(props);
- this.state = {
- modal: false,
- }
- }
- render() {
- return (
- <View style={styles.container}>
- <Text style={styles.welcome}>
- Welcome to React Native!
- </Text>
- <Text style={styles.instructions}>
- To get started, edit index.android.js
- </Text>
- <Text style={styles.instructions}>
- Double tap R on your keyboard to reload,{'\n'}
- Shake or press menu button for dev menu
- </Text>
- <TouchableHighlight
- onPress={() => {
- this.setState({
- modal: true,
- });
- }}
- >
- <View style={{ backgroundColor: 'red', padding: 10, borderRadius: 2 }}>
- <Text style={{ color: 'white' }}>open modal</Text>
- </View>
- </TouchableHighlight>
- <Modal
- visible={this.state.modal}
- transparent
- onRequestClose={() => {
- this.setState({
- modal: false,
- });
- }}
- >
- <TouchableWithoutFeedback
- onPress={() => {
- this.setState({
- modal: false,
- });
- }}
- >
- {/* Full screen dark transparent modal */}
- <View style={{ backgroundColor: '#000', opacity: 0.7, left: 0, top: 0, right: 0, bottom: 0, position: 'absolute' }} />
- </TouchableWithoutFeedback>
- </Modal>
- </View>
- );
- }
- }
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- backgroundColor: '#F5FCFF',
- },
- welcome: {
- fontSize: 20,
- textAlign: 'center',
- margin: 10,
- },
- instructions: {
- textAlign: 'center',
- color: '#333333',
- marginBottom: 5,
- },
- });
- AppRegistry.registerComponent('ModalProblem', () => ModalProblem);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement