navigation-experimental-fork - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

NavigationAbstractPanResponder.js

@@ -14,9 +14,7 @@ /**
 
-const PanResponder = require('PanResponder');
+import { PanResponder } from 'react-native';
 
 const invariant = require('fbjs/lib/invariant');
 
-import type  {
-  NavigationPanPanHandlers,
-} from 'NavigationTypeDefinition';
+import type { NavigationPanPanHandlers } from 'NavigationTypeDefinition';
 
@@ -36,3 +34,2 @@ const EmptyPanHandlers = {
 class NavigationAbstractPanResponder {
-
   panHandlers: NavigationPanPanHandlers;
@@ -39,0 +36,0 @@

NavigationExperimental.js

@@ -14,8 +14,8 @@ /**
 
-const NavigationCard = require('NavigationCard');
-const NavigationCardStack = require('NavigationCardStack');
-const NavigationHeader = require('NavigationHeader');
-const NavigationPropTypes = require('NavigationPropTypes');
-const NavigationStateUtils = require('NavigationStateUtils');
-const NavigationTransitioner = require('NavigationTransitioner');
+import NavigationCard from './NavigationExperimentalComponents/NavigationCard';
+const NavigationCardStack = require('./NavigationExperimentalComponents/NavigationCardStack');
+const NavigationHeader = require('./NavigationExperimentalComponents/NavigationHeader');
+const NavigationPropTypes = require('./NavigationPropTypes');
+const NavigationStateUtils = require('./NavigationStateUtils');
+const NavigationTransitioner = require('./NavigationTransitioner');
 
@@ -28,8 +28,7 @@ const warning = require('fbjs/lib/warning');
   'NavigationExperimental is deprecated and will be removed in a future ' +
-  'version of React Native. The NavigationExperimental views live on in ' +
-  'the React-Navigation project, which also makes it easy to declare ' +
-  'navigation logic for your app. Learn more at https://reactnavigation.org/'
+    'version of React Native. The NavigationExperimental views live on in ' +
+    'the React-Navigation project, which also makes it easy to declare ' +
+    'navigation logic for your app. Learn more at https://reactnavigation.org/'
 );
 
-
 const NavigationExperimental = {
@@ -36,0 +35,0 @@ // Core

NavigationExperimentalComponents/NavigationCard.js

@@ -35,13 +35,13 @@ /**
 
-const Animated = require('Animated');
-const NavigationCardStackPanResponder = require('NavigationCardStackPanResponder');
-const NavigationCardStackStyleInterpolator = require('NavigationCardStackStyleInterpolator');
-const NavigationPagerPanResponder = require('NavigationPagerPanResponder');
-const NavigationPagerStyleInterpolator = require('NavigationPagerStyleInterpolator');
-const NavigationPointerEventsContainer = require('NavigationPointerEventsContainer');
-const NavigationPropTypes = require('NavigationPropTypes');
-const React = require('React');
-const StyleSheet = require('StyleSheet');
+const { Animated, StyleSheet } = require('react-native');
+const NavigationCardStackPanResponder = require('./NavigationCardStackPanResponder');
+const NavigationCardStackStyleInterpolator = require('./NavigationCardStackStyleInterpolator');
+const NavigationPagerPanResponder = require('./NavigationPagerPanResponder');
+const NavigationPagerStyleInterpolator = require('./NavigationPagerStyleInterpolator');
+const NavigationPointerEventsContainer = require('./NavigationPointerEventsContainer');
+const NavigationPropTypes = require('../NavigationPropTypes');
+// const React = require('React');
+import React, { Component } from 'react';
 
-import type  {
+import type {
   NavigationPanPanHandlers,
@@ -61,3 +61,3 @@ NavigationSceneRenderer,
 
-const {PropTypes} = React;
+const { PropTypes } = React;
 
@@ -89,12 +89,12 @@ /**
 
-    const viewStyle = style === undefined ?
-      NavigationCardStackStyleInterpolator.forHorizontal(props) :
-      style;
+    const viewStyle = style === undefined
+      ? NavigationCardStackStyleInterpolator.forHorizontal(props)
+      : style;
 
-    const viewPanHandlers = panHandlers === undefined ?
-      NavigationCardStackPanResponder.forHorizontal({
-        ...props,
-        onNavigateBack: this.props.onNavigateBack,
-      }) :
-      panHandlers;
+    const viewPanHandlers = panHandlers === undefined
+      ? NavigationCardStackPanResponder.forHorizontal({
+          ...props,
+          onNavigateBack: this.props.onNavigateBack,
+        })
+      : panHandlers;
 
@@ -106,3 +106,4 @@ return (
         ref={this.props.onComponentRef}
-        style={[styles.main, viewStyle]}>
+        style={[styles.main, viewStyle]}
+      >
         {renderScene(props)}
@@ -122,3 +123,3 @@ </Animated.View>
     shadowColor: 'black',
-    shadowOffset: {width: 0, height: 0},
+    shadowOffset: { width: 0, height: 0 },
     shadowOpacity: 0.4,
@@ -125,0 +126,0 @@ shadowRadius: 10,

NavigationExperimentalComponents/NavigationCardStack.js

@@ -34,15 +34,15 @@ /**
 'use strict';
+import { NativeModules } from 'react-native';
+const NativeAnimatedModule = NativeModules.NativeAnimatedModule;
+const NavigationCard = require('./NavigationCard');
+const NavigationCardStackPanResponder = require('./NavigationCardStackPanResponder');
+const NavigationCardStackStyleInterpolator = require('./NavigationCardStackStyleInterpolator');
+const NavigationPropTypes = require('../NavigationPropTypes');
+const NavigationTransitioner = require('../NavigationTransitioner');
+import React, { Component } from 'react';
 
-const NativeAnimatedModule = require('NativeModules').NativeAnimatedModule;
-const NavigationCard = require('NavigationCard');
-const NavigationCardStackPanResponder = require('NavigationCardStackPanResponder');
-const NavigationCardStackStyleInterpolator = require('NavigationCardStackStyleInterpolator');
-const NavigationPropTypes = require('NavigationPropTypes');
-const NavigationTransitioner = require('NavigationTransitioner');
-const React = require('React');
-const StyleSheet = require('StyleSheet');
-const View = require('View');
+const { Animated, StyleSheet, View } = require('react-native');
 
-const {PropTypes} = React;
-const {Directions} = NavigationCardStackPanResponder;
+const { PropTypes } = React;
+const { Directions } = NavigationCardStackPanResponder;
 
@@ -57,5 +57,3 @@ import type {
 
-import type {
-  NavigationGestureDirection,
-} from 'NavigationCardStackPanResponder';
+import type { NavigationGestureDirection } from 'NavigationCardStackPanResponder';
 
@@ -132,4 +130,4 @@ type Props = {
 class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
-  _render : NavigationSceneRenderer;
-  _renderScene : NavigationSceneRenderer;
+  _render: NavigationSceneRenderer;
+  _renderScene: NavigationSceneRenderer;
 
@@ -245,10 +243,8 @@ static propTypes = {
     if (
-      !!NativeAnimatedModule
-
+      !!NativeAnimatedModule &&
       // Gestures do not work with the current iteration of native animation
       // driving. When gestures are disabled, we can drive natively.
-      && !this.props.enableGestures
-
+      !this.props.enableGestures &&
       // Native animation support also depends on the transforms used:
-      && NavigationCardStackStyleInterpolator.canUseNativeDriver(isVertical)
+      NavigationCardStackStyleInterpolator.canUseNativeDriver(isVertical)
     ) {
@@ -258,16 +254,14 @@ animationConfig.useNativeDriver = true;
     return animationConfig;
-  }
+  };
 
   _render(props: NavigationTransitionProps): React.Element<any> {
-    const {
-      renderHeader,
-    } = this.props;
+    const { renderHeader } = this.props;
 
     const header = renderHeader ? <View>{renderHeader(props)}</View> : null;
 
-    const scenes = props.scenes.map(
-     scene => this._renderScene({
-       ...props,
-       scene,
-     })
+    const scenes = props.scenes.map(scene =>
+      this._renderScene({
+        ...props,
+        scene,
+      })
     );
@@ -277,4 +271,3 @@
       <View style={styles.container}>
-        <View
-          style={[styles.scenes, this.props.scenesStyle]}>
+        <View style={[styles.scenes, this.props.scenesStyle]}>
           {scenes}
@@ -290,5 +283,7 @@ </View>
 
-    const interpolator = this.props.cardStyleInterpolator || (isVertical ?
-      NavigationCardStackStyleInterpolator.forVertical :
-      NavigationCardStackStyleInterpolator.forHorizontal);
+    const interpolator =
+      this.props.cardStyleInterpolator ||
+      (isVertical
+        ? NavigationCardStackStyleInterpolator.forVertical
+        : NavigationCardStackStyleInterpolator.forHorizontal);
 
@@ -305,5 +300,5 @@ const style = interpolator(props);
       };
-      panHandlers = isVertical ?
-        NavigationCardStackPanResponder.forVertical(panHandlersProps) :
-        NavigationCardStackPanResponder.forHorizontal(panHandlersProps);
+      panHandlers = isVertical
+        ? NavigationCardStackPanResponder.forVertical(panHandlersProps)
+        : NavigationCardStackPanResponder.forHorizontal(panHandlersProps);
     }
@@ -310,0 +305,0 @@

NavigationExperimentalComponents/NavigationCardStackPanResponder.js

@@ -14,6 +14,6 @@ /**
 
-const Animated = require('Animated');
-const I18nManager = require('I18nManager');
-const NavigationAbstractPanResponder = require('NavigationAbstractPanResponder');
+const { Animated, I18nManager } = require('react-native');
 
+const NavigationAbstractPanResponder = require('../NavigationAbstractPanResponder');
+
 const clamp = require('clamp');
@@ -54,7 +54,7 @@
 const Directions = {
-  'HORIZONTAL': 'horizontal',
-  'VERTICAL': 'vertical',
+  HORIZONTAL: 'horizontal',
+  VERTICAL: 'vertical',
 };
 
-export type NavigationGestureDirection =  'horizontal' | 'vertical';
+export type NavigationGestureDirection = 'horizontal' | 'vertical';
 
@@ -84,3 +84,2 @@ type Props = NavigationSceneRendererProps & {
 class NavigationCardStackPanResponder extends NavigationAbstractPanResponder {
-
   _isResponding: boolean;
@@ -91,6 +90,3 @@ _isVertical: boolean;
 
-  constructor(
-    direction: NavigationGestureDirection,
-    props: Props,
-  ) {
+  constructor(direction: NavigationGestureDirection, props: Props) {
     super();
@@ -126,13 +122,11 @@ this._isResponding = false;
     const currentDragPosition = gesture[isVertical ? 'moveY' : 'moveX'];
-    const maxDragDistance = isVertical ?
-      layout.height.__getValue() :
-      layout.width.__getValue();
+    const maxDragDistance = isVertical ? layout.height.__getValue() : layout.width.__getValue();
 
-    const positionMax = isVertical ?
-      props.gestureResponseDistance :
-      /**
+    const positionMax = isVertical
+      ? props.gestureResponseDistance
+      : /**
       * For horizontal scroll views, a distance of 30 from the left of the screen is the
       * standard maximum position to start touch responsiveness.
       */
