Setup react router native

.flowconfig

@@ -72,4 +72,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.105.0
+^0.107.0

App.js

@@ -7,13 +7,18 @@
  */
 
 import React from 'react';
-import {StyleSheet, View, Text} from 'react-native';
+import {NativeRouter, Route, Switch} from 'react-router-native';
+import Home from './src/screens/Home/Home.js';
 
 const App: () => React$Node = () => {
   return (
-    <View>
-      <Text>hello</Text>
-    </View>
+    <NativeRouter>
+      <Switch>
+        <Route path="/" exact component={Home} />
+        {/* <Route path="/exercise/:workoutType" component={Exercise} />
+        <Route path="/workout/:workoutType" component={Workout} /> */}
+      </Switch>
+    </NativeRouter>
   );
 };
 

android/app/build.gradle

@@ -179,6 +179,7 @@ android {
 }
 
 dependencies {
+    implementation project(':react-native-linear-gradient')
     implementation fileTree(dir: "libs", include: ["*.jar"])
     implementation "com.facebook.react:react-native:+"  // From node_modules
 

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

@@ -4,6 +4,7 @@
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.BV.LinearGradient.LinearGradientPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.soloader.SoLoader;

android/settings.gradle

@@ -1,3 +1,5 @@
 rootProject.name = 'PhysioSpace'
+include ':react-native-linear-gradient'
+project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'

ios/Podfile

@@ -34,6 +34,8 @@ target 'PhysioSpace' do
   pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
   pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
 
+  pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'
+
   target 'PhysioSpaceTests' do
     inherit! :search_paths
     # Pods for testing

ios/Podfile.lock

@@ -1,5 +1,7 @@
 PODS:
   - boost-for-react-native (1.63.0)
+  - BVLinearGradient (2.5.6):
+    - React
   - DoubleConversion (1.1.6)
   - FBLazyVector (0.61.5)
   - FBReactNativeSpec (0.61.5):
@@ -220,6 +222,7 @@ PODS:
   - Yoga (1.14.0)
 
 DEPENDENCIES:
+  - BVLinearGradient (from `../node_modules/react-native-linear-gradient`)
   - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
   - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
   - FBReactNativeSpec (from `../node_modules/react-native/Libraries/FBReactNativeSpec`)
@@ -254,6 +257,8 @@ SPEC REPOS:
     - boost-for-react-native
 
 EXTERNAL SOURCES:
+  BVLinearGradient:
+    :path: "../node_modules/react-native-linear-gradient"
   DoubleConversion:
     :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
   FBLazyVector:
@@ -307,6 +312,7 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
+  BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
   DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
   FBLazyVector: aaeaf388755e4f29cd74acbc9e3b8da6d807c37f
   FBReactNativeSpec: 118d0d177724c2d67f08a59136eb29ef5943ec75
@@ -333,6 +339,6 @@ SPEC CHECKSUMS:
   ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd
   Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b
 
-PODFILE CHECKSUM: 3b838e724ef59f403e6379cb400973cf80e1057c
+PODFILE CHECKSUM: f497d66221d51be3fd926122dbea8cd74f2ebf4d
 
 COCOAPODS: 1.8.4

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "16.9.0",
     "react-native": "0.61.5",
+    "react-native-linear-gradient": "^2.5.6",
     "react-router-native": "^5.1.2"
   },
   "devDependencies": {

src/components/OutlineButton/OutlineButton.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import {TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const OutlineButton = props => {
+  const {content, method} = props;
+  return (
+    <TouchableOpacity
+      style={styles.container}
+      onPress={method}
+      activeOpacity={0.8}>
+      <Text style={styles.text}>{content}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '80%',
+    borderColor: 'white',
+    borderWidth: 4,
+    borderRadius: 5,
+    padding: 15,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 15,
+  },
+  text: {
+    color: 'white',
+    fontSize: 23,
+    fontWeight: '500',
+  },
+});
+
+export default OutlineButton;

src/screens/Home/Home.js

@@ -0,0 +1,56 @@
+import React, {useState} from 'react';
+import {Text, StyleSheet, Image} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import OutlineButton from '../../components/OutlineButton/OutlineButton.js';
+
+import icon from '../../assets/images/icon.png';
+
+const Home: () => React$Node = () => {
+  const [isLoggedIn, setLoggedIn] = useState(false);
+
+  const logIn = () => {
+    setLoggedIn(true);
+  };
+
+  const logOut = () => {
+    setLoggedIn(false);
+  };
+
+  return (
+    <LinearGradient
+      start={{x: 0, y: 0}}
+      end={{x: 1, y: 1}}
+      locations={[0.0, 0.99]}
+      colors={['#11998E', '#38ef7d']}
+      style={styles.container}>
+      <Image source={icon} style={styles.icon} />
+
+      <Text style={styles.appName}>Physio-Space</Text>
+
+      <OutlineButton content="Log In" method={logIn} />
+      <OutlineButton content="Sign Up" method={() => {}} />
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  icon: {
+    width: '40%',
+    height: undefined,
+    aspectRatio: 1,
+  },
+  appName: {
+    color: 'white',
+    fontSize: 40,
+    marginTop: 20,
+    marginBottom: 40,
+  },
+});
+
+export default Home;