Implemented react-nativation

hsjoberg · May 30, 2019 · b3f688b · b3f688b
1 parent 7f36597
commit b3f688b
Show file tree

Hide file tree

Showing 16 changed files with 547 additions and 436 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -155,6 +155,7 @@ android {
 }
 
 dependencies {
+    implementation project(':react-native-gesture-handler')
     implementation project(':react-native-linear-gradient')
     implementation project(':react-native-svg')
     implementation project(':react-native-camera')

diff --git a/android/app/src/main/java/com/blixtwallet/MainApplication.java b/android/app/src/main/java/com/blixtwallet/MainApplication.java
@@ -5,6 +5,7 @@
 import android.content.res.Resources;
 
 import com.facebook.react.ReactApplication;
+import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
 import com.BV.LinearGradient.LinearGradientPackage;
 import com.horcrux.svg.SvgPackage;
 import org.reactnative.camera.RNCameraPackage;
@@ -47,6 +48,7 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new RNGestureHandlerPackage(),
             new LinearGradientPackage(),
             new SvgPackage(),
             new RNCameraPackage(),

diff --git a/android/settings.gradle b/android/settings.gradle
@@ -1,4 +1,6 @@
 rootProject.name = 'BlixtWallet'
+include ':react-native-gesture-handler'
+project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
 include ':react-native-linear-gradient'
 project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
 include ':react-native-svg'

diff --git a/ios/BlixtWallet.xcodeproj/project.pbxproj b/ios/BlixtWallet.xcodeproj/project.pbxproj
@@ -61,6 +61,8 @@
 		8F5C59F485294DE78C4682AD /* libRNSVG.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 84AF629C7AF94F1D9891B9F4 /* libRNSVG.a */; };
 		9B8DB826E9AA4AD098650CF1 /* libRNSVG-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 864C077F658945F2B9423169 /* libRNSVG-tvOS.a */; };
 		7DED7AFB4E164378A797A5B0 /* libBVLinearGradient.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 925B9B0240A840D094850571 /* libBVLinearGradient.a */; };
