Skip to content

Commit c282b65

Browse files
authored
Update source of animated switch navigator (react-navigation#417)
* the docs in next version and 3.x should be the same in animated switch navigator * updated grammar
1 parent 4428fcd commit c282b65

File tree

2 files changed

+38
-3
lines changed

2 files changed

+38
-3
lines changed

docs/animated-switch-navigator.md

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: createAnimatedSwitchNavigator
44
sidebar_label: createAnimatedSwitchNavigator
55
---
66

7-
A switch navigator with the ability to animate transitions between screens.
7+
A `SwitchNavigator` with animation support.
88

99
To use this navigator, you need to install `react-native-reanimated >= 1.0.0`. If you have a managed Expo project, you need to use >= SDK 33 to have the correct version of Reanimated.
1010

@@ -16,4 +16,39 @@ import createAnimatedSwitchNavigator from 'react-navigation-animated-switch';
1616
createAnimatedSwitchNavigator(RouteConfigs, SwitchNavigatorConfig);
1717
```
1818

19-
The route configs and navigator configs are identical to [createSwitchNavigator](switch-navigator.html)
19+
## RouteConfigs
20+
21+
The route configs are identical to [createSwitchNavigator](switch-navigator.html)
22+
23+
## SwitchNavigatorConfig
24+
25+
The switch navigator configs are identical to [createSwitchNavigator](switch-navigator.html).
26+
27+
By default, the transition between screens is a cross-fade. You can customize the transition with an additional option `transition`:
28+
29+
```jsx
30+
import createAnimatedSwitchNavigator from 'react-navigation-animated-switch';
31+
import { Transition } from 'react-native-reanimated';
32+
33+
const MySwitch = createAnimatedSwitchNavigator(
34+
{
35+
Home: HomeScreen,
36+
Other: OtherScreen,
37+
},
38+
{
39+
// The previous screen will slide to the bottom while the next screen will fade in
40+
transition: (
41+
<Transition.Together>
42+
<Transition.Out
43+
type="slide-bottom"
44+
durationMs={400}
45+
interpolation="easeIn"
46+
/>
47+
<Transition.In type="fade" durationMs={500} />
48+
</Transition.Together>
49+
),
50+
}
51+
);
52+
```
53+
54+
Since the transition are possible thanks to the `Transition` API from `react-native-reanimated`, you can learn more about it [here](https://github.com/kmagiera/react-native-reanimated).

website/versioned_docs/version-3.x/animated-switch-navigator.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ sidebar_label: createAnimatedSwitchNavigator
55
original_id: animated-switch-navigator
66
---
77

8-
An SwitchNavigator with animation support.
8+
A `SwitchNavigator` with animation support.
99

1010
To use this navigator, you need to install `react-native-reanimated >= 1.0.0`. If you have a managed Expo project, you need to use >= SDK 33 to have the correct version of Reanimated.
1111

0 commit comments

Comments
 (0)