Finish rotate screen modals. Refactor buttons location.

TheWidlarzGroup · Jul 22, 2021 · 9419095 · 9419095
1 parent 0e6e3d3
commit 9419095
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 52 deletions.
diff --git a/app/components/Modal/ModalComponent.tsx b/app/components/Modal/ModalComponent.tsx
@@ -7,11 +7,13 @@ import ButtonComponent from '../Button/ButtonComponent';
 
 interface Props {
   hideModal: () => void;
+  hideCloseButton?: boolean;
   style?: StyleProp<ViewStyle>;
 }
 
 const ModalComponent = ({
   hideModal,
+  hideCloseButton,
   style,
   children,
   ...props
@@ -20,11 +22,13 @@ const ModalComponent = ({
     <Modal {...props}>
       <View style={[styles.modal, style]}>
         <Text style={styles.text}>Place for your content</Text>
-        <ButtonComponent
-          title="Close"
-          style={styles.closeButton}
-          onClick={hideModal}
-        />
+        {!hideCloseButton && (
+          <ButtonComponent
+            title="Close"
+            style={styles.closeButton}
+            onClick={hideModal}
+          />
+        )}
         {children}
       </View>
     </Modal>

diff --git a/app/screens/FadeScreen.tsx b/app/screens/FadeScreen.tsx
@@ -1,10 +1,12 @@
 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 FadeScreen = () => {
   const [showFirstModal, setShowFirstModal] = useState(false);
@@ -14,7 +16,10 @@ const FadeScreen = () => {
 
   return (
     <View style={styles.container}>
-      <ButtonComponent onClick={() => setShowFirstModal(true)} />
+      <ButtonComponent
+        onClick={() => setShowFirstModal(true)}
+        style={styles.buttonTopLeft}
+      />
       <ModalComponent
         isVisible={showFirstModal}
         onBackdropPress={() => setShowFirstModal(false)}
@@ -24,7 +29,10 @@ const FadeScreen = () => {
         animationOut="fadeOutUp"
       />
 
-      <ButtonComponent onClick={() => setShowSecondModal(true)} />
+      <ButtonComponent
+        onClick={() => setShowSecondModal(true)}
+        style={styles.buttonTopRight}
+      />
       <ModalComponent
         isVisible={showSecondModal}
         onBackdropPress={() => setShowSecondModal(false)}
@@ -35,7 +43,10 @@ const FadeScreen = () => {
         style={styles.smallModal}
       />
 
-      <ButtonComponent onClick={() => setShowThirdModal(true)} />
+      <ButtonComponent
+        onClick={() => setShowThirdModal(true)}
+        style={styles.buttonBottomLeft}
+      />
       <ModalComponent
         isVisible={showThirdModal}
         onBackdropPress={() => setShowThirdModal(false)}
@@ -46,7 +57,10 @@ const FadeScreen = () => {
         backdropOpacity={1}
       />
 
-      <ButtonComponent onClick={() => setShowFourthModal(true)} />
+      <ButtonComponent
+        onClick={() => setShowFourthModal(true)}
+        style={styles.buttonBottomRight}
+      />
       <ModalComponent
         isVisible={showFourthModal}
         onBackdropPress={() => setShowFourthModal(false)}
@@ -64,8 +78,26 @@ const FadeScreen = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center',
-    justifyContent: 'space-evenly',
+  },
+  buttonTopLeft: {
+    position: 'absolute',
+    top: heigth / 3 - theme.buttons.standardHeight / 2,
+    left: width / 4 - theme.buttons.standardWidth / 2,
+  },
+  buttonTopRight: {
+    position: 'absolute',
+    top: heigth / 3 - theme.buttons.standardHeight / 2,
+    right: width / 4 - theme.buttons.standardWidth / 2,
+  },
+  buttonBottomLeft: {
+    position: 'absolute',
+    top: heigth - heigth / 3 - theme.buttons.standardHeight / 2,
+    left: width / 4 - theme.buttons.standardWidth / 2,
+  },
+  buttonBottomRight: {
+    position: 'absolute',
+    top: heigth - heigth / 3 - theme.buttons.standardHeight / 2,
+    right: width / 4 - theme.buttons.standardWidth / 2,
   },
   smallModal: {
     flex: 1 / 3,

diff --git a/app/screens/RotateScreen.tsx b/app/screens/RotateScreen.tsx
@@ -1,6 +1,5 @@
 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';
@@ -12,52 +11,52 @@ 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
-        style={styles.buttonTopLeft}
-        onClick={() => setShowFirstModal(true)}
-      />
+      <ButtonComponent onClick={() => setShowFirstModal(true)} />
       <ModalComponent
         isVisible={showFirstModal}
         onBackdropPress={() => setShowFirstModal(false)}
         onBackButtonPress={() => setShowFirstModal(false)}
         hideModal={() => setShowFirstModal(false)}
+        animationIn="rotate"
+        animationInTiming={500}
+        animationOut="slideOutRight"
+        backdropOpacity={0.8}
+        backdropTransitionOutTiming={500}
       />
 
-      <ButtonComponent
-        style={styles.buttonTopRight}
-        onClick={() => setShowSecondModal(true)}
-      />
+      <ButtonComponent onClick={() => setShowSecondModal(true)} />
       <ModalComponent
         isVisible={showSecondModal}
+        hideCloseButton
         onBackdropPress={() => setShowSecondModal(false)}
         onBackButtonPress={() => setShowSecondModal(false)}
         hideModal={() => setShowSecondModal(false)}
+        animationIn="rotate"
+        animationInTiming={600}
+        animationOut="slideOutDown"
+        backdropTransitionInTiming={600}
+        backdropOpacity={0.7}
+        style={styles.circleBottomRightModal}
       />
 
-      <ButtonComponent
-        style={styles.buttonBottomLeft}
-        onClick={() => setShowThirdModal(true)}
-      />
+      <ButtonComponent onClick={() => setShowThirdModal(true)} />
       <ModalComponent
         isVisible={showThirdModal}
+        hideCloseButton
         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)}
+        animationIn="rotate"
+        animationInTiming={500}
+        animationOut="rotate"
+        animationOutTiming={500}
+        style={styles.circleCenteredModal}
+        backdropOpacity={1}
+        backdropTransitionInTiming={500}
+        backdropTransitionOutTiming={500}
       />
     </View>
   );
@@ -66,26 +65,24 @@ const RotateScreen = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
   },
-  buttonTopLeft: {
-    position: 'absolute',
-    top: heigth / 3 - theme.buttons.standardHeight / 2,
-    left: width / 4 - theme.buttons.standardWidth / 2,
-  },
-  buttonTopRight: {
-    position: 'absolute',
-    top: heigth / 3 - theme.buttons.standardHeight / 2,
-    right: width / 4 - theme.buttons.standardWidth / 2,
-  },
-  buttonBottomLeft: {
+  circleCenteredModal: {
     position: 'absolute',
-    top: heigth - heigth / 3 - theme.buttons.standardHeight / 2,
-    left: width / 4 - theme.buttons.standardWidth / 2,
+    top: heigth / 2 - 169,
+    left: width / 2 - 169,
+    width: 300,
+    height: 300,
+    borderRadius: 200,
   },
-  buttonBottomRight: {
+  circleBottomRightModal: {
     position: 'absolute',
-    top: heigth - heigth / 3 - theme.buttons.standardHeight / 2,
-    right: width / 4 - theme.buttons.standardWidth / 2,
+    bottom: 0,
+    right: 0,
+    width: 200,
+    height: 200,
+    borderRadius: 200,
   },
 });
 

diff --git a/app/screens/SlideScreen.tsx b/app/screens/SlideScreen.tsx
@@ -66,6 +66,7 @@ const SlideScreen = () => {
         animationInTiming={500}
         animationOut="bounceOutRight"
         animationOutTiming={500}
+        backdropTransitionOutTiming={500}
         backdropOpacity={1}
         style={styles.rightModal}
       />
@@ -82,7 +83,9 @@ const SlideScreen = () => {
         onSwipeComplete={() => setShowFourthModal(false)}
         hideModal={() => setShowFourthModal(false)}
         animationIn="bounceInUp"
+        animationInTiming={500}
         animationOut="bounceOutDown"
+        animationOutTiming={500}
         style={styles.bottomModal}
       />
     </View>