+		53C7915F2CED4D8BBB4A5A15 /* libRNGestureHandler.a in Frameworks */ = {isa = PBXBuildFile; fileRef = C8C15941A7AF4A4BAB3119FD /* libRNGestureHandler.a */; };
+		D6C37E91B4E2488CBD443379 /* libRNGestureHandler-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 4E1903D292C34490BB7DDA93 /* libRNGestureHandler-tvOS.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -393,6 +395,9 @@
 		864C077F658945F2B9423169 /* libRNSVG-tvOS.a */ = {isa = PBXFileReference; name = "libRNSVG-tvOS.a"; path = "libRNSVG-tvOS.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
 		0F339D930FE94467800F11DB /* BVLinearGradient.xcodeproj */ = {isa = PBXFileReference; name = "BVLinearGradient.xcodeproj"; path = "../node_modules/react-native-linear-gradient/BVLinearGradient.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
 		925B9B0240A840D094850571 /* libBVLinearGradient.a */ = {isa = PBXFileReference; name = "libBVLinearGradient.a"; path = "libBVLinearGradient.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
+		D2740324B4F64D5DB98DA6B3 /* RNGestureHandler.xcodeproj */ = {isa = PBXFileReference; name = "RNGestureHandler.xcodeproj"; path = "../node_modules/react-native-gesture-handler/ios/RNGestureHandler.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
+		C8C15941A7AF4A4BAB3119FD /* libRNGestureHandler.a */ = {isa = PBXFileReference; name = "libRNGestureHandler.a"; path = "libRNGestureHandler.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
+		4E1903D292C34490BB7DDA93 /* libRNGestureHandler-tvOS.a */ = {isa = PBXFileReference; name = "libRNGestureHandler-tvOS.a"; path = "libRNGestureHandler-tvOS.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -424,6 +429,7 @@
 				A14A22CD7962466EA3C0E1F2 /* libRNCamera.a in Frameworks */,
 				8F5C59F485294DE78C4682AD /* libRNSVG.a in Frameworks */,
 				7DED7AFB4E164378A797A5B0 /* libBVLinearGradient.a in Frameworks */,
+				53C7915F2CED4D8BBB4A5A15 /* libRNGestureHandler.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -441,6 +447,7 @@
 				2D02E4C71E0B4AEC006451C7 /* libRCTText-tvOS.a in Frameworks */,
 				2D02E4C81E0B4AEC006451C7 /* libRCTWebSocket-tvOS.a in Frameworks */,
 				9B8DB826E9AA4AD098650CF1 /* libRNSVG-tvOS.a in Frameworks */,
+				D6C37E91B4E2488CBD443379 /* libRNGestureHandler-tvOS.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -617,6 +624,7 @@
 				4CBA905A704442CAA4E83FDD /* RNCamera.xcodeproj */,
 				FFE88D4B0499492DAFB408C7 /* RNSVG.xcodeproj */,
 				0F339D930FE94467800F11DB /* BVLinearGradient.xcodeproj */,
+				D2740324B4F64D5DB98DA6B3 /* RNGestureHandler.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -1293,12 +1301,15 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-camera/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-linear-gradient/BVLinearGradient",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 			};
 			name = Debug;
@@ -1324,12 +1335,15 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-camera/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-linear-gradient/BVLinearGradient",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 			};
 			name = Release;
@@ -1355,6 +1369,7 @@
 					"$(SRCROOT)/../node_modules/react-native-camera/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-linear-gradient/BVLinearGradient",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 			};
 			name = Debug;
@@ -1379,6 +1394,7 @@
 					"$(SRCROOT)/../node_modules/react-native-camera/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-linear-gradient/BVLinearGradient",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 			};
 			name = Release;
@@ -1412,12 +1428,15 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-camera/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-linear-gradient/BVLinearGradient",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 			};
 			name = Debug;
@@ -1451,12 +1470,15 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-camera/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-linear-gradient/BVLinearGradient",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 			};
 			name = Release;
@@ -1489,12 +1511,15 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-camera/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-linear-gradient/BVLinearGradient",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 			};
 			name = Debug;
@@ -1527,12 +1552,15 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-camera/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-linear-gradient/BVLinearGradient",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 			};
 			name = Release;

diff --git a/package.json b/package.json
@@ -18,10 +18,12 @@
     "react-native": "0.59.8",
     "react-native-camera": "2.9.0",
     "react-native-easy-grid": "^0.2.1",
+    "react-native-gesture-handler": "^1.2.2",
     "react-native-immersive": "^2.0.0",
     "react-native-linear-gradient": "^2.5.4",
     "react-native-svg": "^9.4.0",
-    "react-native-svg-uri": "^1.2.3"
+    "react-native-svg-uri": "^1.2.3",
+    "react-navigation": "^3.11.0"
   },
   "devDependencies": {
     "@babel/core": "7.4.5",

diff --git a/src/Loader.tsx b/src/Loader.tsx
@@ -2,14 +2,20 @@ import React, { useEffect } from "react";
 import { StyleSheet, StatusBar } from "react-native";
 import { Content, Spinner } from "native-base";
 import { useActions } from "./state/store";
+import { NavigationScreenProp } from "react-navigation";
 
-export default () => {
+interface IProps {
+  navigation: NavigationScreenProp<{}>;
+}
+export default ({ navigation }: IProps) => {
   const initializeLightning = useActions((store) => store.lightning.initialize);
 
   useEffect(() => {
     (async () => {
-      const t = await initializeLightning();
-      console.log(t);
+      const response = await initializeLightning();
+      console.log("initializeLightning() done");
+      console.log(response);
+      navigation.navigate("Main");
     })();
   }, []);
 

diff --git a/src/Main.tsx b/src/Main.tsx
@@ -1,8 +1,5 @@
-import React from "react";
-import { Modal, StyleSheet, View } from "react-native";
-
-import { useActions, useStore } from "./state/store";
-import { EModalWindow } from "./state/Modal";
+import { Animated, Easing } from "react-native";
+import { createBottomTabNavigator, createAppContainer, createStackNavigator, createSwitchNavigator } from "react-navigation";
 
 import Loader from "./Loader";
 import FooterNav from "./components/FooterNav";
@@ -12,82 +9,39 @@ import Receive from "./windows/Receive";
 import Settings from "./windows/Settings";
 import LightningInfo from "./windows/LightningInfo";
 
-interface IModals {
-  key: EModalWindow;
-  component: any;
-  doneCallback: () => void;
-}
-
-export default () => {
-  const activeModal = useStore((state) => state.modal.active);
-  const setActiveModal = useActions((actions) => actions.modal.setActiveModal);
-  const nodeInfo = useStore((store) => store.lightning.nodeInfo);
-  const getBalance = useActions((actions) => actions.lightning.getBalance);
-
-  if (!nodeInfo) {
-    return (<Loader />);
-  }
+const MainStack = createBottomTabNavigator({
+  Overview,
+}, {
+  initialRouteName: "Overview",
+  tabBarComponent: FooterNav,
+});
 
-  const modals: IModals[] = [{
-      key: EModalWindow.Receive,
-      component: Receive,
-      doneCallback() {},
-    }, {
-      key: EModalWindow.Send,
-      component: Send,
-      async doneCallback() {
-        setActiveModal(null);
-        await getBalance();
-      },
-    }, {
-      key: EModalWindow.Settings,
-      component: Settings,
-      doneCallback() {},
-    }, {
-      key: EModalWindow.LightningInfo,
-      component: LightningInfo,
-      doneCallback() {},
+const StackNavigator = createStackNavigator({
+  Main: {
+    screen: MainStack,
+  },
+  Receive,
+  Send,
+  Settings,
+  LightningInfo,
+}, {
+  initialRouteName: "Main",
+  transitionConfig : () => ({
+    transitionSpec: {
+      duration: 0,
+      timing: Animated.timing,
+      easing: Easing.step0,
     },
-  ];
-
-  return (
-    <View style={styles.container}>
-      {modals.map((component, key) => (
-        <Modal
-          key={key}
-          children={
-            <component.component
-              onGoBackCallback={() => setActiveModal(null)}
-              doneCallback={() => { console.log("Done"); component.doneCallback(); }}
-            />
-          }
-          animationType="fade" transparent={false}
-          visible={activeModal === component.key}
-          onRequestClose={() => setActiveModal(null)}
-        />
-      ))}
-
-      <Overview />
-
-      <FooterNav
-        onSendButtonClicked={() => setActiveModal(EModalWindow.Send)}
-        onReceiveButtonClicked={() => setActiveModal(EModalWindow.Receive)}
-      />
-    </View>
-  );
-};
+  }),
+  mode: "modal",
+  headerMode: "none",
+});
 
-const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    height: "100%",
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: "center",
-    margin: 10,
-  },
-  button: {
-    textAlign: "center",
-  },
+const RootStack = createSwitchNavigator({
+  Main: { screen: StackNavigator },
+  Loading: { screen: Loader },
+}, {
+  initialRouteName: "Loading",
 });
+
+export default createAppContainer(RootStack);
diff --git a/src/components/FooterNav.tsx b/src/components/FooterNav.tsx
@@ -1,12 +1,12 @@
 import React from "react";
 import { Button, Footer, FooterTab, Icon, Text } from "native-base";
+import { NavigationScreenProp } from "react-navigation";
 
 interface IProps {
-  onSendButtonClicked: () => void;
-  onReceiveButtonClicked: () => void;
+  navigation: NavigationScreenProp<{}>;
 }
 
-export default ({ onSendButtonClicked, onReceiveButtonClicked }: IProps) => {
+export default ({ onSendButtonClicked, onReceiveButtonClicked, navigation }: IProps) => {
   return (
     <Footer>
       {/*<FooterTab>
@@ -16,7 +16,7 @@ export default ({ onSendButtonClicked, onReceiveButtonClicked }: IProps) => {
         </Button>
       </FooterTab>*/}
       <FooterTab>
-        <Button onPress={onReceiveButtonClicked}>
+        <Button onPress={() => navigation.navigate("Receive")}>
           {/*<Icon type="FontAwesome" name="qrcode" />*/}
           {/*<Icon type="MaterialCommunityIcons" name="qrcode" />*/}
           {/*<Icon type="Ionicons" name="barcode" />*/}
@@ -27,7 +27,7 @@ export default ({ onSendButtonClicked, onReceiveButtonClicked }: IProps) => {
         </Button>
       </FooterTab>
       <FooterTab>
-        <Button onPress={onSendButtonClicked}>
+        <Button onPress={() => navigation.navigate("Send")}>
           {/*<Icon type="FontAwesome" name="send-o" />*/}
           {/*<Icon type="MaterialCommunityIcons" name="camera" />*/}
           {/*<Icon type="Ionicons" name="md-qr-scanner" />*/}