Navigation and testing setup

app/.travis.yml

@@ -0,0 +1,14 @@
+language: node_js
+node_js:
+    - 'lts/*'
+install:
+    - git submodule update --init --recursive
+    - yarn install --frozen-lockfile
+script:
+    - npm run test
+cache:
+    yarn: true
+    directories:
+        - node_modules
+notifications:
+    email: false

app/android/app/build.gradle

@@ -138,6 +138,7 @@ android {
 }
 
 dependencies {
+    implementation project(':react-native-gesture-handler')
     implementation fileTree(dir: "libs", include: ["*.jar"])
     implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
     implementation "com.facebook.react:react-native:+"  // From node_modules

app/android/app/src/main/java/com/app/MainActivity.java

@@ -1,6 +1,9 @@
 package com.app;
 
 import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.ReactRootView;
+import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
 
 public class MainActivity extends ReactActivity {
 
@@ -12,4 +15,14 @@ public class MainActivity extends ReactActivity {
     protected String getMainComponentName() {
         return "app";
     }
+
+    @Override
+    protected ReactActivityDelegate createReactActivityDelegate() {
+        return new ReactActivityDelegate(this, getMainComponentName()) {
+            @Override
+            protected ReactRootView createRootView() {
+                return new RNGestureHandlerEnabledRootView(MainActivity.this);
+            }
+        };
+    }
 }

app/android/app/src/main/java/com/app/MainApplication.java

@@ -3,6 +3,7 @@
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage;
@@ -25,7 +26,8 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
         new SQLitePluginPackage(),   // register SQLite Plugin here
-        new MainReactPackage()
+        new MainReactPackage(),
+            new RNGestureHandlerPackage()
       );
     }
 

app/android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'app'
+include ':react-native-gesture-handler'
+project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
 
 include ':app'
 

app/ios/app.xcodeproj/project.pbxproj

@@ -40,6 +40,8 @@
 		ED297163215061F000B7C4FE /* JavaScriptCore.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = ED297162215061F000B7C4FE /* JavaScriptCore.framework */; };
 		ED2971652150620600B7C4FE /* JavaScriptCore.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = ED2971642150620600B7C4FE /* JavaScriptCore.framework */; };
 		999492CD9D124478849E5D8D /* libSQLite.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 78A893EFA88441FF9E6C3C8B /* libSQLite.a */; };
