iOS setup (#253)

* basic working ios setup * fix most of the icons Some icons are still not displayed correctly * fix issues because of smaller screen height * Better way to handle Model overlay with `Model` * fix next icon * try fixing CI * change name to HueHive
croma-app · Sep 29, 2024 · 70fdf38 · 70fdf38
1 parent 599cc4e
commit 70fdf38
Show file tree

Hide file tree

Showing 21 changed files with 3,652 additions and 1,486 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -7,6 +7,15 @@ jobs:
 
     runs-on: ubuntu-latest
     steps:
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '18.x'
+      - name: Setup Latest Yarn
+        uses: threeal/[email protected]
+        with:
+          version: 4.4.1
+          cache: false
+      runs-on: ubuntu-latest
       - uses: actions/checkout@v2
       - name: Install npm dependencies
         run: |

diff --git a/README.md b/README.md
@@ -11,6 +11,9 @@
 - Installation: `yarn`
 - Running on android: `yarn android`
 - Running on ios: `yarn ios`
+#### IOS
+ - https://microsoft.github.io/react-native-windows/docs/rnm-getting-started
+
 
 ### Release
 

diff --git a/components/GridActionButton.js b/components/GridActionButton.js
@@ -7,6 +7,7 @@ import {
   Text,
   Image,
   TouchableOpacity,
+  Platform,
 } from 'react-native';
 import Color from 'pigment/full';
 import RNColorThief from 'react-native-color-thief';
@@ -16,9 +17,8 @@ import { generateRandomColorPalette } from '../libs/ColorHelper';
 import Colors from '../constants/Styles';
 import ActionButtonContainer from './ActionButton';
 import { logEvent } from '../libs/Helpers';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import Evillcon from 'react-native-vector-icons/EvilIcons';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 import { launchImageLibrary } from 'react-native-image-picker';
@@ -116,86 +116,90 @@ const GridActionButtonAndroid = ({ navigation, setPickImageLoading }) => {
     });
     navigation.navigate('ColorList', { colors: randomColors });
   };
