fix issues because of smaller screen height

croma-app · Sep 29, 2024 · 446eab2 · 446eab2
1 parent 24eaf1a
commit 446eab2
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 56 deletions.
diff --git a/.gitignore b/.gitignore
@@ -72,4 +72,5 @@ localnotes.txt
 .yarn/cache
 ios/*.cer
 ios/croma.app.*.zip
-.yarn/install-state.gz
+.yarn/install-state.gz
+ios/Pods
diff --git a/App.js b/App.js
@@ -4,6 +4,8 @@ import ApplicationRoot from './ApplicationRoot';
 import { withIAPContext } from 'react-native-iap';
 import useUserData from './hooks/useUserData';
 import Colors from './constants/Styles';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
 
 const App = () => {
   const { loadUserData } = useUserData();
@@ -14,14 +16,16 @@ const App = () => {
 
   return (
     <>
-      <StatusBar
-        barStyle="light-content"
-        hidden={false}
-        backgroundColor={Colors.primaryDark}
-        translucent={false}
-        networkActivityIndicatorVisible={true}
-      />
-      <ApplicationRoot />
+      <SafeAreaProvider>
+        <StatusBar
+          barStyle="light-content"
+          hidden={false}
+          backgroundColor={Colors.primaryDark}
+          translucent={false}
+          networkActivityIndicatorVisible={true}
+        />
+        <ApplicationRoot />
+      </SafeAreaProvider>
     </>
   );
 };

diff --git a/components/ActionButton.js b/components/ActionButton.js
@@ -4,6 +4,7 @@ import AntDesign from 'react-native-vector-icons/AntDesign';
 import { useHeaderHeight } from '@react-navigation/elements';
 import Colors, { Spacing } from '../constants/Styles';
 import * as Animatable from 'react-native-animatable';
+import FloatingActionButton from './FloatingActionButton';
 
 const VerticalLine = () => <View style={styles.verticalLine} />;
 
@@ -25,9 +26,11 @@ const ActionButtonContainer = ({ config }) => {
   const headerHeight = useHeaderHeight();
   const screenHeight = Dimensions.get('window').height;
 
+  const availableHeight = screenHeight - headerHeight - 56; // TODO: Find a better way to calculate available height. This is a hack for quick fix.
+
   return active ? (
     <TouchableOpacity
-      style={[styles.actionButtonContainer, { height: screenHeight - headerHeight }]}
+      style={[styles.actionButtonContainer, { height: availableHeight }]}
       onPress={() => setActive(false)}>
       <View style={[styles.actionButton, styles.actionButtonClose]}>
         <Animatable.View duration={300} animation={rotateAnimation}>
@@ -57,13 +60,14 @@ const ActionButtonContainer = ({ config }) => {
         ))}
       </Animatable.View>
     </TouchableOpacity>
-  ) : (
-    <TouchableOpacity
-      onPress={() => setActive(true)}
-      style={[styles.actionButton, styles.actionButtonOpen]}>
-      <AntDesign name="plus" color="#fff" size={24} />
-    </TouchableOpacity>
-  );
+  ) : 
+    (
+      <FloatingActionButton
+      onPress={() => {
+        setActive(true);
+      }} /> 
+    );
+
 };
 
 const styles = StyleSheet.create({
@@ -89,18 +93,6 @@ const styles = StyleSheet.create({
     width: 56,
     height: 56
   },
-  actionButtonOpen: {
-    position: 'absolute',
-    bottom: 40,
-    right: 30,
-    backgroundColor: Colors.primary,
-    zIndex: 2,
-    elevation: 5,
-    shadowColor: Colors.black,
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.8,
-    shadowRadius: 1
-  },
   actionButtonClose: {
     alignSelf: 'flex-end',
     marginBottom: 20,

diff --git a/components/ColorDetails.js b/components/ColorDetails.js
@@ -96,7 +96,7 @@ const styles = StyleSheet.create({
   },
   info: {
     flexDirection: 'row',
-    padding: 10,
+    padding: 8,
     alignItems: 'center',
     borderBottomWidth: 1,
     borderBottomColor: '#ddd'

diff --git a/components/FloatingActionButton.js b/components/FloatingActionButton.js
@@ -17,7 +17,7 @@ const styles = StyleSheet.create({
   button: {
     position: 'absolute',
     right: 30,
-    bottom: 40,
+    bottom: 96,
     width: 56,
     height: 56,
     borderRadius: 28,

diff --git a/components/GridActionButton.js b/components/GridActionButton.js
@@ -29,6 +29,7 @@ import ColorPickerModal from './ColorPickerModal';
 import useApplicationStore from '../hooks/useApplicationStore';
 import MultiColorView from './MultiColorView';
 
+
 const GridActionButtonAndroid = ({ navigation, setPickImageLoading }) => {
   const { t } = useTranslation();
   const [isColorPickerVisible, setIsColorPickerVisible] = React.useState(false);
@@ -280,7 +281,7 @@ export default GridActionButtonAndroid;
 
 const styles = {
   modalOverlay: {
-    height: Dimensions.get('window').height,
+    height: Dimensions.get('window').height - 56,
     backgroundColor: Colors.overlay,
     justifyContent: 'flex-end'
   },

diff --git a/screens/PaletteViewScreen.js b/screens/PaletteViewScreen.js
@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React, { useEffect, useLayoutEffect, useState } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
 import MultiColorView from '../components/MultiColorView';
 import { Spacing } from '../constants/Styles';
 import { logEvent } from '../libs/Helpers';
@@ -10,6 +10,8 @@ import { ColorDetailItems } from '../components/ColorDetails';
 import Colors from '../constants/Styles';
 import CromaButton from '../components/CromaButton';
 import { useTranslation } from 'react-i18next';
+import { ScrollView } from 'react-native-gesture-handler';
+import Spacer from '../components/Spacer';
 export default function PaletteViewScreen({ navigation, route }) {
   const { allPalettes, pro } = useApplicationStore();
   const { t } = useTranslation();
@@ -44,33 +46,32 @@ export default function PaletteViewScreen({ navigation, route }) {
   };
 
   return (
-    <>
-      <View style={styles.container}>
-        <View
-          style={{
-            flexDirection: 'column',
-            padding: 6,
-            backgroundColor: Colors.white,
-            borderRadius: 8,
-            marginTop: 8
-          }}>
-          <View style={backgroundColor}></View>
-          <ColorDetailItems colorName={colorName} color={color} />
-          <View style={{ paddingTop: 8 }}>
-            <MultiColorView
-              colors={colorsToShow}
-              selectedColor={selectedColor}
-              setSelectedColor={setSelectedColor}></MultiColorView>
-          </View>
+      <><ScrollView style={styles.container}>
+      <View
+        style={{
+          flexDirection: 'column',
+          padding: 6,
+          backgroundColor: Colors.white,
+          borderRadius: 8,
+          marginTop: 8
+        }}>
+        <View style={backgroundColor}></View>
+        <ColorDetailItems colorName={colorName} color={color} />
+        <View style={{ paddingTop: 8 }}>
+          <MultiColorView
+            colors={colorsToShow}
+            selectedColor={selectedColor}
+            setSelectedColor={setSelectedColor}></MultiColorView>
         </View>
       </View>
-      <View style={styles.buttonsContainer}>
+      <Spacer />
+    </ScrollView><View style={styles.buttonsContainer}>
         <CromaButton
           textStyle={{ color: Colors.primary }}
           style={styles.buttonSecondary}
           onPress={() => {
             navigation.navigate('Palettes', { hexColor: color });
-          }}>
+          } }>
           <View style={{ alignItems: 'center' }}>
             <Text style={{ fontSize: 14 }}>{t('Generate Palettes')}</Text>
             <Text style={{ fontSize: 8, color: Colors.grey, textAlign: 'center' }}>
@@ -84,11 +85,11 @@ export default function PaletteViewScreen({ navigation, route }) {
           style={styles.buttonPrimary}
           onPress={() => {
             navigation.navigate('PaletteEdit', { paletteId });
-          }}>
+          } }>
           {t('Edit')}
         </CromaButton>
-      </View>
-    </>
+      </View></>
+
   );
 }