ReactNativeのModalとAnimationを組み合わせた話

1. AnimatedでModalの
Animationを変えてみた
2019/01/17

2. 自己紹介
 大津 穂高
 OPEN8 Inc.
 テクノロジー開発本部 コンテンツ部
@14__oz

3. ルトロン

4. モーダルとAnimated
 ModalのanimatedTypeの「slide」「fade」を
組み合わせたような出現方法を実現

5. モーダルとAnimated
?

6. Modalの完成
Fade
Slide

7. モーダルのコード
<Modal
transparent
visible={this.props.isVisible}
animationType={'none'}
onRequestClose={this.closeModal}
>
<View
style={[s.background]}
>
<View style={[s.modalContainer]}>
{/*Modalの中身*/}
</View>
</View>
</Modal>

8. モーダルのコード
<Modal
transparent
visible={this.props.isVisible}
animationType={'none'}
onRequestClose={this.closeModal}
>
<Animated.View
style={[s.background, { opacity: this.modalAnimation }]}
>
<Animated.View style={[s.modalContainer, { top: contentTop }]}>
{/*Modalの中身*/}
</Animated.View>
</Animated.View>
</Modal>

9. Animated.timing
componentWillReceiveProps(nextProps) {
if (nextProps.isVisible) {
Animated.timing(this.modalAnimation, {
toValue: 1,
duration: 300
}).start();
}
}

10. const contentTop = this.modalAnimation.interpolate({
inputRange: [0, 1],
outputRange: [DeviceHeight, 0]
});
interpolate

11. プログレスバー

12. プログレスバーのコード
<View>
<Animated.View
style={[
{ flex: percent },
s.progressBar
]}
/>
</View>

13. Animated.Valueをグローバルで持つ
import {Animated} from 'react-native';
const percent = new Animated.Value(0);
export default percent;

14. Animation面白いよ！！