Improved animated components flow typing

src/components/Animations/AnimatedBottomBar.js

@@ -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);
     };
 

src/components/Animations/AnimatedFAB.js

@@ -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

src/components/Animations/AnimatedFocusView.js

@@ -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);