Upgrade Flow to 0.25

.flowconfig

@@ -4,6 +4,9 @@
 .*/*.web.js
 .*/*.android.js
 
+# Ignore templates with `@flow` in header
+.*/local-cli/generator.*
+
 # Some modules have their own node_modules with overlap
 .*/node_modules/node-haste/.*
 
@@ -88,4 +91,4 @@ suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-0]\\|1[0-9]\\|[0-9
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
 [version]
-0.22.0
+^0.25.0

js/Playground.js

@@ -28,6 +28,10 @@ var React = require('React');
 var View = require('View');
 
 class Playground extends React.Component {
+  state: {
+    content: Array<ReactElement>;
+  };
+
   constructor() {
     super();
     const content = [];
@@ -38,6 +42,7 @@ class Playground extends React.Component {
     var Module = require('F8Header');
     // var Module = require('./tabs/schedule/AddToScheduleButton');
     // var Module = require('./rating/Header');
+    // $FlowFixMe: doesn't understand static
     Module.__cards__(define);
     this.state = {content};
   }
@@ -52,10 +57,9 @@ class Playground extends React.Component {
 }
 
 class Example extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
+  state = {
+    inner: null
+  };
 
   render() {
     const content = this.props.render(this.state.inner, (inner) => this.setState({inner}));

js/common/F8Button.js

@@ -37,10 +37,14 @@ var View = require('View');
 class F8Button extends React.Component {
   props: {
     type: 'primary' | 'secondary' | 'bordered';
-    icon: number;
+    icon?: number;
     caption: string;
-    style: any;
-    onPress: () => void;
+    style?: any;
+    onPress: () => mixed;
+  };
+
+  static defaultProps = {
+    type: 'primary',
   };
 
   render() {
@@ -50,7 +54,7 @@ class F8Button extends React.Component {
       icon = <Image source={this.props.icon} style={styles.icon} />;
     }
     let content;
-    if (this.props.type === 'primary' || this.props.type === undefined) {
+    if (this.props.type === 'primary') {
       content = (
         <LinearGradient
           start={[0.5, 1]} end={[1, 1]}

js/common/F8DrawerLayout.js

@@ -34,11 +34,11 @@ class F8DrawerLayout extends React.Component {
   constructor(props: any, context: any) {
     super(props, context);
 
-    this.openDrawer = this.openDrawer.bind(this);
-    this.closeDrawer = this.closeDrawer.bind(this);
-    this.onDrawerOpen = this.onDrawerOpen.bind(this);
-    this.onDrawerClose = this.onDrawerClose.bind(this);
-    this.handleBackButton = this.handleBackButton.bind(this);
+    (this: any).openDrawer = this.openDrawer.bind(this);
+    (this: any).closeDrawer = this.closeDrawer.bind(this);
+    (this: any).onDrawerOpen = this.onDrawerOpen.bind(this);
+    (this: any).onDrawerClose = this.onDrawerClose.bind(this);
+    (this: any).handleBackButton = this.handleBackButton.bind(this);
   }
 
   render() {

js/common/F8Header.js

@@ -50,16 +50,17 @@ export type Item = {
 };
 
 export type Props = {
-  title: string;
+  title?: string;
   leftItem?: Item;
   rightItem?: Item;
   extraItems?: Array<Item>;
   foreground?: Foreground;
-  style: any;
-  children: any;
+  style?: any;
+  children?: any;
 };
 
 class F8HeaderAndroid extends React.Component {
+  static height: number;
   props: Props;
 
   render() {
@@ -122,6 +123,7 @@ class F8HeaderAndroid extends React.Component {
 
 
 class F8HeaderIOS extends React.Component {
+  static height: number;
   props: Props;
 
   render() {
@@ -240,9 +242,8 @@ var styles = StyleSheet.create({
 
 const Header = Platform.OS === 'ios' ? F8HeaderIOS : F8HeaderAndroid;
 Header.height = HEADER_HEIGHT;
-
-module.exports = Header;
-module.exports.__cards__ = (define) => {
+// $FlowFixMe
+Header.__cards__ = (define) => {
   const menuItem = {
     title: 'Menu',
     icon: require('./img/hamburger.png'),
@@ -303,3 +304,5 @@ module.exports.__cards__ = (define) => {
     />
   ));
 };
+
+module.exports = Header;

js/common/F8SegmentedControl.js

@@ -37,7 +37,7 @@ class F8SegmentedControl extends React.Component {
     selectionColor: ?string;
     selectedIndex: number;
     onChange: (newIndex: number) => void;
-    style: any;
+    style?: any;
   };
 
   render() {

js/common/ItemsWithSeparator.js

@@ -30,9 +30,9 @@ var View = require('View');
 
 class ItemsWithSeparator extends React.Component {
   props: {
-    style: any;
-    separatorStyle: any;
-    children: any;
+    style?: any;
+    separatorStyle?: any;
+    children?: any;
   };
 
   render() {

js/common/ListContainer.js

@@ -50,10 +50,10 @@ type Props = {
   selectedSectionColor: string;
   backgroundImage: number;
   backgroundColor: string;
-  parallaxContent: ?ReactElement;
+  parallaxContent?: ?ReactElement;
   stickyHeader?: ?ReactElement;
   onSegmentChange?: (segment: number) => void;
-  children: any;
+  children?: any;
 };
 
 type State = {
@@ -110,22 +110,32 @@ class RelayLoading extends React.Component {
 
 class ListContainer extends React.Component {
   props: Props;
+  state: State;
   _refs: Array<any>;
   _pinned: any;
 
+  static defaultProps = {
+    selectedSectionColor: 'white',
+  };
+
+  static contextTypes = {
+    openDrawer: React.PropTypes.func,
+    hasUnreadNotifications: React.PropTypes.number,
+  };
+
   constructor(props: Props) {
     super(props);
 
-    this.state = ({
+    this.state = {
       idx: this.props.selectedSegment || 0,
       anim: new Animated.Value(0),
       stickyHeaderHeight: 0,
-    }: State);
+    };
 
-    this.renderFakeHeader = this.renderFakeHeader.bind(this);
-    this.handleStickyHeaderLayout = this.handleStickyHeaderLayout.bind(this);
-    this.handleShowMenu = this.handleShowMenu.bind(this);
-    this.handleSelectSegment = this.handleSelectSegment.bind(this);
+    (this: any).renderFakeHeader = this.renderFakeHeader.bind(this);
+    (this: any).handleStickyHeaderLayout = this.handleStickyHeaderLayout.bind(this);
+    (this: any).handleShowMenu = this.handleShowMenu.bind(this);
+    (this: any).handleSelectSegment = this.handleSelectSegment.bind(this);
     this._refs = [];
   }
 
@@ -354,15 +364,6 @@ class ListContainer extends React.Component {
   }
 }
 
-ListContainer.defaultProps = {
-  selectedSectionColor: 'white',
-};
-
-ListContainer.contextTypes = {
-  openDrawer: React.PropTypes.func,
-  hasUnreadNotifications: React.PropTypes.number,
-};
-
 var styles = StyleSheet.create({
   container: {
     flex: 1,

js/common/LoginButton.js

@@ -61,6 +61,7 @@ class LoginButton extends React.Component {
         <F8Button
           style={[styles.button, this.props.style]}
           caption="Please wait..."
+          onPress={() => {}}
         />
       );
     }

js/common/MapView.js

@@ -36,7 +36,10 @@ class MapView extends React.Component {
   _isMounted: boolean;
   props: {
     map: ?Map;
-    style: any;
+    style?: any;
+  };
+  state: {
+    loaded: boolean;
   };
 
   constructor() {

js/common/ParallaxBackground.js

@@ -33,6 +33,7 @@ var View = require('View');
 var Image = require('Image');
 var Dimensions = require('Dimensions');
 
+// TODO: Remove this magic numbers
 const HEIGHT = Dimensions.get('window').height > 600
   ? 200
   : 150;
@@ -44,12 +45,19 @@ type Props = {
   offset: Animated.Value;
   backgroundImage: number;
   backgroundShift: number; // 0..1
-  backgroundColor: number; // TODO: This makes it seems like image loads faster. Remove
-  children: any;
+  backgroundColor: string; // TODO: This makes it seems like image loads faster. Remove
+  children?: any;
 }
 
+type State = {
+  shift: Animated.Value;
+};
+
 class ParallaxBackground extends React.Component {
   props: Props;
+  state: State;
+
+  static HEIGHT = HEIGHT;
 
   constructor(props: Props) {
     super(props);
@@ -150,9 +158,6 @@ class ParallaxBackground extends React.Component {
   }
 }
 
-// TODO: Remove this magic numbers
-ParallaxBackground.HEIGHT = HEIGHT;
-
 var HEADER_HEIGHT = HEIGHT + 156;
 
 var styles = StyleSheet.create({

js/common/PureListView.js

@@ -39,18 +39,32 @@ export type Data = Rows | RowsAndSections;
 type RenderElement = () => ?ReactElement;
 
 type Props = {
-  data: ?Data;
+  data: Data;
   renderEmptyList?: ?RenderElement;
   minContentHeight: number;
   contentInset: { top: number; bottom: number; };
 };
 
+type State = {
+  contentHeight: number;
+  dataSource: ListView.DataSource;
+};
+
 // FIXME: Android has a bug when scrolling ListView the view insertions
 // will make it go reverse. Temporary fix - pre-render more rows
 const LIST_VIEW_PAGE_SIZE = Platform.OS === 'android' ? 20 : 1;
 
 class PureListView extends React.Component {
   props: Props;
+  state: State;
+
+  static defaultProps = {
+    data: [],
+    contentInset: { top: 0, bottom: 0 },
+    // TODO: This has to be scrollview height + fake header
+    minContentHeight: Dimensions.get('window').height + 20,
+    renderSeparator: (sectionID, rowID) => <View style={styles.separator} key={rowID} />,
+  };
 
   constructor(props: Props) {
     super(props);
@@ -66,8 +80,8 @@ class PureListView extends React.Component {
       dataSource: cloneWithData(dataSource, props.data),
     };
 
-    this.renderFooter = this.renderFooter.bind(this);
-    this.onContentSizeChange = this.onContentSizeChange.bind(this);
+    (this: any).renderFooter = this.renderFooter.bind(this);
+    (this: any).onContentSizeChange = this.onContentSizeChange.bind(this);
   }
 
   componentWillReceiveProps(nextProps: Props) {
@@ -119,14 +133,6 @@ class PureListView extends React.Component {
   }
 }
 
-PureListView.defaultProps = {
-  data: [],
-  contentInset: { top: 0, bottom: 0 },
-  // TODO: This has to be scrollview height + fake header
-  minContentHeight: Dimensions.get('window').height + 20,
-  renderSeparator: (sectionID, rowID) => <View style={styles.separator} key={rowID} />,
-};
-
 function cloneWithData(dataSource: ListView.DataSource, data: ?Data) {
   if (!data) {
     return dataSource.cloneWithRows([]);

js/login/LoginScreen.js

@@ -39,12 +39,9 @@ var { skipLogin } = require('../actions');
 var { connect } = require('react-redux');
 
 class LoginScreen extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      anim: new Animated.Value(0),
-    };
-  }
+  state = {
+    anim: new Animated.Value(0),
+  };
 
   componentDidMount() {
     StatusBarIOS && StatusBarIOS.setStyle('default');