2 files changed, 35 insertions, 0 deletions
diff --git a/src/components/common/GradientBackground.tsx b/src/components/common/GradientBackground.tsx
new file mode 100644
index 00000000..f363bd61
--- /dev/null
+++ b/src/components/common/GradientBackground.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import LinearGradient from 'react-native-linear-gradient';
+import {
+  StyleSheet,
+  TouchableWithoutFeedback,
+  Keyboard,
+  ViewProps,
+  SafeAreaView,
+} from 'react-native';
+
+interface GradientBackgroundProps extends ViewProps {}
+const GradientBackground: React.FC<GradientBackgroundProps> = (props) => {
+  return (
+    <LinearGradient
+      locations={[0.89, 1]}
+      colors={['transparent', 'rgba(0, 0, 0, 0.6)']}
+      style={styles.container}>
+      <TouchableWithoutFeedback accessible={false} onPress={Keyboard.dismiss}>
+        <SafeAreaView {...props}>{props.children}</SafeAreaView>
+      </TouchableWithoutFeedback>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    flex: 1,
+  },
+});
+
+export default GradientBackground;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index d7778f95..a1bcc558 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -3,3 +3,4 @@ export {default as OverlayView} from './OverlayView';
 export {default as RadioCheckbox} from './RadioCheckbox';
 export {default as TaggInput} from './TaggInput';
 export {default as NavigationIcon} from './NavigationIcon';
+export {default as GradientBackground} from './GradientBackground';