Fix eslint and flow errors

react-navigation · Apr 3, 2018 · bf378d3 · bf378d3
1 parent 8ea94c9
commit bf378d3
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 32 deletions.
diff --git a/src/navigators/createMaterialTopTabNavigator.js b/src/navigators/createMaterialTopTabNavigator.js
@@ -20,9 +20,15 @@ type Props = InjectedProps & {
   tabBarOptions?: TabBarOptions,
   lazyOnSwipe: boolean,
   sceneAlwaysVisible: boolean,
+  isSwiping: boolean,
 };
 
-class TabView extends React.PureComponent<Props> {
+type State = {
+  loaded: Array<number>,
+  transitioningFromIndex: ?boolean,
+};
+
+class TabView extends React.PureComponent<Props, State> {
   static defaultProps = {
     // fix for https://github.com/react-native-community/react-native-tab-view/issues/312
     initialLayout: Platform.select({
@@ -37,21 +43,9 @@ class TabView extends React.PureComponent<Props> {
     transitioningFromIndex: null,
   };
 
-  transitionTimeout = null;
-
-  componentWillReceiveProps(nextProps) {
-    if (
-      nextProps.navigation.state.index !== this.props.navigation.state.index
-    ) {
-      const { index } = nextProps.navigation.state;
-
-      this.setState(state => ({
-        loaded: state.loaded.includes(index)
-          ? state.loaded
-          : [...state.loaded, index],
-      }));
-    }
-  }
+  // eslint-disable-next-line react/sort-comp
+  _transitionTimeout = null;
+  _actionListener = null;
 
   _getLabel = ({ route, tintColor, focused }) => {
     const { descriptors } = this.props;
@@ -156,52 +150,80 @@ class TabView extends React.PureComponent<Props> {
       this._actionListener.remove();
     }
 
-    if (this.transitionTimeout) {
-      clearTimeout(this.transitionTimeout);
+    if (this._transitionTimeout) {
+      clearTimeout(this._transitionTimeout);
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (
+      nextProps.navigation.state.index !== this.props.navigation.state.index
+    ) {
+      const { index } = nextProps.navigation.state;
+
+      this.setState(state => ({
+        loaded: state.loaded.includes(index)
+          ? state.loaded
+          : [...state.loaded, index],
+      }));
     }
   }
 
   _onAction = payload => {
     if (payload.action.type === NavigationActions.NAVIGATE) {
-      this.setState({ transitioningFromIndex: payload.lastState && payload.lastState.index || 0 });
+      this.setState({
+        transitioningFromIndex:
+          (payload.lastState && payload.lastState.index) || 0,
+      });
     } else if (payload.action.type === 'Navigation/COMPLETE_TRANSITION') {
       InteractionManager.runAfterInteractions(() => {
         // Prevent white screen flickering
-        this.transitionTimeout = setTimeout(() =>
-          this.setState({ transitioningFromIndex: null }),
-          100,
+        this._transitionTimeout = setTimeout(
+          () => this.setState({ transitioningFromIndex: null }),
+          100
         );
       });
     }
   };
 
-  _mustBeVisible = ({ index, route, focused }) => {
-    const { animationEnabled, navigation, isSwiping, lazyOnSwipe, sceneAlwaysVisible } = this.props;
-    const { transitioningFromIndex, loaded } = this.state; 
-    const { routes } = navigation.state;
+  _mustBeVisible = ({ index, focused }) => {
+    const {
+      animationEnabled,
+      navigation,
+      isSwiping,
+      lazyOnSwipe,
+      sceneAlwaysVisible,
+    } = this.props;
+    const { transitioningFromIndex, loaded } = this.state;
 
     const isLoaded = loaded.includes(index);
 
     if (isSwiping && (lazyOnSwipe || isLoaded)) {
-      const isSibling = navigation.state.index === index - 1 || navigation.state.index === index + 1;
+      const isSibling =
+        navigation.state.index === index - 1 ||
+        navigation.state.index === index + 1;
 
       if (isSibling) {
         return true;
       }
     }
 
     // The previous tab should remain visible while transitioning
-    if (animationEnabled && ((isLoaded && sceneAlwaysVisible && transitioningFromIndex != null) || transitioningFromIndex === index)) {
+    if (
+      animationEnabled &&
+      ((isLoaded && sceneAlwaysVisible && transitioningFromIndex != null) ||
+        transitioningFromIndex === index)
+    ) {
       return true;
     }
 
     return focused;
   };
 
-  _renderScene = (props) => {
+  _renderScene = props => {
     const { index, route } = props;
-    const { renderScene, isSwiping, lazyOnSwipe } = this.props;
-    const { loaded } = this.state;
+    const { renderScene } = this.props;
+    const { loaded } = this.state;
 
     const mustBeVisible = this._mustBeVisible(props);
 

diff --git a/src/utils/createTabNavigator.js b/src/utils/createTabNavigator.js
@@ -24,8 +24,12 @@ export type InjectedProps = {
   screenProps?: any,
 };
 
+type State = {
+  isSwiping: boolean,
+};
+
 export default function createTabNavigator(TabView: React.ComponentType<*>) {
-  class NavigationView extends React.Component<*> {
+  class NavigationView extends React.Component<*, State> {
     state = {
       isSwiping: false,
     };