fix: Flow types and extract them

Author: PTROCKI

example/ViewPagerExample.js

@@ -9,31 +9,46 @@
 
 'use strict';
 
-import React from 'react';
+import * as React from "react";
 import { Image,
   StyleSheet,
   Text,
-  TouchableWithoutFeedback,
-  TouchableOpacity,
-  View, 
+  View,
   SafeAreaView,
-  Platform } from 'react-native' 
+} from 'react-native'
 
 import ViewPagerAndroid from '@react-native-community/viewpager';
-import { PAGES, BGCOLOR, IMAGE_URIS, createPage } from "./Common";
+import { PAGES, BGCOLOR, IMAGE_URIS, createPage } from "./utils";
 import { Button } from "./src/component/Button";
 import { LikeCount } from "./src/component/LikeCount";
 import { ProgressBar } from "./src/component/ProgressBar";
+import type { CreatePage } from "./utils"
+import type {PageScrollEvent, PageScrollState, PageScrollStateChangedEvent, PageSelectedEvent} from "../js";
 
-export default class ViewPagerExample extends React.Component {
-  constructor(props) {
+type State = {
+  page: number,
+  animationsAreEnabled: boolean,
+  scrollEnabled: boolean,
+  progress: {
+    position: number,
+    offset: number,
+  },
+  pages: Array<CreatePage>,
+  scrollState: PageScrollState
+};
+
+export default class ViewPagerExample extends React.Component<*, State> {
+
+  viewPager: React.Ref<typeof ViewPagerAndroid>;
+
+  constructor(props: any) {
     super(props);
 
     const pages = [];
     for (let i = 0; i < PAGES; i++) {
-      pages.push(this.createPage(i));
+      pages.push(createPage(i));
     }
-    
+
     this.state = {
       page: 0,
       animationsAreEnabled: true,
@@ -42,52 +57,47 @@ export default class ViewPagerExample extends React.Component {
         position: 0,
         offset: 0,
       },
-      pages
+      pages: pages,
+      scrollState: 'idle'
     };
+    this.viewPager = React.createRef();
   };
 
-  onPageSelected = e => {
+  onPageSelected = (e: PageSelectedEvent) => {
     this.setState({page: e.nativeEvent.position});
   };
 
-  onPageScroll = e => {
-    this.setState({progress: e.nativeEvent});
+  onPageScroll = (e: PageScrollEvent)=> {
+    this.setState({progress: {
+      position: e.nativeEvent.position,
+      offset: e.nativeEvent.offset,
+    }});
   };
 
-  onPageScrollStateChanged = e => {
+  onPageScrollStateChanged = (e: PageScrollStateChangedEvent) => {
     this.setState({scrollState: e.nativeEvent.pageScrollState});
   };
 
-  addPage = e => {
-    this.setState(prevState => ({ pages: [...prevState.pages, this.createPage(prevState.pages.length)]}));
-  }
+  addPage = () => {
+    this.setState(prevState => ({ pages: [...prevState.pages, createPage(prevState.pages.length)]}));
+  };
 
-  move = delta => {
+  move = (delta: number) => {
     const page = this.state.page + delta;
     this.go(page);
   };
 
-  go = page => {
+  go = (page: number) => {
     if (this.state.animationsAreEnabled) {
-      this.viewPager.setPage(page);
+      /* $FlowFixMe we need to update flow to support React.Ref and createRef() */
+      this.viewPager.current.setPage(page);
     } else {
-      this.viewPager.setPageWithoutAnimation(page);
+      /* $FlowFixMe we need to update flow to support React.Ref and createRef() */
+      this.viewPager.current.setPageWithoutAnimation(page);
     }
   };
 
-  createPage(key) {
-    return {
-      key: key,
-      style: {
-        backgroundColor: BGCOLOR[key % BGCOLOR.length],
-        alignItems: 'center',
-        padding: 20,
-      }, 
-      imgSource: { uri: IMAGE_URIS[key % BGCOLOR.length] }
-    }
-  };
-  
-  renderPage(page) {
+  renderPage(page: CreatePage) {
     return (
       <View key={page.key} style={page.style} collapsable={false}>
         <Image
@@ -111,9 +121,7 @@ export default class ViewPagerExample extends React.Component {
           onPageSelected={this.onPageSelected}
           onPageScrollStateChanged={this.onPageScrollStateChanged}
           pageMargin={10}
-          ref={viewPager => {
-            this.viewPager = viewPager;
-          }}>
+          ref={this.viewPager}>
           { pages.map( page => this.renderPage(page)) }
         </ViewPagerAndroid>
         <View style={styles.buttons}>
@@ -166,7 +174,7 @@ export default class ViewPagerExample extends React.Component {
         </View>
         <View style={styles.progress}>
           <Text style={styles.buttonText}> Page {page + 1} / {pages.length} </Text>
-          <ProgressBar numberOfPages={pages.length} size={300} progress={this.state.progress} /> 
+          <ProgressBar numberOfPages={pages.length} size={300} progress={this.state.progress} />
         </View>
       </SafeAreaView>
     );

example/src/component/Button.js

@@ -1,53 +1,63 @@
-// @flow
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
 
 import React from 'react';
 import {
-  Image,
   StyleSheet,
   Text,
   TouchableWithoutFeedback,
-  TouchableOpacity,
   View,
 } from 'react-native'
 
-export class Button extends React.Component {
-    
+type Props = $ReadOnly<{|
+  enabled?: boolean,
+  onPress: () => void,
+  text: string,
+|}>;
+
+export class Button extends React.Component<Props> {
   _handlePress = () => {
-      if (this.props.enabled && this.props.onPress) {
-        this.props.onPress();
-      }
-    };
-  
-    render() {
-      return (
-        <TouchableWithoutFeedback onPress={this._handlePress}>
-          <View
-            style={[
-              styles.button,
-              this.props.enabled ? {} : styles.buttonDisabled,
-            ]}>
-            <Text style={styles.buttonText}>{this.props.text}</Text>
-          </View>
-        </TouchableWithoutFeedback>
-      );
+    if (this.props.enabled && this.props.onPress) {
+      this.props.onPress();
     }
+  };
+
+  render() {
+    return (
+      <TouchableWithoutFeedback onPress={this._handlePress}>
+        <View
+          style={[
+            styles.button,
+            this.props.enabled ? {} : styles.buttonDisabled,
+          ]}>
+          <Text style={styles.buttonText}>{this.props.text}</Text>
+        </View>
+      </TouchableWithoutFeedback>
+    );
   }
+}
 
-  const styles = StyleSheet.create({
-    button: {
-      flex: 1,
-      width: 0,
-      margin: 5,
-      borderColor: 'gray',
-      borderWidth: 1,
-      backgroundColor: 'gray',
-    },
-    buttonDisabled: {
-      backgroundColor: 'black',
-      opacity: 0.5,
-    },
-    buttonText: {
-      color: 'white',
-      margin: 10,
-    },
-})
+const styles = StyleSheet.create({
+  button: {
+    flex: 1,
+    width: 0,
+    margin: 5,
+    borderColor: 'gray',
+    borderWidth: 1,
+    backgroundColor: 'gray',
+  },
+  buttonDisabled: {
+    backgroundColor: 'black',
+    opacity: 0.5,
+  },
+  buttonText: {
+    color: 'white',
+    margin: 10,
+  },
+});

example/src/component/LikeCount.js

@@ -1,14 +1,21 @@
-// @flow
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
 
 import React from 'react';
-import { Image,
+import {
   StyleSheet,
   Text,
-  TouchableWithoutFeedback,
   TouchableOpacity,
-  View } from 'react-native' 
+  View,
+} from 'react-native'
 
-import { thumbsUp } from './../../Common'
+import { thumbsUp } from '../../utils'
 
 type Props = $ReadOnly<{||}>;
 type State = {|likes: number|};
@@ -52,4 +59,4 @@ const styles = StyleSheet.create({
     flex: 1,
     margin: 8,
   },
-});
+});

example/src/component/ProgressBar.js

@@ -1,21 +1,32 @@
-// @flow
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
 import React from 'react';
-import { Image,
-  StyleSheet,
-  Text,
-  TouchableWithoutFeedback,
-  TouchableOpacity,
-  View } from 'react-native' 
+import {StyleSheet, View} from 'react-native'
+
+type Props = {
+  progress: {
+    position: number,
+    offset: number,
+  },
+  numberOfPages: number,
+  size: number,
+}
 
-export class ProgressBar extends React.Component {
-    
-    render() {
-        const fractionalPosition = this.props.progress.position + this.props.progress.offset;
-        const progressBarSize = (fractionalPosition / (this.props.numberOfPages - 1)) * this.props.size;
-        return (
-        <View style={[styles.progressBarContainer, {width: this.props.size}]}>
-            <View style={[styles.progressBar, {width: progressBarSize}]} />
-        </View>
+export class ProgressBar extends React.Component<Props> {
+  render() {
+    const fractionalPosition = this.props.progress.position + this.props.progress.offset;
+    const progressBarSize = (fractionalPosition / (this.props.numberOfPages - 1)) * this.props.size;
+    return (
+      <View style={[styles.progressBarContainer, {width: this.props.size}]}>
+        <View style={[styles.progressBar, {width: progressBarSize}]} />
+      </View>
     );
   }
 }
@@ -32,4 +43,4 @@ const styles = StyleSheet.create({
       flex: 1,
       backgroundColor: '#eeeeee',
     },
-  });
+  });

example/Common.js renamed to example/utils.js

@@ -1,4 +1,11 @@
-// @flow
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
 
 export const PAGES = 5;
 export const BGCOLOR = ['#fdc08e', '#fff6b9', '#99d1b7', '#dde5fe', '#f79273'];
@@ -10,15 +17,22 @@ export const IMAGE_URIS = [
   'https://apod.nasa.gov/apod/image/1510/lunareclipse_27Sep_beletskycrop4.jpg',
 ];
 export const thumbsUp = '\uD83D\uDC4D';
+import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 
-export const createPage = (key) => {
+export type CreatePage = {
+  key: number,
+  style: ViewStyleProp,
+  imgSource: { uri: string }
+}
+
+export const createPage = (key: number): CreatePage => {
     return {
       key: key,
       style: {
         backgroundColor: BGCOLOR[key % BGCOLOR.length],
         alignItems: 'center',
         padding: 20,
-      }, 
+      },
       imgSource: { uri: IMAGE_URIS[key % BGCOLOR.length] }
     }
-  };
+  };