Merge branch 'master' into hotfix-linting-fixup

# Conflicts:
#	.eslintrc.js
#	src/components/notifications/Notification.tsx
#	src/screens/onboarding/legacy/SocialMedia.tsx
#	src/screens/onboarding/legacy/WaitlistSuccessScreen.tsx
#	src/screens/profile/CategorySelection.tsx

1 files changed, 84 insertions, 0 deletions

diff --git a/src/components/onboarding/UpdateRequired.tsx b/src/components/onboarding/UpdateRequired.tsx
new file mode 100644
index 00000000..93e4e36d
--- /dev/null
+++ b/src/components/onboarding/UpdateRequired.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import {Image, Linking, Modal, StyleSheet, View} from 'react-native';
+import {Text} from 'react-native-animatable';
+import {CenteredView, TaggSquareButton} from '..';
+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={() => {
+              Linking.openURL(
+                'https://apps.apple.com/us/app/tagg-discover-your-community/id1537853613',
+              );
+            }}
+            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;