+		0393502E386B47F0BE5B5B6A /* libRNGestureHandler.a in Frameworks */ = {isa = PBXBuildFile; fileRef = B71D08F94C3A47F88AC38E2F /* libRNGestureHandler.a */; };
+		DF41734314674576882027C9 /* libRNGestureHandler-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = C4037B6869D945759F8293FD /* libRNGestureHandler-tvOS.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -349,6 +351,9 @@
 		ED2971642150620600B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = Platforms/AppleTVOS.platform/Developer/SDKs/AppleTVOS12.0.sdk/System/Library/Frameworks/JavaScriptCore.framework; sourceTree = DEVELOPER_DIR; };
 		C84920786E2F47CCAA6497C4 /* SQLite.xcodeproj */ = {isa = PBXFileReference; name = "SQLite.xcodeproj"; path = "../node_modules/react-native-sqlite-storage/src/ios/SQLite.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
 		78A893EFA88441FF9E6C3C8B /* libSQLite.a */ = {isa = PBXFileReference; name = "libSQLite.a"; path = "libSQLite.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
+		75ADCF7C797A43A0B971753F /* 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; };
+		B71D08F94C3A47F88AC38E2F /* libRNGestureHandler.a */ = {isa = PBXFileReference; name = "libRNGestureHandler.a"; path = "libRNGestureHandler.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
+		C4037B6869D945759F8293FD /* 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 */
@@ -378,6 +383,7 @@
 				00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */,
 				139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
 				999492CD9D124478849E5D8D /* libSQLite.a in Frameworks */,
+				0393502E386B47F0BE5B5B6A /* libRNGestureHandler.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -394,6 +400,7 @@
 				2D02E4C61E0B4AEC006451C7 /* libRCTSettings-tvOS.a in Frameworks */,
 				2D02E4C71E0B4AEC006451C7 /* libRCTText-tvOS.a in Frameworks */,
 				2D02E4C81E0B4AEC006451C7 /* libRCTWebSocket-tvOS.a in Frameworks */,
+				DF41734314674576882027C9 /* libRNGestureHandler-tvOS.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -568,6 +575,7 @@
 				00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */,
 				139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
 				C84920786E2F47CCAA6497C4 /* SQLite.xcodeproj */,
+				75ADCF7C797A43A0B971753F /* RNGestureHandler.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -1196,10 +1204,13 @@
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-sqlite-storage/src/ios",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 			};
 			name = Debug;
@@ -1222,10 +1233,13 @@
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-sqlite-storage/src/ios",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 			};
 			name = Release;
@@ -1249,6 +1263,7 @@
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-sqlite-storage/src/ios",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 			};
 			name = Debug;
@@ -1271,6 +1286,7 @@
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-sqlite-storage/src/ios",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 			};
 			name = Release;
@@ -1301,10 +1317,13 @@
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-sqlite-storage/src/ios",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 			};
 			name = Debug;
@@ -1335,10 +1354,13 @@
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-sqlite-storage/src/ios",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 			};
 			name = Release;
@@ -1368,10 +1390,13 @@
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-sqlite-storage/src/ios",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 			};
 			name = Debug;
@@ -1401,10 +1426,13 @@
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-sqlite-storage/src/ios",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 			};
 			name = Release;

app/package.json

@@ -4,7 +4,8 @@
   "private": true,
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
-    "test": "jest",
+    "test": "TS_NODE_PROJECT=tsconfig.mocha.json mocha --require ts-node/register 'src/**/*.test.ts'",
+    "test:watch": "TS_NODE_PROJECT=tsconfig.mocha.json mocha --watch --watch-extensions ts --require ts-node/register 'src/**/*.test.ts'",
     "react-native": "react-native",
     "build:deptree": "depcruise --exclude '^node_modules' --output-type dot ./src | dot -T svg > /tmp/dependencygraph.svg"
   },
@@ -15,17 +16,20 @@
     "randombytes": "^2.1.0",
     "react": "16.8.3",
     "react-native": "0.59.8",
+    "react-native-gesture-handler": "^1.3.0",
     "react-native-knex": "^0.14.5",
     "react-native-sqlite-storage": "^3.3.10",
+    "react-navigation": "^3.11.0",
     "sqlite3": "^4.0.8",
     "typeorm": "^0.2.17",
-    "ui-logic-core": "^0.1.1",
-    "ui-logic-react": "^0.1.2",
+    "ui-logic-core": "^0.1.2",
+    "ui-logic-react": "^0.1.3",
     "user-logic": "^0.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.4.4",
     "@babel/runtime": "^7.4.4",
+    "@types/expect": "^1.20.4",
     "@types/jest": "^24.0.13",
     "@types/node": "^12.0.2",
     "@types/react": "^16.8.18",
@@ -36,9 +40,12 @@
     "babel-plugin-module-alias": "^1.6.0",
     "babel-plugin-module-resolver": "^3.2.0",
     "dependency-cruiser": "^4.21.0",
+    "expect": "^24.8.0",
     "jest": "^24.8.0",
     "metro-react-native-babel-preset": "^0.54.1",
+    "mocha": "^6.1.4",
     "react-test-renderer": "16.8.3",
+    "ts-node": "^8.2.0",
     "typescript": "^3.4.5"
   },
   "jest": {

app/src/features/example/storage/index.test.ts

@@ -1 +1,5 @@
-// Should include unit tests for StorageModule
+import { TodoListStorage } from ".";
+
+describe('Should include unit tests for StorageModule', () => {
+
+})

app/src/features/example/ui/screens/home-screen/index.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Text, View } from 'react-native';
+import { Text, View, Button } from 'react-native';
 import { StatefulUIElement } from 'src/ui/types'
 import Logic, { State, Event } from './logic';
 import styles from './styles'
+import { Services } from 'src/services/types';
 
 interface Props {
-
+    services : Pick<Services, 'navigation'>
 }
 export default class HomeScreen extends StatefulUIElement<Props, State, Event> {
     constructor(props : Props) {
@@ -14,10 +15,14 @@ export default class HomeScreen extends StatefulUIElement<Props, State, Event> {
 
     render() {
         return (
-          <View style={styles.container}>
-            <Text style={styles.welcome}>Welcome to React Native!</Text>
-            <Text style={styles.instructions}>To bla, just bla the bla</Text>
-          </View>
+            <View style={styles.container}>
+                <Text style={styles.welcome}>Welcome to React Native!</Text>
+                <Text style={styles.instructions}>To bla, just bla the bla</Text>
+                <Button
+                    title="Go to another screen"
+                    onPress={() => this.props.services.navigation.goTo('Other')}
+                />
+            </View>
         );
-      }    
+    }
 }

app/src/features/example/ui/screens/home-screen/logic.test.ts

@@ -0,0 +1,7 @@
+import Logic from "./logic";
+
+describe('Home screen logic', () => {
+    it('should pass', () => {
+
+    })
+})

app/src/features/example/ui/screens/other-screen/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { StatefulUIElement } from 'src/ui/types'
+import Logic, { State, Event } from './logic';
+import styles from './styles'
+
+interface Props {
+
+}
+export default class OtherScreen extends StatefulUIElement<Props, State, Event> {
+    constructor(props : Props) {
+        super(props, { logic: new Logic() })
+    }
+
+    render() {
+        return (
+          <View style={styles.container}>
+            <Text style={styles.welcome}>Nothing useful here, just another screen</Text>
+          </View>
+        );
+      }    
+}

app/src/features/example/ui/screens/other-screen/logic.test.ts

@@ -0,0 +1,5 @@
+import Logic from "./logic";
+
+describe('Other screen logic', () => {
+
+})

app/src/features/example/ui/screens/other-screen/logic.ts

@@ -0,0 +1,22 @@
+import { UILogic, UIEvent, IncomingUIEvent, UIMutation } from "ui-logic-core"
+
+export interface State {
+    modified : boolean
+    text : string
+}
+export type Event = UIEvent<{
+    setText : { text : string }
+}>
+
+export default class Logic extends UILogic<State, Event> {
+    getInitialState() {
+        return {
+            modified: false,
+            text: 'Click me!'
+        }
+    }
+
+    setText(incoming : IncomingUIEvent<State, Event, 'setText'>) : UIMutation<State> {
+        return { modified: { $set: true }, text: { $set: incoming.event.text } }
+    }
+}