Skip to content
This repository was archived by the owner on Apr 15, 2020. It is now read-only.

Commit fb76e82

Browse files
ericvicentiericvicenti
committed
Fix backward shared transitions
1 parent 22ed8c2 commit fb76e82

8 files changed

Lines changed: 435 additions & 470 deletions

File tree

‎.prettierrc.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"trailingComma": "all"
3+
}

‎App.js‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from "react";
22
import { View, Button } from "react-native";
33
import {
44
createSwitchNavigator,
5-
createNavigationContainer
5+
createNavigationContainer,
66
} from "react-navigation";
77
import ExampleA from "./ExampleA";
88
import ExampleB from "./ExampleB";
@@ -33,23 +33,22 @@ const EXAMPLES = {
3333
ExampleC,
3434
ExampleD,
3535
ExampleE,
36-
// ExampleT,
37-
ExampleS
38-
// ExampleZ
36+
ExampleT,
37+
ExampleS,
38+
ExampleZ,
3939
};
4040

4141
const AppNavigator = createSwitchNavigator({
4242
Examples,
43-
...EXAMPLES
43+
...EXAMPLES,
4444
});
4545

46-
// const StatefulAppNavigator = createNavigationContainer(AppNavigator);
46+
const StatefulAppNavigator = createNavigationContainer(AppNavigator);
4747

4848
const App = () => (
4949
<LayoutProvider style={{ flex: 1 }}>
50-
<AppNavigator />
50+
<StatefulAppNavigator />
5151
</LayoutProvider>
5252
);
5353

54-
// export default ExampleZ;
5554
export default App;

‎ExampleA.js‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
Text as UnstyledText,
55
View as UnstyledView
66
} from "react-native";
7-
import { createStackNavigator } from "react-navigation";
7+
import { createNavigator, StackView, StackRouter } from "react-navigation";
88