-      props.gestureResponseDistance || 30;
+        props.gestureResponseDistance || 30;
 
@@ -143,7 +137,3 @@ if (positionMax != null && currentDragPosition > positionMax) {
 
-    return (
-      Math.abs(currentDragDistance) > RESPOND_THRESHOLD &&
-      maxDragDistance > 0 &&
-      index > 0
-    );
+    return Math.abs(currentDragDistance) > RESPOND_THRESHOLD && maxDragDistance > 0 && index > 0;
   }
@@ -169,14 +159,8 @@
     const index = props.navigationState.index;
-    const distance = isVertical ?
-      layout.height.__getValue() :
-      layout.width.__getValue();
-    const currentValue = I18nManager.isRTL && axis === 'dx' ?
-      this._startValue + (gesture[axis] / distance) :
-      this._startValue - (gesture[axis] / distance);
+    const distance = isVertical ? layout.height.__getValue() : layout.width.__getValue();
+    const currentValue = I18nManager.isRTL && axis === 'dx'
+      ? this._startValue + gesture[axis] / distance
+      : this._startValue - gesture[axis] / distance;
 
-    const value = clamp(
-      index - 1,
-      currentValue,
-      index
-    );
+    const value = clamp(index - 1, currentValue, index);
 
@@ -197,5 +181,3 @@ props.position.setValue(value);
     const index = props.navigationState.index;
