-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
127 lines (120 loc) · 2.91 KB
/
App.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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
InteractionManager
} from 'react-native';
import { SharedElementRenderer } from 'react-native-motion';
import List from './src/screens/List/List';
import Detail from './src/screens/Detail/Detail';
import ToolbarBackground from './src/screens/Detail/ToolbarBackground';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {
selectedItem: null,
// phase of animation
// phase-0:
// default
//
// phase-1:
// hide list toolbar, hide list bottom bar, show toolbar background and move item
//
// phase-2:
// show detail toolbar, show detail bottom bar, show details of item
//
// phase-3
// hide details of item
//
// phase-4
// hide detail toolbar, hide detail bootom bar, move item back to scrool view
phase: 'phase-0',
};
}
onItemPressed = item => {
this.setState({
phase: 'phase-1',
selectedItem: item,
});
};
onBackPressed = () => {
this.setState({
phase: 'phase-3',
});
};
onSharedElementMovedToDestination = () => {
InteractionManager.runAfterInteractions(() => {
this.setState({
phase: 'phase-2',
});
});
};
onSharedElementMovedToSource = () => {
InteractionManager.runAfterInteractions(() => {
this.setState({
selectedItem: null,
phase: 'phase-0',
});
});
};
renderPage() {
const { selectedItem, position, detailItem, phase } = this.state;
return (
<View style={{ flex: 1 }}>
<List
selectedItem={selectedItem}
onItemPress={this.onItemPressed}
phase={phase}
/>
<Detail
phase={phase}
selectedItem={selectedItem}
onBackPress={this.onBackPressed}
onSharedElementMovedToDestination={
this.onSharedElementMovedToDestination
}
onSharedElementMovedToSource={this.onSharedElementMovedToSource}
/>
</View>
);
}
render() {
const {
selectedItem,
goToDetail,
position,
detailItem,
goBackRequested,
phase,
} = this.state;
return (
<SharedElementRenderer>
<View style={styles.container}>
<ToolbarBackground
isHidden={phase !== 'phase-1' && phase !== 'phase-2'}
/>
{this.renderPage()}
</View>
</SharedElementRenderer>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});