updated required modal

2 files changed, 81 insertions, 0 deletions

diff --git a/src/screens/onboarding/UpdateRequired.tsx b/src/screens/onboarding/UpdateRequired.tsx
new file mode 100644
index 00000000..17fcc6cf
--- /dev/null
+++ b/src/screens/onboarding/UpdateRequired.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import {Image, Modal, StyleSheet, View} from 'react-native';
+import {Text} from 'react-native-animatable';
+import {CenteredView, TaggSquareButton} from '../../components';
+import {normalize, SCREEN_WIDTH} from '../../utils';
+
+interface UpdateRequiredProps {
+  visible: boolean;
+}
+
+const UpdateRequired: React.FC<UpdateRequiredProps> = ({visible}) => {
+  return (
+    <Modal animationType={'slide'} transparent={true} visible={visible}>
+      <CenteredView>
+        <View style={styles.contentContainer}>
+          <Image
+            style={styles.logo}
+            source={require('../../assets/images/logo-purple.png')}
+          />
+          <Text style={styles.header}>Update Required</Text>
+          <Text style={styles.body}>
+            You have to update your app to continue using Tagg, please download
+            the latest version from the app store
+          </Text>
+          <TaggSquareButton
+            title={'Update'}
+            onPress={() => {}}
+            buttonStyle={'normal'}
+            buttonColor={'purple'}
+            labelColor={'white'}
+            labelStyle={styles.button}
+          />
+        </View>
+      </CenteredView>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    marginTop: '20%',
+    width: SCREEN_WIDTH * 0.9,
+    backgroundColor: 'white',
+    borderRadius: 5,
+    padding: '10%',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  logo: {
+    width: normalize(60),
+    height: normalize(60),
+    marginBottom: '10%',
+  },
+  header: {
+    fontSize: normalize(17),
+    fontWeight: '700',
+    lineHeight: 20,
+    marginBottom: '5%',
+  },
+  body: {
+    fontSize: normalize(13),
+    color: 'grey',
+    lineHeight: 20,
+    textAlign: 'center',
+    width: SCREEN_WIDTH * 0.8,
+    marginBottom: '10%',
+  },
+  button: {
+    fontWeight: '700',
+  },
+});
+
+export default UpdateRequired;
diff --git a/src/screens/onboarding/index.ts b/src/screens/onboarding/index.ts
index 14d0e405..596683e5 100644
--- a/src/screens/onboarding/index.ts
+++ b/src/screens/onboarding/index.ts
@@ -14,3 +14,4 @@ export {default as CategorySelection} from './CategorySelection';
 export {default as AddWaitlistUserScreen} from './AddWaitlistUserScreen';
 export {default as WaitlistSuccessScreen} from './WaitlistSuccessScreen';
 export {default as CreateCustomCategory} from './CreateCustomCategory';
+export {default as UpdateRequired} from './UpdateRequired';