-    const distance = I18nManager.isRTL && axis === 'dx' ?
-      -gesture[axis] :
-      gesture[axis];
+    const distance = I18nManager.isRTL && axis === 'dx' ? -gesture[axis] : gesture[axis];
 
@@ -209,6 +191,3 @@ props.position.stopAnimation((value: number) => {
 
-      if (
-        distance > DISTANCE_THRESHOLD  ||
-        value <= index - POSITION_THRESHOLD
-      ) {
+      if (distance > DISTANCE_THRESHOLD || value <= index - POSITION_THRESHOLD) {
         props.onNavigateBack();
@@ -226,10 +205,7 @@ }
     const props = this._props;
-    Animated.timing(
-      props.position,
-      {
-        toValue: props.navigationState.index,
-        duration: ANIMATION_DURATION,
-        useNativeDriver: props.position.__isNative,
-      }
-    ).start();
+    Animated.timing(props.position, {
+      toValue: props.navigationState.index,
+      duration: ANIMATION_DURATION,
+      useNativeDriver: props.position.__isNative,
+    }).start();
   }
@@ -250,3 +226,3 @@
   direction: NavigationGestureDirection,
-  props: Props,
+  props: Props
 ): NavigationPanPanHandlers {
@@ -257,11 +233,7 @@ const responder = new NavigationCardStackPanResponder(direction, props);
 
-function forHorizontal(
-  props: Props,
-): NavigationPanPanHandlers {
+function forHorizontal(props: Props): NavigationPanPanHandlers {
   return createPanHandlers(Directions.HORIZONTAL, props);
 }
 
-function forVertical(
-  props: Props,
-): NavigationPanPanHandlers {
+function forVertical(props: Props): NavigationPanPanHandlers {
   return createPanHandlers(Directions.VERTICAL, props);
@@ -268,0 +240,0 @@ }

NavigationExperimentalComponents/NavigationCardStackStyleInterpolator.js

@@ -35,7 +35,5 @@ /**
 
-const I18nManager = require('I18nManager');
+const { I18nManager } = require('react-native');
 
-import type  {
-  NavigationSceneRendererProps,
-} from 'NavigationTypeDefinition';
+import type { NavigationSceneRendererProps } from 'NavigationTypeDefinition';
 
@@ -61,6 +59,3 @@ /**
 function forInitial(props: NavigationSceneRendererProps): Object {
-  const {
-    navigationState,
-    scene,
-  } = props;
+  const { navigationState, scene } = props;
 
@@ -73,6 +68,3 @@ const focused = navigationState.index === scene.index;
     opacity,
-    transform: [
-      { translateX: translate },
-      { translateY: translate },
-    ],
+    transform: [{ translateX: translate }, { translateY: translate }],
   };
@@ -82,7 +74,3 @@ }
 function forHorizontal(props: NavigationSceneRendererProps): Object {
-  const {
-    layout,
-    position,
-    scene,
-  } = props;
+  const { layout, position, scene } = props;
 
@@ -96,7 +84,6 @@ if (!layout.isMeasured) {
   const width = layout.initWidth;
-  const outputRange = I18nManager.isRTL ?
-    ([-width, 0, 10, 10]: Array<number>) :
-    ([width, 0, -10, -10]: Array<number>);
+  const outputRange = I18nManager.isRTL
+    ? ([-width, 0, 10, 10]: Array<number>)
+    : ([width, 0, -10, -10]: Array<number>);
 
-
   const opacity = position.interpolate({
@@ -120,7 +107,3 @@ inputRange,
     opacity,
-    transform: [
-      { scale },
-      { translateX },
-      { translateY },
-    ],
+    transform: [{ scale }, { translateX }, { translateY }],
   };
@@ -130,7 +113,3 @@ }
 function forVertical(props: NavigationSceneRendererProps): Object {
-  const {
-    layout,
-    position,
-    scene,
-  } = props;
+  const { layout, position, scene } = props;
 
@@ -163,7 +142,3 @@ if (!layout.isMeasured) {
     opacity,
-    transform: [
-      { scale },
-      { translateX },
-      { translateY },
-    ],
+    transform: [{ scale }, { translateX }, { translateY }],
   };
@@ -170,0 +145,0 @@ }

NavigationExperimentalComponents/NavigationHeader.js

@@ -35,18 +35,13 @@ /**
 
-const NavigationHeaderBackButton = require('NavigationHeaderBackButton');
-const NavigationHeaderStyleInterpolator = require('NavigationHeaderStyleInterpolator');
-const NavigationHeaderTitle = require('NavigationHeaderTitle');
-const NavigationPropTypes = require('NavigationPropTypes');
-const React = require('React');
-const ReactNative = require('react-native');
-const TVEventHandler = require('TVEventHandler');
+const NavigationHeaderBackButton = require('./NavigationHeaderBackButton');
+const NavigationHeaderStyleInterpolator = require('./NavigationHeaderStyleInterpolator');
+const NavigationHeaderTitle = require('./NavigationHeaderTitle');
+const NavigationPropTypes = require('../NavigationPropTypes');
+import React, { Component } from 'react';
 
-const {
-  Animated,
-  Platform,
-  StyleSheet,
-  View,
-} = ReactNative;
+// const TVEventHandler = require('TVEventHandler');
 
-import type  {
+import { Animated, Platform, StyleSheet, View, TVEventHandler } from 'react-native';
+
+import type {
   NavigationSceneRendererProps,
@@ -83,3 +78,3 @@ NavigationStyleInterpolator,
 const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0;
-const {PropTypes} = React;
+const { PropTypes } = React;
 
@@ -90,3 +85,2 @@ class NavigationHeader extends React.PureComponent<DefaultProps, Props, any> {
   static defaultProps = {
-
     renderTitleComponent: (props: SubViewProps) => {
@@ -101,7 +95,3 @@ const title = String(props.scene.route.title || '');
       }
-      return (
-        <NavigationHeaderBackButton
-          onPress={props.onNavigateBack}
-        />
-      );
+      return <NavigationHeaderBackButton onPress={props.onNavigateBack} />;
     },
@@ -154,3 +144,3 @@
 
-    const barHeight = (this.props.statusBarHeight instanceof Animated.Value)
+    const barHeight = this.props.statusBarHeight instanceof Animated.Value
       ? Animated.add(this.props.statusBarHeight, new Animated.Value(APPBAR_HEIGHT))
@@ -160,9 +150,3 @@ : APPBAR_HEIGHT + this.props.statusBarHeight;
     return (
-      <Animated.View style={[
-          styles.appbar,
-          { height: barHeight },
-          style
-        ]}
-        {...viewProps}
-      >
+      <Animated.View style={[styles.appbar, { height: barHeight }, style]} {...viewProps}>
         {scenesProps.map(this._renderLeft, this)}
@@ -180,3 +164,3 @@ {scenesProps.map(this._renderTitle, this)}
       this.props.renderLeftComponent,
-      NavigationHeaderStyleInterpolator.forLeft,
+      NavigationHeaderStyleInterpolator.forLeft
     );
@@ -190,3 +174,3 @@ };
       this.props.renderTitleComponent,
-      NavigationHeaderStyleInterpolator.forCenter,
+      NavigationHeaderStyleInterpolator.forCenter
     );
@@ -200,3 +184,3 @@ };
       this.props.renderRightComponent,
-      NavigationHeaderStyleInterpolator.forRight,
+      NavigationHeaderStyleInterpolator.forRight
     );
@@ -209,14 +193,7 @@ };
     renderer: SubViewRenderer,
-    styleInterpolator: NavigationStyleInterpolator,
+    styleInterpolator: NavigationStyleInterpolator
   ): ?React.Element<any> {
-    const {
-      scene,
-      navigationState,
-    } = props;
+    const { scene, navigationState } = props;
 
-    const {
-      index,
-      isStale,
-      key,
-    } = scene;
+    const { index, isStale, key } = scene;
 
@@ -231,3 +208,3 @@ const offset = navigationState.index - index;
 
-    const subViewProps = {...props, onNavigateBack: this.props.onNavigateBack};
+    const subViewProps = { ...props, onNavigateBack: this.props.onNavigateBack };
     const subView = renderer(subViewProps);
@@ -243,7 +220,4 @@ if (subView === null) {
         key={name + '_' + key}
-        style={[
-          styles[name],
-          { marginTop: this.props.statusBarHeight },
-          styleInterpolator(props),
-        ]}>
+        style={[styles[name], { marginTop: this.props.statusBarHeight }, styleInterpolator(props)]}
+      >
         {subView}
@@ -257,3 +231,2 @@ </Animated.View>
   static BackButton = NavigationHeaderBackButton;
-
 }
@@ -260,0 +233,0 @@

NavigationExperimentalComponents/NavigationHeaderStyleInterpolator.js

@@ -35,7 +35,5 @@ /**
 
-const I18nManager = require('I18nManager');
+import { I18nManager } from 'react-native';
 
-import type  {
-  NavigationSceneRendererProps,
-} from 'NavigationTypeDefinition';
+import type { NavigationSceneRendererProps } from 'NavigationTypeDefinition';
 
@@ -54,8 +52,8 @@ /**
 function forLeft(props: NavigationSceneRendererProps): Object {
-  const {position, scene} = props;
-  const {index} = scene;
+  const { position, scene } = props;
+  const { index } = scene;
   return {
     opacity: position.interpolate({
-      inputRange: [ index - 1, index, index + 1 ],
-      outputRange: ([ 0, 1, 0 ]: Array<number>),
+      inputRange: [index - 1, index, index + 1],
+      outputRange: ([0, 1, 0]: Array<number>),
     }),
@@ -66,8 +64,8 @@ };
 function forCenter(props: NavigationSceneRendererProps): Object {
-  const {position, scene} = props;
-  const {index} = scene;
+  const { position, scene } = props;
+  const { index } = scene;
   return {
-    opacity:position.interpolate({
-      inputRange: [ index - 1, index, index + 1 ],
-      outputRange: ([ 0, 1, 0 ]: Array<number>),
+    opacity: position.interpolate({
+      inputRange: [index - 1, index, index + 1],
+      outputRange: ([0, 1, 0]: Array<number>),
     }),
@@ -77,8 +75,8 @@ transform: [
         translateX: position.interpolate({
-          inputRange: [ index - 1, index + 1 ],
-          outputRange: I18nManager.isRTL ?
-            ([ -200, 200 ]: Array<number>) :
-            ([ 200, -200 ]: Array<number>),
+          inputRange: [index - 1, index + 1],
+          outputRange: I18nManager.isRTL
+            ? ([-200, 200]: Array<number>)
+            : ([200, -200]: Array<number>),
         }),
-      }
+      },
     ],
@@ -89,8 +87,8 @@ };
 function forRight(props: NavigationSceneRendererProps): Object {
-  const {position, scene} = props;
-  const {index} = scene;
+  const { position, scene } = props;
+  const { index } = scene;
   return {
     opacity: position.interpolate({
-      inputRange: [ index - 1, index, index + 1 ],
-      outputRange: ([ 0, 1, 0 ]: Array<number>),
+      inputRange: [index - 1, index, index + 1],
+      outputRange: ([0, 1, 0]: Array<number>),
     }),
@@ -97,0 +95,0 @@ };

NavigationExperimentalComponents/NavigationPagerPanResponder.js

@@ -14,7 +14,7 @@ /**
 
-const Animated = require('Animated');
-const NavigationAbstractPanResponder = require('NavigationAbstractPanResponder');
-const NavigationCardStackPanResponder = require('NavigationCardStackPanResponder');
-const I18nManager = require('I18nManager');
+const { Animated, I18nManager } = require('react-native');
 
+const NavigationAbstractPanResponder = require('../NavigationAbstractPanResponder');
+const NavigationCardStackPanResponder = require('./NavigationCardStackPanResponder');
+
 const clamp = require('clamp');
@@ -27,5 +27,3 @@
 
-import type {
-  NavigationGestureDirection,
-} from 'NavigationCardStackPanResponder';
+import type { NavigationGestureDirection } from 'NavigationCardStackPanResponder';
 
@@ -73,3 +71,2 @@ type Props = NavigationSceneRendererProps & {
 class NavigationPagerPanResponder extends NavigationAbstractPanResponder {
-
   _isResponding: boolean;
@@ -80,6 +77,3 @@ _isVertical: boolean;
 
-  constructor(
-    direction: NavigationGestureDirection,
-    props: Props,
-  ) {
+  constructor(direction: NavigationGestureDirection, props: Props) {
     super();
@@ -103,11 +97,5 @@ this._isResponding = false;
     const index = props.navigationState.index;
-    const distance = isVertical ?
-      layout.height.__getValue() :
-      layout.width.__getValue();
+    const distance = isVertical ? layout.height.__getValue() : layout.width.__getValue();
 
-    return (
-      Math.abs(gesture[axis]) > RESPOND_THRESHOLD &&
-      distance > 0 &&
-      index >= 0
-    );
+    return Math.abs(gesture[axis]) > RESPOND_THRESHOLD && distance > 0 && index >= 0;
   }
@@ -128,8 +116,3 @@
 
-    const {
-      layout,
-      navigationState,
-      position,
-      scenes,
-    } = this._props;
+    const { layout, navigationState, position, scenes } = this._props;
 
@@ -139,24 +122,12 @@ const isVertical = this._isVertical;
     const index = navigationState.index;
-    const distance = isVertical ?
-      layout.height.__getValue() :
-      layout.width.__getValue();
-    const currentValue = I18nManager.isRTL && axis === 'dx' ?
-      this._startValue + (gesture[axis] / distance) :
-      this._startValue - (gesture[axis] / distance);
+    const distance = isVertical ? layout.height.__getValue() : layout.width.__getValue();
+    const currentValue = I18nManager.isRTL && axis === 'dx'
+      ? this._startValue + gesture[axis] / distance
+      : this._startValue - gesture[axis] / distance;
 
-    const prevIndex = Math.max(
-      0,
-      index - 1,
-    );
+    const prevIndex = Math.max(0, index - 1);
 
-    const nextIndex = Math.min(
-      index + 1,
-      scenes.length - 1,
-    );
+    const nextIndex = Math.min(index + 1, scenes.length - 1);
 
-    const value = clamp(
-      prevIndex,
-      currentValue,
-      nextIndex,
-    );
+    const value = clamp(prevIndex, currentValue, nextIndex);
 
@@ -173,8 +144,3 @@ position.setValue(value);
 
-    const {
-      navigationState,
-      onNavigateBack,
-      onNavigateForward,
-      position,
-    } = this._props;
+    const { navigationState, onNavigateBack, onNavigateForward, position } = this._props;
 
@@ -185,8 +151,6 @@ const isVertical = this._isVertical;
     const index = navigationState.index;
-    const distance = I18nManager.isRTL && axis === 'dx' ?
-      -gesture[axis] :
-      gesture[axis];
-    const moveSpeed = I18nManager.isRTL && velocityAxis === 'vx' ?
-      -gesture[velocityAxis] :
-      gesture[velocityAxis];
+    const distance = I18nManager.isRTL && axis === 'dx' ? -gesture[axis] : gesture[axis];
+    const moveSpeed = I18nManager.isRTL && velocityAxis === 'vx'
+      ? -gesture[velocityAxis]
+      : gesture[velocityAxis];
 
@@ -196,3 +160,3 @@ position.stopAnimation((value: number) => {
       if (
-        distance > DISTANCE_THRESHOLD  ||
+        distance > DISTANCE_THRESHOLD ||
         value <= index - POSITION_THRESHOLD ||
@@ -207,3 +171,3 @@ moveSpeed > VELOCITY_THRESHOLD
         distance < -DISTANCE_THRESHOLD ||
-        value >= index  + POSITION_THRESHOLD ||
+        value >= index + POSITION_THRESHOLD ||
         moveSpeed < -VELOCITY_THRESHOLD
@@ -223,9 +187,6 @@ ) {
     const props = this._props;
-    Animated.timing(
-      props.position,
-      {
-        toValue: props.navigationState.index,
-        duration: ANIMATION_DURATION,
-      }
-    ).start();
+    Animated.timing(props.position, {
+      toValue: props.navigationState.index,
+      duration: ANIMATION_DURATION,
+    }).start();
   }
@@ -236,3 +197,3 @@ }
   direction: NavigationGestureDirection,
-  props: Props,
+  props: Props
 ): NavigationPanPanHandlers {
@@ -243,5 +204,3 @@ const responder = new NavigationPagerPanResponder(direction, props);
 
-function forHorizontal(
-  props: Props,
-): NavigationPanPanHandlers {
+function forHorizontal(props: Props): NavigationPanPanHandlers {
   return createPanHandlers(Directions.HORIZONTAL, props);
@@ -248,0 +207,0 @@ }

NavigationExperimentalComponents/NavigationPagerStyleInterpolator.js

@@ -35,7 +35,5 @@ /**
 
-const I18nManager = require('I18nManager');
+const { I18nManager } = require('react-native');
 
-import type  {
-  NavigationSceneRendererProps,
-} from 'NavigationTypeDefinition';
+import type { NavigationSceneRendererProps } from 'NavigationTypeDefinition';
 
@@ -61,6 +59,3 @@ /**
 function forInitial(props: NavigationSceneRendererProps): Object {
-  const {
-    navigationState,
-    scene,
-  } = props;
+  const { navigationState, scene } = props;
 
@@ -71,9 +66,6 @@ const focused = navigationState.index === scene.index;
   const dir = scene.index > navigationState.index ? 1 : -1;
-  const translate = focused ? 0 : (1000000 * dir);
+  const translate = focused ? 0 : 1000000 * dir;
   return {
     opacity,
-    transform: [
-      { translateX: translate },
-      { translateY: translate },
-    ],
+    transform: [{ translateX: translate }, { translateY: translate }],
   };
@@ -83,7 +75,3 @@ }
 function forHorizontal(props: NavigationSceneRendererProps): Object {
-  const {
-    layout,
-    position,
-    scene,
-  } = props;
+  const { layout, position, scene } = props;
 
@@ -97,5 +85,5 @@ if (!layout.isMeasured) {
   const width = layout.initWidth;
-  const outputRange = I18nManager.isRTL ?
-    ([-width, 0, width]: Array<number>) :
-    ([width, 0, -width]: Array<number>);
+  const outputRange = I18nManager.isRTL
+    ? ([-width, 0, width]: Array<number>)
+    : ([width, 0, -width]: Array<number>);
 
@@ -108,10 +96,6 @@ const translateX = position.interpolate({
   return {
-    opacity : 1,
+    opacity: 1,
     shadowColor: 'transparent',
     shadowRadius: 0,
-    transform: [
-      { scale: 1 },
-      { translateX },
-      { translateY: 0 },
-    ],
+    transform: [{ scale: 1 }, { translateX }, { translateY: 0 }],
   };
@@ -118,0 +102,0 @@ }

NavigationExperimentalComponents/NavigationPointerEventsContainer.js

@@ -35,10 +35,8 @@ /**
 
-const React = require('React');
-const NavigationAnimatedValueSubscription = require('NavigationAnimatedValueSubscription');
+import React from 'react';
+const NavigationAnimatedValueSubscription = require('./NavigationAnimatedValueSubscription');
 
 const invariant = require('fbjs/lib/invariant');
 
-import type  {
-  NavigationSceneRendererProps,
-} from 'NavigationTypeDefinition';
+import type { NavigationSceneRendererProps } from 'NavigationTypeDefinition';
 
@@ -54,11 +52,7 @@ type Props = NavigationSceneRendererProps;
  */
-function create(
-  Component: ReactClass<any>,
-): ReactClass<any> {
-
+function create(Component: ReactClass<any>): ReactClass<any> {
   class Container extends React.Component<any, Props, any> {
-
     _component: any;
     _onComponentRef: (view: any) => void;
-    _onPositionChange: (data: {value: number}) => void;
+    _onPositionChange: (data: { value: number }) => void;
     _pointerEvents: string;
@@ -91,3 +85,3 @@ _positionListener: ?NavigationAnimatedValueSubscription;
 
-    render(): React.Element<any>  {
+    render(): React.Element<any> {
       this._pointerEvents = this._computePointerEvents();
@@ -108,3 +102,3 @@ return (
           typeof component.setNativeProps === 'function',
-          'component must implement method `setNativeProps`',
+          'component must implement method `setNativeProps`'
         );
@@ -116,5 +110,5 @@ }
       this._positionListener && this._positionListener.remove();
-      this._positionListener = new  NavigationAnimatedValueSubscription(
+      this._positionListener = new NavigationAnimatedValueSubscription(
         props.position,
-        this._onPositionChange,
+        this._onPositionChange
       );
@@ -128,3 +122,3 @@ }
           this._pointerEvents = pointerEvents;
-          this._component.setNativeProps({pointerEvents});
+          this._component.setNativeProps({ pointerEvents });
         }
@@ -135,13 +129,7 @@ }
     _computePointerEvents(): string {
-      const {
-        navigationState,
-        position,
-        scene,
-      } = this.props;
+      const { navigationState, position, scene } = this.props;
 
       if (scene.isStale || navigationState.index !== scene.index) {
         // The scene isn't focused.
-        return scene.index > navigationState.index ?
-          'box-only' :
-          'none';
+        return scene.index > navigationState.index ? 'box-only' : 'none';
       }
@@ -160,3 +148,3 @@
   }
-  return  Container;
+  return Container;
 }
@@ -163,0 +151,0 @@

NavigationPropTypes.js

@@ -14,5 +14,3 @@ /**
 
-import type  {
-  NavigationSceneRendererProps,
-} from 'NavigationTypeDefinition';
+import type { NavigationSceneRendererProps } from 'NavigationTypeDefinition';
 
@@ -25,10 +23,9 @@ /**
  */
+const { Animated } = require('react-native');
+import React, { Component } from 'react';
 
-const Animated = require('Animated');
-const React = require('React');
+const { PropTypes } = React;
 
-const {PropTypes} = React;
-
 /* NavigationAction */
-const action =  PropTypes.shape({
+const action = PropTypes.shape({
   type: PropTypes.string.isRequired,
@@ -101,3 +98,3 @@ });
 function extractSceneRendererProps(
-  props: NavigationSceneRendererProps,
+  props: NavigationSceneRendererProps
 ): NavigationSceneRendererProps {
@@ -104,0 +101,0 @@ return {

NavigationTransitioner.js

@@ -13,11 +13,7 @@ /**
 'use strict';
+const { Animated, View, StyleSheet, Easing } = require('react-native');
+import React, { Component } from 'react';
+const NavigationPropTypes = require('./NavigationPropTypes');
+const NavigationScenesReducer = require('./Reducer/NavigationScenesReducer');
 
-const Animated = require('Animated');
-const Easing = require('Easing');
-const NavigationPropTypes = require('NavigationPropTypes');
-const NavigationScenesReducer = require('NavigationScenesReducer');
-const React = require('React');
-const StyleSheet = require('StyleSheet');
-const View = require('View');
-
 const invariant = require('fbjs/lib/invariant');
@@ -37,3 +33,3 @@
     a: NavigationTransitionProps,
-    b: ?NavigationTransitionProps,
+    b: ?NavigationTransitionProps
   ) => NavigationTransitionSpec,
@@ -54,3 +50,3 @@ navigationState: NavigationState,
 
-const {PropTypes} = React;
+const { PropTypes } = React;
 
@@ -135,6 +131,3 @@ const DefaultTransitionSpec = {
 
-    const {
-      position,
-      progress,
-    } = nextState;
+    const { position, progress } = nextState;
 
@@ -147,8 +140,5 @@ progress.setValue(0);
     // get the transition spec.
-    const transitionUserSpec = nextProps.configureTransition ?
-      nextProps.configureTransition(
-        this._transitionProps,
-        this._prevTransitionProps,
-      ) :
-      null;
+    const transitionUserSpec = nextProps.configureTransition
+      ? nextProps.configureTransition(this._transitionProps, this._prevTransitionProps)
+      : null;
 
@@ -160,13 +150,10 @@ const transitionSpec = {
 
-    const {timing} = transitionSpec;
+    const { timing } = transitionSpec;
     delete transitionSpec.timing;
 
     const animations = [
-      timing(
-        progress,
-        {
-          ...transitionSpec,
-          toValue: 1,
-        },
-      ),
+      timing(progress, {
+        ...transitionSpec,
+        toValue: 1,
+      }),
     ];
@@ -176,9 +163,6 @@
       animations.push(
-        timing(
-          position,
-          {
-            ...transitionSpec,
-            toValue: nextProps.navigationState.index,
-          },
-        ),
+        timing(position, {
+          ...transitionSpec,
+          toValue: nextProps.navigationState.index,
+        })
       );
@@ -189,6 +173,4 @@ }
     this.setState(nextState, () => {
-      nextProps.onTransitionStart && nextProps.onTransitionStart(
-        this._transitionProps,
-        this._prevTransitionProps,
-      );
+      nextProps.onTransitionStart &&
+        nextProps.onTransitionStart(this._transitionProps, this._prevTransitionProps);
       Animated.parallel(animations).start(this._onTransitionEnd);
@@ -200,5 +182,3 @@ });
     return (
-      <View
-        onLayout={this._onLayout}
-        style={[styles.main, this.props.style]}>
+      <View onLayout={this._onLayout} style={[styles.main, this.props.style]}>
         {this.props.render(this._transitionProps, this._prevTransitionProps)}
@@ -210,5 +190,4 @@ </View>
   _onLayout(event: any): void {
-    const {height, width} = event.nativeEvent.layout;
-    if (this.state.layout.initWidth === width &&
-      this.state.layout.initHeight === height) {
+    const { height, width } = event.nativeEvent.layout;
+    if (this.state.layout.initWidth === width && this.state.layout.initHeight === height) {
       return;
@@ -251,6 +230,4 @@ }
     this.setState(nextState, () => {
-      this.props.onTransitionEnd && this.props.onTransitionEnd(
-        this._transitionProps,
-        prevTransitionProps,
-      );
+      this.props.onTransitionEnd &&
+        this.props.onTransitionEnd(this._transitionProps, prevTransitionProps);
     });
@@ -260,16 +237,6 @@ }
 
-function buildTransitionProps(
-  props: Props,
-  state: State,
-): NavigationTransitionProps {
-  const {
-    navigationState,
-  } = props;
+function buildTransitionProps(props: Props, state: State): NavigationTransitionProps {
+  const { navigationState } = props;
 
-  const {
-    layout,
-    position,
-    progress,
-    scenes,
-  } = state;
+  const { layout, position, progress, scenes } = state;
 
@@ -286,3 +253,3 @@ const scene = scenes.find(isSceneActive);
     scenes,
-    scene
+    scene,
   };
@@ -289,0 +256,0 @@ }

package.json

 {
   "name": "navigation-experimental-fork",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "NavigationExperimental from RN 0.43.3. Useful when you still depend on it in RN >= 0.44.",
@@ -5,0 +5,0 @@ "main": "NavigationExperimental.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

93918

decreased by-0.95%

Lines of code

2736

decreased by-6.33%

No dependency changes