react-native-popover-view - npm Package Compare versions

Comparing version 0.7.1 to 1.0.0

package.json

 {
   "name": "react-native-popover-view",
-  "version": "0.7.1",
+  "version": "1.0.0",
   "description": "A <Popover /> component for react-native",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

@@ -38,6 +38,12 @@ ## react-native-popover-view
 
-## <a name="upgrading" />Upgrading from 0.5.x
+## <a name="upgrading" />Upgrading
 
-Version 0.6 brought some large changes, increasing efficiency, stability, and flexibility.  For React Navigation users, there is a new prop, `showInPopover`, that you might want to pass to `PopoverStackNavigator` if you want to customize when to show stack views in a Popover.  This replaces `PopoverNavigation.shouldShowInPopover`. See the new [setup](#setup) instructions below for details.
+### `0.7` to `1.0`
 
+The only breaking change in version 1.0 was renaming `PopoverStackNavigator` to `createPopoverStackNavigator`, to match the `react-navigation` other navigation functions.
+
+### `0.5` to `0.6`
+
+Version 0.6 brought some large changes, increasing efficiency, stability, and flexibility.  For React Navigation users, there is a new prop, `showInPopover`, that you might want to pass to `createPopoverStackNavigator` if you want to customize when to show stack views in a Popover.  This replaces `PopoverNavigation.shouldShowInPopover`. See the new [setup](#setup) instructions below for details.
+
 ## <a name="demo"/>Demo App
@@ -175,5 +181,5 @@
 
-#### 1) Change `StackNavigator` to `PopoverStackNavigator`
+#### 1) Change `StackNavigator` to `createPopoverStackNavigator`
 
-`PopoverStackNavigator` is a drop-in replacement for react-navigation's `StackNavigator`.  It assumes the first view in your `RouteConfigs` is the base view, and every other view should be shown in a Popover when the `showInPopover` prop is `true` (see step #2).
+`createPopoverStackNavigator` is a drop-in replacement for react-navigation's `StackNavigator`.  It assumes the first view in your `RouteConfigs` is the base view, and every other view should be shown in a Popover when the `showInPopover` prop is `true` (see step #2).
 You can pass a few (optional) per-screen options through your `RouteConfigs` or globally through your `StackNavigatorConfig`:
@@ -194,5 +200,5 @@
 ```jsx
-import Popover, { PopoverStackNavigator } from 'react-native-popover-view';
+import Popover, { createPopoverStackNavigator } from 'react-native-popover-view';
 
-let stack = PopoverStackNavigator({
+let stack = createPopoverStackNavigator({
   BaseView: {
@@ -231,6 +237,6 @@ screen: BaseView,
 
-By default, views will be shown in a Popover view on tablets, and normally on phones.  To override this behavior, you can pass the `showInPopover` prop to the class returned by `PopoverStackNavigator`:
+By default, views will be shown in a Popover view on tablets, and normally on phones.  To override this behavior, you can pass the `showInPopover` prop to the class returned by `createPopoverStackNavigator`:
 
 ```jsx
-let Stack = PopoverStackNavigator(...);
+let Stack = createPopoverStackNavigator(...);
 ...
@@ -255,9 +261,9 @@ render() {
 ```jsx
-<TouchableHighlight ref={ref => PopoverStackNavigator.registerRefForView(ref, 'View1')} {...otherProps} />
+<TouchableHighlight ref={ref => createPopoverStackNavigator.registerRefForView(ref, 'View1')} {...otherProps} />
 ```
-Then, if `View1` is a route name in a `PopoverStackNavigator`...
+Then, if `View1` is a route name in a `createPopoverStackNavigator`...
 ```jsx
 import View1 from './views/View1';
 ...
-let stack = PopoverStackNavigator({
+let stack = createPopoverStackNavigator({
   View1: {
@@ -277,3 +283,3 @@ screen: View1,
 
-Note: The map is stored statically, so you cannot register two views with the same name, even if they are in different `PopoverStackNavigator`'s.  
+Note: The map is stored statically, so you cannot register two views with the same name, even if they are in different `createPopoverStackNavigator`'s.  
 
@@ -296,3 +302,3 @@ ##### II. Send showFromView
 import React, { Component } from 'react';
-import { PopoverStackNavigator } from 'react-native-popover-view';
+import { createPopoverStackNavigator } from 'react-native-popover-view';
 import { MoreHeaderView, ExtraInfoView, MoreOptionView } from './myOtherViews';
@@ -310,3 +316,3 @@ import { Colors } from './Colors';
             style={styles.buttonStyle} 
-            ref={touchable => PopoverStackNavigator.registerRefForView(touchable, 'About')} 
+            ref={touchable => createPopoverStackNavigator.registerRefForView(touchable, 'About')} 
             onPress={() => this.props.navigation.navigate('About')}>
@@ -317,3 +323,3 @@ <Text>About the App</Text>
             style={styles.buttonStyle} 
-            ref={touchable => PopoverStackNavigator.registerRefForView(touchable, 'Settings')} 
+            ref={touchable => createPopoverStackNavigator.registerRefForView(touchable, 'Settings')} 
             onPress={() => this.props.navigation.navigate('Settings')}>
@@ -324,3 +330,3 @@ <Text>Content Settings</Text>
             style={styles.buttonStyle} 
-            ref={touchable => PopoverStackNavigator.registerRefForView(touchable, 'Account')} 
+            ref={touchable => createPopoverStackNavigator.registerRefForView(touchable, 'Account')} 
             onPress={() => this.props.navigation.navigate('Account')}>
@@ -336,3 +342,3 @@ <Text>Account Details</Text>
 
-let MoreStack = PopoverStackNavigator({
+let MoreStack = createPopoverStackNavigator({
   MoreView: {
@@ -402,6 +408,6 @@ screen: MoreView,
 
-By default, Popover's will query RN's `SafeAreaView` to get the allowed display area on the device, and then add a 10pt padding around all the edges, and set this as the display area.  If you want to inject a custum display area to a specific popover, you can do so either through the `PopoverStackNavigator`'s `RouteConfigs` or through params in the `navigate` call:
+By default, Popover's will query RN's `SafeAreaView` to get the allowed display area on the device, and then add a 10pt padding around all the edges, and set this as the display area.  If you want to inject a custum display area to a specific popover, you can do so either through the `createPopoverStackNavigator`'s `RouteConfigs` or through params in the `navigate` call:
 
 ```jsx
-let Stack = PopoverStackNavigator({
+let Stack = createPopoverStackNavigator({
   View1: {
@@ -424,3 +430,3 @@ screen: 'View1',
 
-There may be situations in which you want to show a `Popover` with a custom fromRect, not tied to any view.  Instead of using `PopoverStackNavigator.registerRefForView`, you can pass in a custom `fromRect` as params to the `navigate()` call.  For example:
+There may be situations in which you want to show a `Popover` with a custom fromRect, not tied to any view.  Instead of using `createPopoverStackNavigator.registerRefForView`, you can pass in a custom `fromRect` as params to the `navigate()` call.  For example:
 ```jsx
@@ -427,0 +433,0 @@ import { Rect } from 'react-native-popover-view';

src/index-rn.js

 export { default as default } from './Popover.js'
 export { default as PopoverNavigation } from './PopoverNavigation.js'
-export { default as PopoverStackNavigator, withPopoverNavigation as withPopoverNavigation } from './PopoverStackNavigator.js'
+export { default as createPopoverStackNavigator, withPopoverNavigation as withPopoverNavigation } from './PopoverStackNavigator.js'
 export { Rect as Rect, Size as Size, popoverTransitionConfig as popoverTransitionConfig } from './Utility.js'

src/PopoverNavigation.js

@@ -22,3 +22,3 @@ import Popover from './Popover'
   goBack() {
-    if (this.props.showInPopover())
+    if (this.props.showInPopover)
       this.setState({visible: false});
@@ -47,3 +47,3 @@ else
 
-    if (showInPopover()) {
+    if (showInPopover) {
       return (
@@ -77,3 +77,3 @@ <Popover
   contentContainerStyle: {width: 380},
-  showInPopover: () => true
+  showInPopover: true
 }
@@ -89,5 +89,5 @@
   displayArea: PropTypes.objectOf(PropTypes.number),
-  showInPopover: PropTypes.func,
+  showInPopover: PropTypes.bool,
   popoverStyle: PropTypes.object,
   arrowStyle: PropTypes.object
 }

src/PopoverStackNavigator.js

 /* @flow */
 
+// React Imports
 import * as React from 'react';
+import { NativeModules } from 'react-native';
+
+// Popover Imports
+import { popoverTransitionConfig, isTablet } from './Utility'
+import PopoverNavigation from './PopoverNavigation'
+
+// RN Imports
 import createNavigationContainer from '../../react-navigation/src/createNavigationContainer';
+import StackRouter from '../../react-navigation/src/routers/StackRouter';
+import createKeyboardAwareNavigator from '../../react-navigation/src/navigators/createKeyboardAwareNavigator';
 import createNavigator from '../../react-navigation/src/navigators/createNavigator';
-import CardStackTransitioner from '.../../react-navigation/src/views/CardStack/CardStackTransitioner';
-import StackRouter from '../../react-navigation/src/routers/StackRouter';
+import StackView from '../../react-navigation/src/views/StackView/StackView';
+import StackViewLayout from '../../react-navigation/src/views/StackView/StackViewLayout';
+import Transitioner from '../../react-navigation/src/views/Transitioner';
 import NavigationActions from '../../react-navigation/src/NavigationActions';
-import { popoverTransitionConfig, isTablet } from './Utility'
-import PopoverNavigation from './PopoverNavigation'
+import StackActions from '../../react-navigation/src/routers/StackActions';
+import TransitionConfigs from '../../react-navigation/src/views/StackView/StackViewTransitionConfigs';
 
-export let withPopoverNavigation = (Comp, popoverOptions) => props => <PopoverNavigation {...popoverOptions}><Comp {...props} /></PopoverNavigation>;
+export let withPopoverNavigation = (Comp, popoverOptions) => props => <PopoverNavigation {...popoverOptions} showInPopover={popoverOptions.isFirstView ? false : props.screenProps.showInPopover}><Comp {...props} /></PopoverNavigation>;
 
-const PopoverStackNavigator = (routeConfigMap, stackConfig = {}) => {
+const NativeAnimatedModule =
+  NativeModules && NativeModules.NativeAnimatedModule;
+
+class PopoverStackView extends React.Component {
+  static defaultProps = {
+    navigationConfig: {
+      mode: 'card',
+    },
+  };
+
+  render() {
+    return (
+      <Transitioner
+        render={this._render}
+        configureTransition={this._configureTransition}
+        navigation={this.props.navigation}
+        descriptors={this.props.descriptors}
+        onTransitionStart={this.props.onTransitionStart}
+        onTransitionEnd={(transition, lastTransition) => {
+          const { onTransitionEnd, navigation } = this.props;
+          if (transition.navigation.state.isTransitioning) {
+            navigation.dispatch(
+              StackActions.completeTransition({
+                key: navigation.state.key,
+              })
+            );
+          }
+          onTransitionEnd && onTransitionEnd(transition, lastTransition);
+        }}
+      />
+    );
+  }
+
+  _shouldShowInPopover = () => this.props.screenProps && this.props.screenProps.showInPopover !== undefined
+                                ? this.props.screenProps.showInPopover
+                                : isTablet()
+
+  _configureTransition = (transitionProps, prevTransitionProps) => {
+    return {
+      ...TransitionConfigs.getTransitionConfig(
+        this._shouldShowInPopover() ? popoverTransitionConfig : this.props.navigationConfig.transitionConfig,
+        transitionProps,
+        prevTransitionProps,
+        this.props.navigationConfig.mode === 'modal'
+      ).transitionSpec,
+      useNativeDriver: !!NativeAnimatedModule,
+    };
+  };
+
+  _render = (transitionProps, lastTransitionProps) => {
+    const { screenProps, navigationConfig } = this.props;
+    const { headerMode, cardStyle, transitionConfig, ...remainingNavigationConfig } = navigationConfig;
+    return (
+      <StackViewLayout
+        {...remainingNavigationConfig}
+        headerMode={this._shouldShowInPopover() ? 'screen' : headerMode}
+        cardStyle={this._shouldShowInPopover() ? {...cardStyle, backgroundColor: 'transparent'} : cardStyle}
+        transitionConfig={this._shouldShowInPopover() ? popoverTransitionConfig : transitionConfig}
+        onGestureBegin={this.props.onGestureBegin}
+        onGestureCanceled={this.props.onGestureCanceled}
+        onGestureEnd={this.props.onGestureEnd}
+        screenProps={screenProps}
+        descriptors={this.props.descriptors}
+        transitionProps={transitionProps}
+        lastTransitionProps={lastTransitionProps}
+      />
+    );
+  };
+}
+
+function createPopoverStackNavigator(routeConfigMap, stackConfig = {}) {
   const {
+    initialRouteKey,
     initialRouteName,
     initialRouteParams,
     paths,
-    headerMode,
-    headerTransitionPreset,
-    mode,
-    cardStyle,
-    transitionConfig,
-    onTransitionStart,
-    onTransitionEnd,
     navigationOptions,
+    disableKeyboardHandling,
   } = stackConfig;
 
   const stackRouterConfig = {
+    initialRouteKey,
     initialRouteName,
@@ -42,5 +119,5 @@ initialRouteParams,
   };
-  let shouldShowInPopover = isTablet();
+
   routeKeys.forEach((route, i) => {
-    let getRegisteredView = () => PopoverStackNavigator.registeredViews.hasOwnProperty(route) ? PopoverStackNavigator.registeredViews[route] : null;
+    let getRegisteredView = () => createPopoverStackNavigator.registeredViews.hasOwnProperty(route) ? createPopoverStackNavigator.registeredViews[route] : null;
     newRouteConfigMap[route] = Object.assign({}, 
@@ -53,3 +130,3 @@ routeConfigMap[route],
           {
-            showInPopover: i > 0 ? () => shouldShowInPopover : () => false,
+            isFirstView: i === 0,
             getRegisteredView, 
@@ -68,3 +145,3 @@ backgroundColor: stackConfig.cardStyle ? stackConfig.cardStyle.backgroundColor : (i > 0 ? 'white' : '#E9E9EF')
           }
-          return i > 0 && shouldShowInPopover
+          return i > 0 && ops.screenProps && ops.screenProps.showInPopover
             ? Object.assign({}, additionalNavigationOptions, {header: null})
@@ -79,38 +156,18 @@ : additionalNavigationOptions;
 
-  // Create a navigator with CardStackTransitioner as the view
-  const navigator = createNavigator(
-    router,
-    routeConfigMap,
-    stackConfig
-  )(props => {
-    const { showInPopover, screenProps, ...otherProps } = props;
-    shouldShowInPopover = showInPopover !== undefined ? showInPopover : isTablet();
+  // Create a navigator with StackView as the view
+  let Navigator = createNavigator(PopoverStackView, router, stackConfig);
+  if (!disableKeyboardHandling) {
+    Navigator = createKeyboardAwareNavigator(Navigator);
+  }
 
-    return (
-      <CardStackTransitioner
-        {...otherProps}
-        screenProps={{shouldShowInPopover, ...screenProps}}
-        headerMode={shouldShowInPopover ? 'screen' : headerMode}
-        headerTransitionPreset={headerTransitionPreset}
-        mode={mode}
-        cardStyle={shouldShowInPopover ? {...cardStyle, backgroundColor: 'transparent'} : cardStyle}
-        transitionConfig={shouldShowInPopover ? popoverTransitionConfig : transitionConfig}
-        onTransitionStart={onTransitionStart}
-        onTransitionEnd={(lastTransition, transition) => {
-          const { state, dispatch } = props.navigation;
-          dispatch(NavigationActions.completeTransition({ key: state.key }));
-          onTransitionEnd && onTransitionEnd();
-        }}
-      />
-    )
-  });
+  // HOC to provide the navigation prop for the top-level navigator (when the prop is missing)
+  return createNavigationContainer(Navigator);
+}
 
-  return createNavigationContainer(navigator);
-};
-
-PopoverStackNavigator.registeredViews = {};
-PopoverStackNavigator.registerRefForView = (ref, view) => {
-  PopoverStackNavigator.registeredViews[view] = ref;
+createPopoverStackNavigator.registeredViews = {};
+createPopoverStackNavigator.registerRefForView = (ref, view) => {
+  createPopoverStackNavigator.registeredViews[view] = ref;
 }
 
-export default PopoverStackNavigator;
+export default createPopoverStackNavigator;
+

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2829980

increased by0.09%

Lines of code

2226

increased by2.2%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

444

increased by1.37%

No dependency changes