+  const actionButtonConfig = [
+    [
+      Platform.OS === 'android'
+        ? {
+            id: 1,
+            icon: <MaterialCommunityIcons name="camera" size={20} />,
+            text1: 'Palette',
+            text2: 'using camera',
+            onPress: async () => {
+              const pickedColors = await NativeModules.CromaModule.navigateToColorPicker();
+              logEvent('hm_pick_text_colors_from_camera', {
+                length: pickedColors.length
+              });
+              navigation.navigate('ColorList', { colors: JSON.parse(pickedColors)?.colors });
+            }
+          }
+        : null, // Camera option not available on iOS
+      {
+        id: 2,
+        icon: <MaterialCommunityIcons name="image" size={20} />,
+        text1: t('Palette'),
+        text2: t('using image'),
+        onPress: handleImagePicker
+      },
+      {
+        id: 3,
+        icon: <MaterialIcons name="palette" size={20} />,
+        text1: t('Palette'),
+        text2: t('using color'),
+        onPress: () => {
+          logEvent('get_palette_from_color');
+          setIsColorPickerVisible(true);
+        }
+      }
+    ].filter(Boolean),
+    [
+      {
+        id: 4,
+        icon: <MaterialCommunityIcons name="shuffle-variant" size={20} />,
+        text1: t('Quick'),
+        text2: t('palette'),
+        onPress: () => {
+          logEvent('generate_random_colors');
+          handleRandomColors();
+        }
+      },
+      {
+        id: 5,
+        icon: <FontAwesome name="magic" size={20} />,
+        text1: t('Palette using'),
+        text2: t('HueHive ai'),
+        onPress: async () => {
+          logEvent('chat_session_action_button');
+          navigation.navigate('ChatSession');
+        }
+      },
+      Platform.OS == 'android' ? (
+      pro.plan !== 'starter'
+        ? {
+            id: 6,
+            icon: <MaterialIcons name="create" size={20} />,
+            text1: t('Create palette'),
+            text2: t(' manually'),
+            onPress: () => {
+              logEvent('create_new_palette');
+              navigation.navigate('SavePalette');
+            }
+          }
+        : {
+            id: 7,
+            icon: <FontAwesome5 name="unlock" size={20} />,
+            text1: t('Unlock'),
+            text2: t('Pro'),
+            onPress: () => {
+              logEvent('home_screen_pro_button');
+              navigation.navigate('ProVersion');
+            }
+          }) : null
+    ].filter(Boolean)
+  ];
   return (
     <>
       <ActionButtonContainer
-        config={[
-          [
-            {
-              id: 1,
-              icon: <Evillcon name="camera" size={20} />,
-              text1: 'Palette',
-              text2: 'using camera',
-              onPress: async () => {
-                const pickedColors = await NativeModules.CromaModule.navigateToColorPicker();
-                logEvent('hm_pick_text_colors_from_camera', {
-                  length: pickedColors.length
-                });
-                navigation.navigate('ColorList', { colors: JSON.parse(pickedColors)?.colors });
-              }
-            },
-            {
-              id: 2,
-              icon: <Evillcon name="image" size={20} />,
-              text1: t('Palette'),
-              text2: t('using image'),
-              onPress: handleImagePicker
-            },
-            {
-              id: 3,
-              icon: <Ionicons name="color-palette-outline" size={20} />,
-              text1: t('Palette'),
-              text2: t('using color'),
-              onPress: () => {
-                logEvent('get_palette_from_color');
-                setIsColorPickerVisible(true);
-              }
-            }
-          ],
-          [
-            {
-              id: 4,
-              icon: <Ionicons name="shuffle" size={20} />,
-              text1: t('Quick'),
-              text2: t('palette'),
-              onPress: () => {
-                logEvent('generate_random_colors');
-                handleRandomColors();
-              }
-            },
-            {
-              id: 5,
-              icon: <FontAwesome name="magic" size={20} />,
-              text1: t('Palette using'),
-              text2: t('HueHive ai'),
-              onPress: async () => {
-                logEvent('chat_session_action_button');
-                navigation.navigate('ChatSession');
-              }
-            },
-            pro.plan != 'starter'
-              ? {
-                  id: 6,
-                  icon: <MaterialIcons name="create" size={20} />,
-                  text1: t('Create palette'),
-                  text2: t(' manully'),
-                  onPress: () => {
-                    logEvent('create_new_palette');
-                    navigation.navigate('SavePalette');
-                  }
-                }
-              : {
-                  id: 7,
-                  icon: <FontAwesome5 name="unlock" size={20} />,
-                  text1: t('Unlock'),
-                  text2: t('Pro'),
-                  onPress: () => {
-                    logEvent('home_screen_pro_button');
-                    navigation.navigate('ProVersion');
-                  }
-                }
-          ]
-        ]}></ActionButtonContainer>
+        config={actionButtonConfig} />
       <Modal
         visible={isColorPickerVisible}
         animationType="slide"
@@ -230,7 +234,7 @@ const GridActionButtonAndroid = ({ navigation, setPickImageLoading }) => {
           }}>
           <View style={styles.modalOverlay}>
             <TouchableWithoutFeedback>
-              <View style={styles.modalContent}>
+              <View style={styles.imageColorPreviewModelContent}>
                 {selectedImage && (
                   <Image source={{ uri: selectedImage.uri }} style={styles.previewImage} />
                 )}
@@ -242,14 +246,14 @@ const GridActionButtonAndroid = ({ navigation, setPickImageLoading }) => {
                     justifyContent: 'space-between',
                     height: 230
                   }}>
