Add navigation

TheWidlarzGroup · Mar 30, 2020 · f6c6158 · f6c6158
1 parent 4552b45
commit f6c6158
Show file tree

Hide file tree

Showing 8 changed files with 211 additions and 338 deletions.
diff --git a/App.tsx b/App.tsx
@@ -7,7 +7,7 @@
  *
  * @format
  */
-import 'react-native-gesture-handler';
+
 import React from 'react';
 import {StatusBar, SafeAreaView, StyleSheet} from 'react-native';
 import {ApplicationProvider, Layout} from '@ui-kitten/components';

diff --git a/index.js b/index.js
@@ -1,7 +1,7 @@
 /**
  * @format
  */
-
+import 'react-native-gesture-handler';
 import {AppRegistry} from 'react-native';
 import App from './App';
 import {name as appName} from './app.json';

diff --git a/src/components/FormWrapper.tsx b/src/components/FormWrapper.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import {View, StyleSheet, KeyboardAvoidingView, ScrollView} from 'react-native';
+import {theme} from '../utils/Theme';
+import {Layout, Text, Button} from '@ui-kitten/components';
+
+interface Props {
+  backBtnAction: () => void;
+  nextBtnAction: () => void;
+  children: React.ReactChild;
+  title: string;
+}
+
+const FormWrapper = ({
+  backBtnAction,
+  nextBtnAction,
+  children,
+  title,
+}: Props) => {
+  return (
+    <Layout style={styles.container}>
+      <Text style={styles.title} category="h2">
+        {title}
+      </Text>
+      <KeyboardAvoidingView
+        keyboardVerticalOffset={theme.spacing.value * 4}
+        style={[styles.container]}
+        behavior="height">
+        <View style={styles.top}>
+          <ScrollView showsVerticalScrollIndicator={false}>
+            <View style={styles.form}>{children}</View>
+          </ScrollView>
+        </View>
+        <View style={styles.bottom}>
+          <Button
+            style={styles.next}
+            size="medium"
+            appearance="ghost"
+            status="basic"
+            onPress={backBtnAction}>
+            Back
+          </Button>
+          <Button
+            style={styles.next}
+            size="medium"
+            appearance="outline"
+            status="success"
+            onPress={nextBtnAction}>
+            Next
+          </Button>
+        </View>
+      </KeyboardAvoidingView>
+    </Layout>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  title: {
+    paddingHorizontal: theme.spacing.value * 2,
+    paddingTop: theme.spacing.value * 2,
+  },
+  top: {
+    flex: 20,
+    width: '100%',
+    paddingHorizontal: theme.spacing.value * 2,
+  },
+  bottom: {
+    flex: 2,
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: theme.spacing.value * 2,
+    backgroundColor: 'transparent',
+    position: 'absolute',
+    bottom: 0,
+    paddingBottom: 20,
+  },
+  form: {
+    marginTop: theme.spacing.value * 4,
+  },
+  next: {
+    alignSelf: 'flex-end',
+  },
+  prev: {
+    alignSelf: 'flex-start',
+  },
+});
+
+export default FormWrapper;
diff --git a/src/screens/FormAddress.tsx b/src/screens/FormAddress.tsx
@@ -1,8 +1,9 @@
 import React, {useCallback} from 'react';
-import {StyleSheet, View, KeyboardAvoidingView, ScrollView} from 'react-native';
-import {Layout, Text, Button, Input} from '@ui-kitten/components';
+import {StyleSheet} from 'react-native';
+import {Input} from '@ui-kitten/components';
 import {theme} from '../utils/Theme';
 import {useNavigation} from '@react-navigation/native';
+import FormWrapper from '../components/FormWrapper';
 
 const FormAddress = () => {
   const {goBack, navigate} = useNavigation();
@@ -11,109 +12,45 @@ const FormAddress = () => {
   const goNext = useCallback(() => navigate('FormPayment'), [navigate]);
 
   return (
-    <>
-      <Layout style={styles.container}>
-        <Text style={styles.title} category="h2">
-          Address
-        </Text>
-        <KeyboardAvoidingView
-          keyboardVerticalOffset={theme.spacing.value * 4}
-          style={[styles.container]}
-          behavior="height">
-          <View style={styles.top}>
-            <ScrollView showsVerticalScrollIndicator={false}>
-              <View style={styles.form}>
-                <Input
-                  style={styles.input}
-                  label="Street"
-                  value=""
-                  placeholder="18th Dev Avenue"
-                  onChangeText={() => null}
-                />
-                <Input
-                  style={styles.input}
-                  label="City"
-                  value=""
-                  placeholder="South Dev City"
-                  onChangeText={() => null}
-                />
-                <Input
-                  style={styles.input}
-                  label="Post code"
-                  value=""
-                  placeholder="9932"
-                  onChangeText={() => null}
-                />
-                <Input
-                  style={styles.input}
-                  label="Country"
-                  value=""
-                  placeholder="Devland"
-                  onChangeText={() => null}
-                />
-              </View>
-            </ScrollView>
-          </View>
-          <View style={styles.bottom}>
-            <Button
-              style={styles.next}
-              size="medium"
-              appearance="ghost"
-              status="basic"
-              onPress={backBtn}>
-              Back
-            </Button>
-            <Button
-              style={styles.next}
-              size="medium"
-              appearance="outline"
-              status="success"
-              onPress={goNext}>
-              Next
-            </Button>
-          </View>
-        </KeyboardAvoidingView>
-      </Layout>
-    </>
+    <FormWrapper title="Address" backBtnAction={backBtn} nextBtnAction={goNext}>
+      <>
+        <Input
+          style={styles.input}
+          label="Street"
+          value=""
+          placeholder="18th Dev Avenue"
+          onChangeText={() => null}
+        />
+        <Input
+          style={styles.input}
+          label="City"
+          value=""
+          placeholder="South Dev City"
+          onChangeText={() => null}
+        />
+        <Input
+          style={styles.input}
+          label="Post code"
+          value=""
+          placeholder="9932"
+          onChangeText={() => null}
+        />
+        <Input
+          style={styles.input}
+          label="Country"
+          value=""
+          placeholder="Devland"
+          onChangeText={() => null}
+        />
+      </>
+    </FormWrapper>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  title: {
-    paddingHorizontal: theme.spacing.value * 2,
-    paddingTop: theme.spacing.value * 2,
-  },
-  top: {
-    flex: 20,
-    width: '100%',
-    paddingHorizontal: theme.spacing.value * 2,
-  },
-  bottom: {
-    flex: 2,
-    width: '100%',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingHorizontal: theme.spacing.value * 2,
-    backgroundColor: 'transparent',
-    position: 'absolute',
-    bottom: 0,
-    paddingBottom: 20,
-  },
-  form: {
-    marginTop: theme.spacing.value * 4,
-  },
   input: {
     marginBottom: theme.spacing.value * 2,
   },
-  next: {
-    alignSelf: 'flex-end',
-  },
-  prev: {
-    alignSelf: 'flex-start',
-  },
 });
 
 export default FormAddress;