rn-push - npm Package Compare versions

Comparing version 1.0.3 to 2.0.0

index.js

 import React from "react";
-import { View, Animated, ScrollView, Dimensions } from "react-native";
+import { View, Animated, ScrollView, Dimensions, BackHandler } from "react-native";
 
@@ -12,2 +12,16 @@ const window = Dimensions.get("window");
 
+  componentDidMount() {
+    BackHandler.addEventListener('hardwareBackPress', () => {
+
+      if (this.state.show && this.scrollView) {
+        this.scrollView._component.scrollTo({ x: 0 })
+        return true;
+      }
+      return false;
+
+
+    })
+
+  }
+
   static defaultProps = {
@@ -48,4 +62,8 @@ color: "#efefef"
         >
-          {React.cloneElement(this.props.children[0], {
-            push: () => this.setState({ show: true })
+          {React.cloneElement(this.props.children, {
+            push: params => {
+              this.propsToPass = params.passProps;
+              this.component = params.component;
+              this.setState({ show: true });
+            }
           })}
@@ -55,2 +73,4 @@ </Animated.View>
           <Animated.ScrollView
+            keyboardDismissMode={"on-drag"}
+            keyboardShouldPersistTaps
             showsHorizontalScrollIndicator={false}
@@ -69,3 +89,4 @@ onScroll={Animated.event(
             onLayout={() =>
-              this.scrollView._component.scrollTo({ x: window.width })}
+              this.scrollView._component.scrollTo({ x: window.width })
+            }
             scrollEventThrottle={1}
@@ -98,3 +119,4 @@ pagingEnabled={true}
             >
-              {React.cloneElement(this.props.children[1], {
+              {React.createElement(this.component, {
+                ...this.propsToPass,
                 pop: () => this.scrollView._component.scrollTo({ x: 0 })
@@ -101,0 +123,0 @@ })}

package.json

 {
   "name": "rn-push",
-  "version": "1.0.3",
+  "version": "2.0.0",
   "main": "index.js",
@@ -5,0 +5,0 @@ "private": false,

README.md

 # React Native simplest push from right transition
 
-Actually it's just an experiment with scrollview.
+No need to link any native code.
 
-[Try it out on Expo Snack!](https://snack.expo.io/@mikollo/rn-push)
+    <img src="https://thumbs.gfycat.com/DependentForsakenAustraliancurlew-size_restricted.gif" />
 
-
-	<img src="https://thumbs.gfycat.com/DependentForsakenAustraliancurlew-size_restricted.gif" />
-
-
 ## Why would You use this library?
@@ -15,8 +11,14 @@
 2. Gesture handling and animation of the fading view are handled on the main thread
-3. Looks natively on ios and android
+3. Looks nice on ios and android
 
-## Caveats
+## Problem
 
-You might still consider using `NavigatorIOS` because the animation is after all a little bit different - sometimes I think it's worse than in this component and sometimes I think it's better. But the major downside of native navigator is the fact that you can swipe only from the edge and obviously you can't share code with android.
+There are three approaches to handle navigation in React Native app:
 
+1. You can use native components like NavigatorIOS, Wix Navigation etc. - it's hard to customise them though and You have to install native dependencies.
+2. You can write navigation in JS that tries to mimick native navigation - You will inevitebly end up with uncanny valley UX.
+3. You can invent Your custom JS navigation - but it is usually hard to come up with better transitions than default ones on Android and iOS.
+
+This library represents third approach. But it is better than others becuase it uses scrollview as a gesture handler under the hood, which means You don't have to run animations on JS thread.
+
 ## Installation
@@ -26,5 +28,7 @@
 
+`npm install rn-push`
+
 ## Usage
 
-This component takes two children components and allows you to navigate between them 
+This component takes a single children and passes a `push` prop to it. Component that You will push to will receive `pop` prop.
 
@@ -35,7 +39,6 @@ ```js
 function App(props) {
-    // you can pass color prop (default: #efefef)
+  // you can pass color prop (default: #efefef)
   return (
     <Push color="#efefef">
       <Screen />
-      <Screen />
     </Push>
@@ -48,31 +51,24 @@ );
     <View>
-      <Button title="Next" onPress={() => props.push()} />
-      <Button title="Previous" onPress={() => props.pop()} />
+      <Button
+        title="Next"
+        onPress={() =>
+          props.push({
+            component: Screen2,
+            passProps: {
+              title: "Previous"
+            }
+          })
+        }
+      />
     </View>
   );
 }
-```
 
-Example that shows how You can pass props to achieve infinite navigation
-
-```js
-import Push from "rn-push";
-
-function App(props) {
+function Screen2(props) {
   return (
-    <Push>
-      <ViewOne pop={() => props.pop()} />
-      <App />
-    </Push>
-  );
-}
-
-function ViewOne(props) {
-  return (
     <View>
-      <Button title="Next" onPress={() => props.push()} />
-      <Button title="Previous" onPress={() => props.pop()} />
+      <Button title={props.title} onPress={() => props.pop()} />
     </View>
   );
 }
-```
+```

No alert changes

Improved metrics

Total package byte prevSize

5569

increased by12.92%

Lines of code

115

increased by17.35%

Worsened metrics

Number of lines in readme file

71

decreased by-4.05%

No dependency changes