Add custom modal components for every basic screens

TheWidlarzGroup · Jul 22, 2021 · 0a4722a · 0a4722a
1 parent 2ce3ba2
commit 0a4722a
Show file tree

Hide file tree

Showing 6 changed files with 160 additions and 21 deletions.
diff --git a/app/components/Button/ButtonComponent.tsx b/app/components/Button/ButtonComponent.tsx
@@ -10,12 +10,12 @@ import {
 import {theme} from '../../theme/theme';
 
 interface Props {
-  title: string;
+  title?: string;
   style?: StyleProp<ViewStyle>;
   onClick?: () => void;
 }
 
-const ButtonComponent = ({title, style, onClick}: Props) => {
+const ButtonComponent = ({title = 'Modal', style, onClick}: Props) => {
   return (
     <TouchableOpacity onPress={onClick} style={[styles.button, style]}>
       <View>
@@ -29,8 +29,6 @@ const styles = StyleSheet.create({
   button: {
     width: theme.buttons.standardWidth,
     height: theme.buttons.standardHeight,
-    paddingVertical: 5,
-    paddingHorizontal: 10,
     justifyContent: 'center',
     alignItems: 'center',
     borderWidth: 1,

diff --git a/app/screens/ExtraScreen.tsx b/app/screens/ExtraScreen.tsx
@@ -6,8 +6,8 @@ import ButtonComponent from '../components/Button/ButtonComponent';
 const ExtraScreen = () => {
   return (
     <View style={styles.container}>
-      <ButtonComponent title="Modal" />
-      <ButtonComponent title="Modal" />
+      <ButtonComponent />
+      <ButtonComponent />
     </View>
   );
 };

diff --git a/app/screens/FadeScreen.tsx b/app/screens/FadeScreen.tsx
@@ -1,15 +1,48 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {View, StyleSheet} from 'react-native';
 
 import ButtonComponent from '../components/Button/ButtonComponent';
+import ModalComponent from '../components/Modal/ModalComponent';
 
 const FadeScreen = () => {
+  const [showFirstModal, setShowFirstModal] = useState(false);
+  const [showSecondModal, setShowSecondModal] = useState(false);
+  const [showThirdModal, setShowThirdModal] = useState(false);
+  const [showFourthModal, setShowFourthModal] = useState(false);
+
   return (
     <View style={styles.container}>
-      <ButtonComponent title="Modal" />
-      <ButtonComponent title="Modal" />
-      <ButtonComponent title="Modal" />
-      <ButtonComponent title="Modal" />
+      <ButtonComponent onClick={() => setShowFirstModal(true)} />
+      <ModalComponent
+        isVisible={showFirstModal}
+        onBackdropPress={() => setShowFirstModal(false)}
+        onBackButtonPress={() => setShowFirstModal(false)}
+        hideModal={() => setShowFirstModal(false)}
+      />
+
+      <ButtonComponent onClick={() => setShowSecondModal(true)} />
+      <ModalComponent
+        isVisible={showSecondModal}
+        onBackdropPress={() => setShowSecondModal(false)}
+        onBackButtonPress={() => setShowSecondModal(false)}
+        hideModal={() => setShowSecondModal(false)}
+      />
+
+      <ButtonComponent onClick={() => setShowThirdModal(true)} />
+      <ModalComponent
+        isVisible={showThirdModal}
+        onBackdropPress={() => setShowThirdModal(false)}
+        onBackButtonPress={() => setShowThirdModal(false)}
+        hideModal={() => setShowThirdModal(false)}
+      />
+
+      <ButtonComponent onClick={() => setShowFourthModal(true)} />
+      <ModalComponent
+        isVisible={showFourthModal}
+        onBackdropPress={() => setShowFourthModal(false)}
+        onBackButtonPress={() => setShowFourthModal(false)}
+        hideModal={() => setShowFourthModal(false)}
+      />
     </View>
   );
 };

diff --git a/app/screens/RotateScreen.tsx b/app/screens/RotateScreen.tsx
@@ -1,19 +1,64 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {View, StyleSheet, Dimensions} from 'react-native';
 import {theme} from '../theme/theme';
 
 import ButtonComponent from '../components/Button/ButtonComponent';
+import ModalComponent from '../components/Modal/ModalComponent';
 
 const width = Dimensions.get('window').width;
 const heigth = Dimensions.get('window').height;
 
 const RotateScreen = () => {
+  const [showFirstModal, setShowFirstModal] = useState(false);
+  const [showSecondModal, setShowSecondModal] = useState(false);
+  const [showThirdModal, setShowThirdModal] = useState(false);
+  const [showFourthModal, setShowFourthModal] = useState(false);
+
   return (
     <View style={styles.container}>
-      <ButtonComponent title="Modal" style={styles.buttonTopLeft} />
-      <ButtonComponent title="Modal" style={styles.buttonTopRight} />
-      <ButtonComponent title="Modal" style={styles.buttonBottomLeft} />
-      <ButtonComponent title="Modal" style={styles.buttonBottomRight} />
+      <ButtonComponent
+        style={styles.buttonTopLeft}
+        onClick={() => setShowFirstModal(true)}
+      />
+      <ModalComponent
+        isVisible={showFirstModal}
+        onBackdropPress={() => setShowFirstModal(false)}
+        onBackButtonPress={() => setShowFirstModal(false)}
+        hideModal={() => setShowFirstModal(false)}
+      />
+
+      <ButtonComponent
+        style={styles.buttonTopRight}
+        onClick={() => setShowSecondModal(true)}
+      />
+      <ModalComponent
+        isVisible={showSecondModal}
+        onBackdropPress={() => setShowSecondModal(false)}
+        onBackButtonPress={() => setShowSecondModal(false)}
+        hideModal={() => setShowSecondModal(false)}
+      />
+
+      <ButtonComponent
+        style={styles.buttonBottomLeft}
+        onClick={() => setShowThirdModal(true)}
+      />
+      <ModalComponent
+        isVisible={showThirdModal}
+        onBackdropPress={() => setShowThirdModal(false)}
+        onBackButtonPress={() => setShowThirdModal(false)}
+        hideModal={() => setShowThirdModal(false)}
+      />
+
+      <ButtonComponent
+        style={styles.buttonBottomRight}
+        onClick={() => setShowFourthModal(true)}
+      />
+      <ModalComponent
+        isVisible={showFourthModal}
+        onBackdropPress={() => setShowFourthModal(false)}
+        onBackButtonPress={() => setShowFourthModal(false)}
+        hideModal={() => setShowFourthModal(false)}
+      />
     </View>
   );
 };

diff --git a/app/screens/SlideScreen.tsx b/app/screens/SlideScreen.tsx
@@ -1,19 +1,80 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {View, StyleSheet, Dimensions} from 'react-native';
 import {theme} from '../theme/theme';
 
 import ButtonComponent from '../components/Button/ButtonComponent';
+import ModalComponent from '../components/Modal/ModalComponent';
 
 const width = Dimensions.get('window').width;
 const heigth = Dimensions.get('window').height;
 
 const SlideScreen = () => {
+  const [showFirstModal, setShowFirstModal] = useState(false);
+  const [showSecondModal, setShowSecondModal] = useState(false);
+  const [showThirdModal, setShowThirdModal] = useState(false);
+  const [showFourthModal, setShowFourthModal] = useState(false);
+
   return (
     <View style={styles.container}>
-      <ButtonComponent title="Modal" style={styles.buttonTop} />
-      <ButtonComponent title="Modal" style={styles.buttonLeft} />
-      <ButtonComponent title="Modal" style={styles.buttonRight} />
-      <ButtonComponent title="Modal" style={styles.buttonBottom} />
+      <ButtonComponent
+        style={styles.buttonTop}
+        onClick={() => setShowFirstModal(true)}
+      />
+      <ModalComponent
+        isVisible={showFirstModal}
+        onBackdropPress={() => setShowFirstModal(false)}
+        onBackButtonPress={() => setShowFirstModal(false)}
+        swipeDirection="up"
+        onSwipeComplete={() => setShowFirstModal(false)}
+        animationIn="slideInDown"
+        animationOut="slideOutUp"
+        hideModal={() => setShowFirstModal(false)}
+      />
+
+      <ButtonComponent
+        style={styles.buttonLeft}
+        onClick={() => setShowSecondModal(!showSecondModal)}
+      />
+      <ModalComponent
+        isVisible={showSecondModal}
+        onBackdropPress={() => setShowSecondModal(false)}
+        onBackButtonPress={() => setShowSecondModal(false)}
+        swipeDirection="left"
+        onSwipeComplete={() => setShowSecondModal(false)}
+        animationIn="slideInLeft"
+        animationOut="slideOutLeft"
+        hideModal={() => setShowSecondModal(false)}
+      />
+
+      <ButtonComponent
+        style={styles.buttonRight}
+        onClick={() => setShowThirdModal(!showThirdModal)}
+      />
+      <ModalComponent
+        isVisible={showThirdModal}
+        onBackdropPress={() => setShowThirdModal(false)}
+        onBackButtonPress={() => setShowThirdModal(false)}
+        swipeDirection="right"
+        onSwipeComplete={() => setShowThirdModal(false)}
+        animationIn="slideInRight"
+        animationOut="slideOutRight"
+        hideModal={() => setShowThirdModal(false)}
+      />
+
+      <ButtonComponent
+        style={styles.buttonBottom}
+        onClick={() => setShowFourthModal(!showFourthModal)}
+      />
+      <ModalComponent
+        isVisible={showFourthModal}
+        onBackdropPress={() => setShowFourthModal(false)}
+        onBackButtonPress={() => setShowFourthModal(false)}
+        swipeDirection="down"
+        onSwipeComplete={() => setShowFourthModal(false)}
+        animationIn="slideInUp"
+        animationOut="slideOutDown"
+        hideModal={() => setShowFourthModal(false)}
+      />
     </View>
   );
 };

diff --git a/app/theme/theme.ts b/app/theme/theme.ts
@@ -4,7 +4,9 @@ export const theme = {
     black: '#000',
   },
   buttons: {
+    smallWidth: 80,
     standardWidth: 100,
+    smallHeight: 30,
     standardHeight: 40,
   },
   iconSizes: {