Skip to content

Commit af53b0e

Browse files
kuznetsov0209spencercarli
authored andcommitted
Add custom transitioner example to NavigationPlayground (react-navigation#2412)
1 parent c414ba8 commit af53b0e

File tree

2 files changed

+135
-0
lines changed

2 files changed

+135
-0
lines changed

examples/NavigationPlayground/js/App.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { StackNavigator } from 'react-navigation';
1414

1515
import Banner from './Banner';
1616
import CustomTabs from './CustomTabs';
17+
import CustomTransitioner from './CustomTransitioner';
1718
import Drawer from './Drawer';
1819
import TabsInDrawer from './TabsInDrawer';
1920
import ModalStack from './ModalStack';
@@ -48,6 +49,11 @@ const ExampleRoutes = {
4849
description: 'Custom tabs with tab router',
4950
screen: CustomTabs,
5051
},
52+
CustomTransitioner: {
53+
name: 'Custom Transitioner',
54+
description: 'Custom transitioner with stack router',
55+
screen: CustomTransitioner,
56+
},
5157
ModalStack: {
5258
name: Platform.OS === 'ios'
5359
? 'Modal Stack Example'
Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
import React, { Component, PropTypes } from 'react';
2+
import {
3+
StyleSheet,
4+
Platform,
5+
Easing,
6+
View,
7+
Animated,
8+
Image,
9+
Button,
10+
} from 'react-native';
11+
import {
12+
Transitioner,
13+
StackRouter,
14+
createNavigationContainer,
15+
addNavigationHelpers,
16+
createNavigator
17+
} from 'react-navigation';
18+
import SampleText from './SampleText';
19+
20+
const MyNavScreen = ({ navigation, banner }) => (
21+
<View>
22+
<SampleText>{banner}</SampleText>
23+
{navigation.state && navigation.state.routeName !== 'Settings' &&
24+
<Button
25+
onPress={() => navigation.navigate('Settings')}
26+
title="Go to a settings screen"
27+
/>
28+
}
29+
30+
<Button
31+
onPress={() => navigation.goBack(null)}
32+
title="Go back"
33+
/>
34+
</View>
35+
);
36+
37+
const MyHomeScreen = ({ navigation }) => (
38+
<MyNavScreen banner="Home Screen" navigation={navigation} />
39+
);
40+
41+
const MySettingsScreen = ({ navigation }) => (
42+
<MyNavScreen banner="Settings Screen" navigation={navigation} />
43+
);
44+
45+
class CustomNavigationView extends Component {
46+
render() {
47+
const { navigation, router } = this.props;
48+
49+
return (
50+
<Transitioner
51+
configureTransition={this._configureTransition}
52+
navigation={navigation}
53+
render={this._render}
54+
/>
55+
);
56+
}
57+
58+
_configureTransition(transitionProps, prevTransitionProps) {
59+
return {
60+
duration: 200,
61+
easing: Easing.out(Easing.ease),
62+
};
63+
}
64+
65+
_render = (transitionProps, prevTransitionProps) => {
66+
const scenes = transitionProps.scenes.map(scene => this._renderScene(transitionProps, scene));
67+
return (
68+
<View style={{ flex: 1 }}>
69+
{scenes}
70+
</View>
71+
);
72+
}
73+
74+
_renderScene = (transitionProps, scene) => {
75+
const { navigation, router } = this.props;
76+
const { routes } = navigation.state;
77+
const { position } = transitionProps;
78+
const { index } = scene;
79+
80+
const animatedValue = position.interpolate({
81+
inputRange: [index - 1, index, index + 1],
82+
outputRange: [0, 1, 0],
83+
});
84+
85+
const animation = {
86+
opacity: animatedValue,
87+
transform: [
88+
{ scale: animatedValue },
89+
],
90+
};
91+
92+
// The prop `router` is populated when we call `createNavigator`.
93+
const Scene = router.getComponentForRouteName(scene.route.routeName);
94+
return (
95+
<Animated.View key={index} style={[styles.view, animation]}>
96+
<Scene
97+
navigation={addNavigationHelpers({
98+
...navigation,
99+
state: routes[index],
100+
})}
101+
/>
102+
</Animated.View>
103+
)
104+
}
105+
}
106+
107+
const CustomRouter = StackRouter({
108+
Home: { screen: MyHomeScreen },
109+
Settings: { screen: MySettingsScreen },
110+
});
111+
112+
const CustomTransitioner = createNavigationContainer(
113+
createNavigator(CustomRouter)(CustomNavigationView)
114+
);
115+
116+
export default CustomTransitioner;
117+
118+
const styles = StyleSheet.create({
119+
container: {
120+
marginTop: Platform.OS === 'ios' ? 20 : 0,
121+
},
122+
view: {
123+
position: 'absolute',
124+
left: 0,
125+
right: 0,
126+
top: 0,
127+
bottom: 0,
128+
},
129+
});

0 commit comments

Comments
 (0)