Add shadow opacity and don't animate view opacity in transition

This commit is contained in:
Brent Vatne 2018-09-27 12:03:10 -07:00
parent 19424d9ab1
commit d57ee8623d
3 changed files with 11 additions and 18 deletions

View File

@ -60,9 +60,8 @@ const styles = StyleSheet.create({
main: {
...StyleSheet.absoluteFillObject,
backgroundColor: '#E9E9EF',
shadowColor: 'black',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.2,
shadowColor: '#000',
shadowOffset: { width: -4, height: 0 },
shadowRadius: 5,
},
transparent: {

View File

@ -47,11 +47,6 @@ function forHorizontal(props) {
const { first, last } = interpolate;
const index = scene.index;
const opacity = position.interpolate({
inputRange: [first, first + 0.01, index, last - 0.01, last],
outputRange: [0, 1, 1, 0.85, 0],
extrapolate: 'clamp',
});
const width = layout.initWidth;
const translateX = position.interpolate({
@ -63,9 +58,15 @@ function forHorizontal(props) {
});
const translateY = 0;
const shadowOpacity = position.interpolate({
inputRange: [first, index, last],
outputRange: [0.01, 0.2, 0.01],
extrapolate: 'clamp',
});
return {
opacity,
transform: [{ translateX }, { translateY }],
shadowOpacity,
};
}
@ -84,12 +85,6 @@ function forVertical(props) {
const { first, last } = interpolate;
const index = scene.index;
const opacity = position.interpolate({
inputRange: [first, first + 0.01, index, last - 0.01, last],
outputRange: [0, 1, 1, 0.85, 0],
extrapolate: 'clamp',
});
const height = layout.initHeight;
const translateY = position.interpolate({
inputRange: [first, index, last],
@ -99,7 +94,6 @@ function forVertical(props) {
const translateX = 0;
return {
opacity,
transform: [{ translateX }, { translateY }],
};
}

View File

@ -25,7 +25,7 @@ const SlideFromRightIOS = {
transitionSpec: IOSTransitionSpec,
screenInterpolator: StyleInterpolator.forHorizontal,
containerStyle: {
backgroundColor: '#000',
backgroundColor: '#eee',
},
};
@ -34,7 +34,7 @@ const ModalSlideFromBottomIOS = {
transitionSpec: IOSTransitionSpec,
screenInterpolator: StyleInterpolator.forVertical,
containerStyle: {
backgroundColor: '#000',
backgroundColor: '#eee',
},
};