99
const View = props => (
1010
<UnstyledView style={{ flex: 1, justifyContent: "center" }} {...props} />
@@ -35,10 +35,18 @@ const ProfileScreen = ({ navigation }) => (
3535
</View>
3636
);
3737

38-
const App = createStackNavigator({
39-
HomeScreen,
40-
ProfileScreen
41-
});
38+
const App = createNavigator(
39+
StackView,
40+
StackRouter({
41+
HomeScreen,
42+
ProfileScreen
43+
}),
44+
{
45+
mode: "modal"
46+
}
47+
);
48+
49+
// const App = createNavigationContainer(AppNavigator)
4250

4351
export default App;
4452

‎ExampleC.js‎

Lines changed: 125 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,3 @@
1-
import React from "react";
2-
import {
3-
Button,
4-
Text as UnstyledText,
5-
View as UnstyledView
6-
} from "react-native";
7-
import { createNavigator, StackRouter } from "react-navigation";
8-
import { Transitioner } from "./Transitioner";
9-
import Animated, { Easing } from "react-native-reanimated";
10-
const { Value, timing, interpolate } = Animated;
11-
import FadeTransition from "./FadeTransition";
12-
13-
const View = props => (
14-
<UnstyledView
15-
style={{ flex: 1, justifyContent: "center", backgroundColor: "#eee" }}
16-
{...props}
17-
/>
18-
);
19-
const Text = props => (
20-
<UnstyledText style={{ textAlign: "center" }} {...props} />
21-
);
22-
23-
const HomeScreen = ({ navigation }) => (
24-
<View>
25-
<Text>Home Screen</Text>
26-
<Button
27-
onPress={() => {
28-
navigation.navigate("ProfileScreen", { name: "Jane" });
29-
}}
30-
title="Go to Jane's profile"
31-
/>
32-
<Button
33-
onPress={() => {
34-
navigation.navigate("Examples");
35-
}}
36-
title="Exit"
37-
/>
38-
</View>
39-
);
40-
41-
class ProfileScreen extends React.Component {
42-
static navigationOptions = {
43-
createTransition: transition => ({
44-
...transition,
45-
progress: new Value(0)
46-
}),
47-
runTransition: transition =>
48-
new Promise(resolve => {
49-
timing(transition.progress, {
50-
toValue: 1,
51-
duration: 500,
52-
easing: Easing.inOut(Easing.cubic)
53-
}).start(resolve);
54-
})
55-
};
56-
render() {
57-
const { transition, navigation } = this.props;
58-
const myKey = navigation.state.key;
59-
let opacity = 1;
60-
if (transition) {
61-
const { fromState, toState, progress } = transition;
62-
const fromOpacity = fromState.routes.find(r => r.key === myKey) ? 1 : 0;
63-
const toOpacity = toState.routes.find(r => r.key === myKey) ? 1 : 0;
64-
opacity = interpolate(progress, {
65-
inputRange: [0, 1],
66-
outputRange: [fromOpacity, toOpacity]
67-
});
68-
}
69-
return (
70-
<Animated.View style={{ flex: 1, opacity }}>
71-
<View>
72-
<Text>
73-
{navigation.getParam("name")}
74-
's Profile
75-
</Text>
76-
<Button
77-
onPress={() => navigation.push("HomeScreen")}
78-
title="Go Home"
79-
/>
80-
<Button onPress={() => navigation.goBack()} title="Go Back" />
81-
</View>
82-
</Animated.View>
83-
);
84-
}
85-
}
86-
87-
const App = createNavigator(
88-
Transitioner,
89-
StackRouter({
90-
HomeScreen,
91-
ProfileScreen
92-
})
93-
);
94-
95-
export default App;
96-
971
// import React from "react";
982
// import {
993
// Button,
@@ -102,6 +6,8 @@ export default App;
1026
// } from "react-native";
1037
// import { createNavigator, StackRouter } from "react-navigation";
1048
// import { Transitioner } from "./Transitioner";
9+
// import Animated, { Easing } from "react-native-reanimated";
10+
// const { Value, timing, interpolate } = Animated;
10511
// import FadeTransition from "./FadeTransition";
10612

10713
// const View = props => (
@@ -114,38 +20,54 @@ export default App;
11420
// <UnstyledText style={{ textAlign: "center" }} {...props} />
11521
// );
11622

117-
// class HomeScreen extends React.Component {
118-
// static navigationOptions = FadeTransition.navigationOptions;
119-
// render() {
120-
// const { navigation } = this.props;
121-
// return (
122-
// <FadeTransition {...this.props}>
123-
// <View>
124-
// <Text>Home Screen</Text>
125-
// <Button
126-
// onPress={() => {
127-
// navigation.navigate("ProfileScreen", { name: "Jane" });
128-
// }}
129-
// title="Go to Jane's profile"
130-
// />
131-
// <Button
132-
// onPress={() => {
133-
// navigation.navigate("Examples");
134-
// }}
135-
// title="Exit"
136-
// />
137-
// </View>
138-
// </FadeTransition>
139-
// );
140-
// }
141-
// }
23+
// const HomeScreen = ({ navigation }) => (
24+
// <View>
25+
// <Text>Home Screen</Text>
26+
// <Button
27+
// onPress={() => {
28+
// navigation.navigate("ProfileScreen", { name: "Jane" });
29+
// }}
30+
// title="Go to Jane's profile"
31+
// />
32+
// <Button
33+
// onPress={() => {
34+
// navigation.navigate("Examples");
35+
// }}
36+
// title="Exit"
37+
// />
38+
// </View>
39+
// );
14240

14341
// class ProfileScreen extends React.Component {
144-
// static navigationOptions = FadeTransition.navigationOptions;
42+
// static navigationOptions = {
43+
// createTransition: transition => ({
44+
// ...transition,
45+
// progress: new Value(0)
46+
// }),
47+
// runTransition: transition =>
48+
// new Promise(resolve => {
49+
// timing(transition.progress, {
50+
// toValue: 1,
51+
// duration: 500,
52+
// easing: Easing.inOut(Easing.cubic)
53+
// }).start(resolve);
54+
// })
55+
// };
14556
// render() {
146-
// const { navigation } = this.props;
57+
// const { transition, navigation } = this.props;
58+
// const myKey = navigation.state.key;
59+
// let opacity = 1;
60+
// if (transition) {
61+
// const { fromState, toState, progress } = transition;
62+
// const fromOpacity = fromState.routes.find(r => r.key === myKey) ? 1 : 0;
63+
// const toOpacity = toState.routes.find(r => r.key === myKey) ? 1 : 0;
64+
// opacity = interpolate(progress, {
65+
// inputRange: [0, 1],
66+
// outputRange: [fromOpacity, toOpacity]
67+
// });
68+
// }
14769
// return (
148-
// <FadeTransition {...this.props}>
70+
// <Animated.View style={{ flex: 1, opacity }}>
14971
// <View>
15072
// <Text>
15173
// {navigation.getParam("name")}
@@ -157,7 +79,7 @@ export default App;
15779
// />
15880
// <Button onPress={() => navigation.goBack()} title="Go Back" />
15981
// </View>
160-
// </FadeTransition>
82+
// </Animated.View>
16183
// );
16284
// }
16385
// }
@@ -171,3 +93,81 @@ export default App;
17193
// );
17294

17395
// export default App;
96+
97+
import React from "react";
98+
import {
99+
Button,
100+
Text as UnstyledText,
101+
View as UnstyledView
102+
} from "react-native";
103+
import { createNavigator, StackRouter } from "react-navigation";
104+
import { Transitioner } from "./Transitioner";
105+
import FadeTransition from "./FadeTransition";
106+
107+
const View = props => (
108+
<UnstyledView
109+
style={{ flex: 1, justifyContent: "center", backgroundColor: "#eee" }}
110+
{...props}
111+
/>
112+
);
113+
const Text = props => (
114+
<UnstyledText style={{ textAlign: "center" }} {...props} />
115+
);
116+
117+
class HomeScreen extends React.Component {
118+
static navigationOptions = FadeTransition.navigationOptions;
119+
render() {
120+
const { navigation } = this.props;
121+
return (
122+
<FadeTransition {...this.props}>
123+
<View>
124+
<Text>Home Screen</Text>
125+
<Button
126+
onPress={() => {
127+
navigation.navigate("ProfileScreen", { name: "Jane" });
128+
}}
129+
title="Go to Jane's profile"
130+
/>
131+
<Button
132+
onPress={() => {
133+
navigation.navigate("Examples");
134+
}}
135+
title="Exit"
136+
/>
137+
</View>
138+
</FadeTransition>
139+
);
140+
}
141+
}
142+
143+
class ProfileScreen extends React.Component {
144+
static navigationOptions = FadeTransition.navigationOptions;
145+
render() {
146+
const { navigation } = this.props;
147+
return (
148+
<FadeTransition {...this.props}>
149+
<View>
150+
<Text>
151+
{navigation.getParam("name")}
152+
's Profile
153+
</Text>
154+
<Button
155+
onPress={() => navigation.push("HomeScreen")}
156+
title="Go Home"
157+
/>
158+
<Button onPress={() => navigation.goBack()} title="Go Back" />
159+
</View>
160+
</FadeTransition>
161+
);
162+
}
163+
}
164+
165+
const App = createNavigator(
166+
Transitioner,
167+
StackRouter({
168+
HomeScreen,
169+
ProfileScreen
170+
})
171+
);
172+
173+
export default App;

0 commit comments

Comments
 (0)