Improved animated components flow typing

This commit is contained in:
Arnaud Vergnet 2020-04-19 19:03:25 +02:00
parent 6dbce2cc3e
commit 75b7412eb2
3 changed files with 21 additions and 18 deletions

View file

@ -2,17 +2,18 @@
import * as React from 'react';
import {StyleSheet, View} from "react-native";
import {FAB, IconButton, Surface, withTheme} from "react-native-paper";
import {FAB, IconButton, Surface, Theme, withTheme} from "react-native-paper";
import AutoHideHandler from "../../utils/AutoHideHandler";
import * as Animatable from 'react-native-animatable';
import CustomTabBar from "../Tabbar/CustomTabBar";
import {StackNavigationProp} from "@react-navigation/stack";
const AnimatedFAB = Animatable.createAnimatableComponent(FAB);
type Props = {
navigation: Object,
theme: Object,
onPress: Function,
navigation: StackNavigationProp,
theme: Theme,
onPress: (action: string, data: any) => void,
seekAttention: boolean,
}
@ -28,10 +29,10 @@ const DISPLAY_MODES = {
class AnimatedBottomBar extends React.Component<Props, State> {
ref: Object;
ref: { current: null | Animatable.View };
hideHandler: AutoHideHandler;
displayModeIcons: Object;
displayModeIcons: { [key: string]: string };
state = {
currentMode: DISPLAY_MODES.WEEK,
@ -55,7 +56,7 @@ class AnimatedBottomBar extends React.Component<Props, State> {
}
onHideChange = (shouldHide: boolean) => {
if (this.ref.current) {
if (this.ref.current != null) {
if (shouldHide)
this.ref.current.bounceOutDown(1000);
else
@ -63,7 +64,7 @@ class AnimatedBottomBar extends React.Component<Props, State> {
}
}
onScroll = (event: Object) => {
onScroll = (event: SyntheticEvent<EventTarget>) => {
this.hideHandler.onScroll(event);
};

View file

@ -6,18 +6,19 @@ import {FAB} from "react-native-paper";
import AutoHideHandler from "../../utils/AutoHideHandler";
import * as Animatable from 'react-native-animatable';
import CustomTabBar from "../Tabbar/CustomTabBar";
import {StackNavigationProp} from "@react-navigation/stack";
type Props = {
navigation: Object,
navigation: StackNavigationProp,
icon: string,
onPress: Function,
onPress: () => void,
}
const AnimatedFab = Animatable.createAnimatableComponent(FAB);
export default class AnimatedFAB extends React.Component<Props> {
ref: Object;
ref: { current: null | Animatable.View };
hideHandler: AutoHideHandler;
constructor() {
@ -27,12 +28,12 @@ export default class AnimatedFAB extends React.Component<Props> {
this.hideHandler.addListener(this.onHideChange);
}
onScroll = (event: Object) => {
onScroll = (event: SyntheticEvent<EventTarget>) => {
this.hideHandler.onScroll(event);
};
onHideChange = (shouldHide: boolean) => {
if (this.ref.current) {
if (this.ref.current != null) {
if (shouldHide)
this.ref.current.bounceOutDown(1000);
else

View file

@ -3,16 +3,17 @@
import * as React from 'react';
import * as Animatable from "react-native-animatable";
import {CommonActions} from "@react-navigation/native";
import {StackNavigationProp} from "@react-navigation/stack";
type Props = {
navigation: Object,
route: Object,
children: React$Node
navigation: StackNavigationProp,
route: { params?: any, ... },
children: React.Node
}
export default class AnimatedFocusView extends React.Component<Props> {
ref: Object;
ref: { current: null | Animatable.View };
constructor() {
super();
@ -24,7 +25,7 @@ export default class AnimatedFocusView extends React.Component<Props> {
}
onScreenFocus = () => {
if (this.props.route.params !== undefined) {
if (this.props.route.params != null) {
if (this.props.route.params.animationDir && this.ref.current) {
if (this.props.route.params.animationDir === "right")
this.ref.current.fadeInRight(300);