-                  <View style={styles.colorPreviewContainer}>
+                  <View style={styles.imageColorPreviewModelContent}>
                     <MultiColorView colors={automaticColors}></MultiColorView>
                   </View>
                   <TouchableOpacity style={styles.nextButton} onPress={handleNext}>
                     <Text style={styles.nextButtonText}>{t('Next')}</Text>
-                    <Ionicons name="arrow-forward" size={24} color={Color.primaryDark} />
+                    <MaterialIcons name="arrow-forward" size={24} color={Color.primaryDark} />
                   </TouchableOpacity>
-                  <View
+                  {Platform.OS == 'android' && (<><View
                     style={{
                       flexDirection: 'row',
                       alignItems: 'center'
@@ -261,7 +265,10 @@ const GridActionButtonAndroid = ({ navigation, setPickImageLoading }) => {
                   <TouchableOpacity style={styles.pickColorsButton} onPress={handlePickColors}>
                     <Text style={styles.pickColorsButtonText}>{t('Pick colors Manually')}</Text>
                   </TouchableOpacity>
+                  </>
+                  )}
                 </View>
+
               </View>
             </TouchableWithoutFeedback>
           </View>
@@ -292,7 +299,7 @@ const styles = {
     position: 'absolute',
     bottom: 0
   },
-  colorPickerModalContent: {
+  imageColorPreviewModelContent: {
     backgroundColor: 'white',
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
@@ -302,9 +309,9 @@ const styles = {
     bottom: 0
   },
   previewImage: {
-    height: 200,
+    height: 150,
     resizeMode: 'contain',
-    marginBottom: 20
+    marginHorizontal: 20,
   },
   colorPreviewContainer: {
     display: 'flex',

diff --git a/ios/.gitignore b/ios/.gitignore
@@ -1,17 +1,50 @@
-# fastlane specific
-fastlane/report.xml
+# Ignore build artifacts
+build/
+DerivedData/
 
-# deliver temporary files
-fastlane/Preview.html
+# Ignore temporary files and folders
+*.xcworkspace
+*.xcuserdata
+*.xcuserstate
+*.xcscmblueprint
+*.swp
+.DS_Store
+
+# Ignore Xcode specific files
+*.pbxuser
+*.mode1v3
+*.mode2v3
+*.perspectivev3
+
+# Ignore CocoaPods directories
+Pods/
+
+# Ignore archives and logs
+*.ipa
+*.dSYM.zip
+*.dSYM
 
-# snapshot generated screenshots
-fastlane/screenshots
+# Ignore Xcode project index and logs
+*.xcdebugger/
+*.xcuserdatad/
+*.xcuserdatad/*
+.xcodeproj/
+.xcschemes/
+
+# Ignore Carthage dependencies if used (optional)
+Carthage/
+
+# Ignore fastlane folder if using fastlane
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots/**/*.png
+fastlane/test_output/
 
-# scan temporary files
-fastlane/test_output
+# Ignore SPM (Swift Package Manager) artifacts
+.swiftpm/
+Package.resolved
 
-# fastlane builds
-builds/*
-*.xcarchive
-*.cer
-*.zip
+# Ignore React Native caches
+node_modules/
+yarn-error.log
+npm-debug.log
diff --git a/ios/.xcode.env.local b/ios/.xcode.env.local
@@ -0,0 +1 @@
+export NODE_BINARY=/Users/kamaljoshi/.nvm/versions/node/v18.19.1/bin/node
diff --git a/ios/Podfile b/ios/Podfile
@@ -14,7 +14,7 @@ if linkage != nil
   use_frameworks! :linkage => linkage.to_sym
 end
 
-target 'HueHive' do
+target 'croma' do
   config = use_native_modules!
 
   use_react_native!(
@@ -23,7 +23,7 @@ target 'HueHive' do
     :app_path => "#{Pod::Config.instance.installation_root}/.."
   )
 
-  target 'HueHiveTests' do
+  target 'cromaTests' do
     inherit! :complete
     # Pods for testing
   end