Last active
June 7, 2018 07:50
-
-
Save AudyOdi/734b5968385b851cba384f065e44a97a to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import {StyleSheet, Text, View} from 'react-native'; | |
| import {ModalProvider} from './Modal'; | |
| import Main from './Main'; | |
| export default class App extends React.Component { | |
| render() { | |
| return ( | |
| <ModalProvider> | |
| <View style={styles.container}> | |
| <Text>Open up App.js to start working on your app!</Text> | |
| <Main /> | |
| </View> | |
| </ModalProvider> | |
| ); | |
| } | |
| } | |
| const styles = StyleSheet.create({ | |
| container: { | |
| flex: 1, | |
| backgroundColor: '#fff', | |
| justifyContent: 'center', | |
| alignItems: 'center', | |
| }, | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import {View, Button} from 'react-native'; | |
| import {ModalConsumer} from './Modal'; | |
| export default class Main extends React.Component { | |
| render() { | |
| return ( | |
| <ModalConsumer> | |
| {context => { | |
| if (!context) { | |
| return null; | |
| } | |
| let {showModal} = context; | |
| return ( | |
| <View> | |
| <Button | |
| title="Show Modal from right" | |
| onPress={() => { | |
| showModal('right'); | |
| }} | |
| /> | |
| <Button | |
| title="Show Modal from left" | |
| onPress={() => { | |
| showModal('left'); | |
| }} | |
| /> | |
| </View> | |
| ); | |
| }} | |
| </ModalConsumer> | |
| ); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import {View, Button, Text, Animated, Dimensions} from 'react-native'; | |
| let ModalContext = React.createContext(); | |
| let {height: screenHeight, width: screenWidth} = Dimensions.get('window'); | |
| class ModalProvider extends React.Component { | |
| state = { | |
| isOpen: false, | |
| slide: 'left', | |
| }; | |
| _animatedValue = new Animated.Value(0); | |
| render() { | |
| let {slide} = this.state; | |
| let left = 0; | |
| if (slide === 'left') { | |
| left = this._animatedValue.interpolate({ | |
| inputRange: [0, 1], | |
| outputRange: [-screenWidth, 0], | |
| }); | |
| } else if (slide === 'right') { | |
| left = this._animatedValue.interpolate({ | |
| inputRange: [0, 1], | |
| outputRange: [screenWidth, 0], | |
| }); | |
| } | |
| return ( | |
| <ModalContext.Provider | |
| value={{ | |
| showModal: (slide: 'left' | 'right') => { | |
| this.setState({isOpen: true, slide}, () => { | |
| Animated.spring(this._animatedValue, { | |
| toValue: 1, | |
| tension: 50, | |
| }).start(); | |
| }); | |
| }, | |
| }} | |
| > | |
| {this.props.children} | |
| {this.state.isOpen && ( | |
| <Animated.View | |
| style={{ | |
| position: 'absolute', | |
| width: '100%', | |
| height: '100%', | |
| backgroundColor: 'grey', | |
| justifyContent: 'center', | |
| alignItems: 'center', | |
| top: 0, | |
| left, | |
| }} | |
| > | |
| <Text>ini modal</Text> | |
| <Button | |
| title="Close" | |
| onPress={() => { | |
| Animated.spring(this._animatedValue, { | |
| toValue: 0, | |
| tension: 50, | |
| }).start(() => { | |
| this.setState({ | |
| isOpen: false, | |
| }); | |
| }); | |
| }} | |
| /> | |
| </Animated.View> | |
| )} | |
| </ModalContext.Provider> | |
| ); | |
| } | |
| } | |
| let ModalConsumer = ModalContext.Consumer; | |
| export {ModalConsumer, ModalProvider}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment