This repository has been archived by the owner on Feb 25, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 196
/
TransparentStack.js
100 lines (95 loc) · 2.34 KB
/
TransparentStack.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import React from 'react';
import { Animated, Button, Easing, View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';
class ListScreen extends React.Component {
render() {
return (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
}}
>
<Text>List Screen</Text>
<Text>A list may go here</Text>
<Button
title="Open Dialog"
onPress={() => this.props.navigation.navigate('ModalDialog')}
/>
<Button
title="Go back to all examples"
onPress={() => this.props.navigation.navigate('Home')}
/>
</View>
);
}
}
class ModalDialogScreen extends React.Component {
render() {
return (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
}}
>
<View
style={{
backgroundColor: 'white',
padding: 16,
width: '90%',
maxWidth: 500,
minHeight: 300,
borderRadius: 6,
elevation: 6,
shadowColor: 'black',
shadowOpacity: 0.15,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 10,
}}
>
<Text style={{ flex: 1, fontSize: 16 }}>Dialog</Text>
<Button
title="Close"
onPress={() => this.props.navigation.goBack()}
/>
</View>
</View>
);
}
}
export default createStackNavigator(
{
List: ListScreen,
ModalDialog: ModalDialogScreen,
},
{
initialRouteName: 'List',
transparentCard: true,
mode: 'modal',
headerMode: 'none',
navigationOptions: {
gesturesEnabled: false,
},
transitionConfig: () => ({
transitionSpec: {
duration: 300,
easing: Easing.inOut(Easing.ease),
timing: Animated.timing,
},
screenInterpolator: sceneProps => {
const { position, scene } = sceneProps;
const { index } = scene;
const opacity = position.interpolate({
inputRange: [index - 1, index],
outputRange: [0, 1],
});
return { opacity };
},
}),
}
);