kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-02-08 22:44:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: expose animation related properties in context (#278)

Browse Source
This commit is contained in:
Christian Falch
2019-11-06 12:10:15 +01:00
parent 62f26ef3f1
commit c63259df37
7 changed files with 94 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
packages/stack/example/src/StackAnimationConsumerStack.tsx
View File

@@ -4,9 +4,7 @@ import Animated from 'react-native-reanimated';
import {
createStackNavigator,
NavigationStackScreenProps,
StackAnimationProgressContext,
StackAnimationIsSwipingContext,
StackAnimationIsClosingContext,
StackCardAnimationContext,
} from 'react-navigation-stack';
const ListScreen = (props: NavigationStackScreenProps) => (
@@ -27,12 +25,14 @@ const ListScreen = (props: NavigationStackScreenProps) => (
);
const AnotherScreen = () => (
<StackAnimationProgressContext.Consumer>
{progress => {
const fontSize = Animated.interpolate(progress, {
inputRange: [0, 1],
outputRange: [8, 32],
});
<StackCardAnimationContext.Consumer>
{value => {
const fontSize = value
? Animated.interpolate(value.current.progress, {
inputRange: [0, 1],
outputRange: [8, 32],
})
: 32;
return (
<View
@@ -43,13 +43,15 @@ const AnotherScreen = () => (
backgroundColor: 'honeydew',
}}
>
<Animated.Text style={{ fontSize, opacity: progress }}>
<Animated.Text
style={{ fontSize, opacity: value ? value.current.progress : 1 }}
>
Animates on progress
</Animated.Text>
</View>
);
}}
</StackAnimationProgressContext.Consumer>
</StackCardAnimationContext.Consumer>
);
const YetAnotherScreen = () => (
@@ -61,36 +63,40 @@ const YetAnotherScreen = () => (
backgroundColor: 'papayawhip',
}}
>
<StackAnimationIsSwipingContext.Consumer>
{isSwiping => (
<StackCardAnimationContext.Consumer>
{value => (
<Animated.Text
style={{
fontSize: 24,
opacity: Animated.interpolate(isSwiping, {
inputRange: [0, 1],
outputRange: [1, 0],
}),
opacity: value
? Animated.interpolate(value.swiping, {
inputRange: [0, 1],
outputRange: [1, 0],
})
: 1,
}}
>
Disappears when swiping
</Animated.Text>
)}
</StackAnimationIsSwipingContext.Consumer>
<StackAnimationIsClosingContext.Consumer>
{isClosing => (
</StackCardAnimationContext.Consumer>
<StackCardAnimationContext.Consumer>
{value => (
<Animated.Text
style={{
fontSize: 24,
opacity: Animated.interpolate(isClosing, {
inputRange: [0, 1],
outputRange: [1, 0],
}),
opacity: value
? Animated.interpolate(value.closing, {
inputRange: [0, 1],
outputRange: [1, 0],
})
: 1,
}}
>
Disappears only when closing
</Animated.Text>
)}
</StackAnimationIsClosingContext.Consumer>
</StackCardAnimationContext.Consumer>
</View>
);