React upgrade (#127)

* replace code with new npx react-native init command

* rename package name

* add @react-navigation/native as a dependency
* By following https://reactnavigation.org/docs/getting-started/ for version 6.x

* about us page in home screen

* basic working home screen after fixing multiple issues

* basic working screens on ios and android

* use react-native-vector-icons

* run on ios with icons

* basic working side menu

* Google Java Format

* fix palette initilization for ios
* Fix duplicate icons issue on ios build
oblador/react-native-vector-icons#1074 (comment)

* basic header and add all the existing screens

* fix side menu on ios

* fix labels, icons etc

* Google Java Format

* hamburger menu icon

* fix about us screen and improved side menu

* copy android code from old version to this version

* fix android bridge issues

* Google Java Format

* use fastlane to build ios app
* Basic test flight is working and failing with few errors from app store
* Links
https://semaphoreci.com/blog/apps-built-with-react-native-ios
https://thecodingmachine.github.io/react-native-boilerplate/docs/BetaBuild/
https://docs.fastlane.tools/codesigning/getting-started/

* fix NSPhotoLibraryUsageDescription warning from apple

* refactoring and improvements

* color picker from image using color thief

Co-authored-by: github-actions <>

.gitignore

@@ -61,10 +61,10 @@ buck-out/
 # For more information about the recommended setup visit:
 # https://docs.fastlane.tools/best-practices/source-control/
 
-*/fastlane/report.xml
-*/fastlane/Preview.html
-*/fastlane/screenshots
+ios/fastlane1/report.xml
+ios/fastlane1/Preview.html
+ios/fastlane1/screenshots
 
 # Bundle artifact
 *.jsbundle
-localnotes.txt
+localnotes.txt

App.js

@@ -2,97 +2,152 @@ import React, { useEffect, useState } from "react";
 import {
   ActivityIndicator,
   NativeModules,
-  Platform,
   StatusBar,
   StyleSheet,
   View
 } from "react-native";
+import AboutUsScreen from "./screens/AboutUsScreen";
+import ColorPickerScreen from "./screens/ColorPickerScreen";
+import HomeScreen from "./screens/HomeScreen";
 import Colors from "./constants/Colors";
-import {
-  linking,
-  getDrawerNavigator,
-  getStackNavigator
-} from "./navigation/NavigatorHelper";
 import applicationHook, { CromaContext } from "./store/store";
-import ErrorBoundary from "./components/ErrorBoundary";
-import NavigationContainer from "@react-navigation/native/src/NavigationContainer";
+import {NavigationContainer, useNavigationContainerRef} from "@react-navigation/native";
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import ColorDetailsScreen from "./screens/ColorDetailScreen";
+import PalettesScreen from "./screens/PalettesScreen";
+import SavePaletteScreen from "./screens/SavePaletteScreen";
+import AddPaletteManuallyScreen from "./screens/AddPaletteManuallyScreen";
+import ColorListScreen from "./screens/ColorListScreen";
+import PaletteScreen from "./screens/PaletteScreen";
+import ProVersionScreen from "./screens/ProVersionScreen";
+import SyncPalettesScreen from "./screens/SyncPalettesScreen";
+import CommonPalettesScreen from "./screens/CommonPalettesScreen";
+import PaletteLibraryScreen from "./screens/PaletteLibraryScreen";
+import HamburgerMenu from "./components/HamburgerMenu";
+import SideMenu from "react-native-side-menu";
+import {HEADER_HEIGHT} from "./constants/Layout";
+import Touchable from "react-native-platform-touchable";
+import Entypo from "react-native-vector-icons/Entypo";
+const Stack = createNativeStackNavigator();
 
 export default function App() {
   const [isPalettesLoaded, setIsPalettesLoaded] = useState(false);
   const applicationState = applicationHook();
-
+  const [isMenuOpen, setMenu] = useState(false);
+  const navigationRef = useNavigationContainerRef();
   useEffect(() => {
     (async () => {
       await applicationState.loadInitPaletteFromStore();
-      setIsPalettesLoaded(true);
-      if (Platform.OS === "android") {
-        const isFree =
+     setIsPalettesLoaded(true);
+     /* const isFree =
           (await NativeModules.CromaModule.getConfigString("isProFree")) ===
-          "true";
-        if (isFree) {
-          applicationState.setPurchase({
-            platfrom: "android",
-            isProFree: true
-          });
-        }
-      }
-    })();
+          "true";*/
 
-    if (Platform.OS === "web") {
       applicationState.setPurchase({
-        platfrom: "web"
+        platform: "android",
+        isProFree: true
       });
-    }
+
+    })();
   }, []);
 
   const spinner = (
-    <View style={{ flex: 1, marginTop: "20%" }}>
-      <ActivityIndicator size="large" color="#ef635f" animating={true} />
-    </View>
+      <View style={{ flex: 1, marginTop: "20%" }}>
+        <ActivityIndicator size="large" color="#ef635f" animating={true} />
+      </View>
+  );
+  const hamburgerMenuIcon = () => (
+      <Touchable
+          style={{ marginLeft: 8 }}
+          onPress={() => setMenu(!isMenuOpen)}
+      >
+        <Entypo name="menu" style={styles.sideMenuIcon} />
+      </Touchable>
   );
 
   const MainContent = (
     <CromaContext.Provider value={applicationState}>
-      <ErrorBoundary>
+      <SideMenu
+          menu={<HamburgerMenu navigation={navigationRef} toggleSideMenu={() => setMenu(!isMenuOpen)} />}
+          isOpen={isMenuOpen}
+          onChange={isOpen => setMenu(isOpen)}
+      >
         <View style={[styles.container]}>
           <StatusBar
-            barStyle="light-content"
-            // dark-content, light-content and default
-            hidden={false}
-            //To hide statusBar
-            backgroundColor={Colors.primaryDark}
-            //Background color of statusBar only works for Android
-            translucent={false}
-            //allowing light, but not detailed shapes
-            networkActivityIndicatorVisible={true}
+              barStyle="light-content"
+              // dark-content, light-content and default
+              hidden={false}
+              //To hide statusBar
+              backgroundColor={Colors.primaryDark}
+              //Background color of statusBar only works for Android
+              translucent={false}
+              //allowing light, but not detailed shapes
+              networkActivityIndicatorVisible={true}
           />
           <View
-            style={[{ flex: 1, backgroundColor: "transparent" }]}
-            className={"navigation-workplace"}
+              style={[{ flex: 1, backgroundColor: "transparent" }]}
+              className={"navigation-workplace"}
           >
-            <NavigationContainer linking={linking(applicationState)}>
-              {navigator}
+            <NavigationContainer ref={navigationRef}>
+              <Stack.Navigator screenOptions={{
+                ...screenOptions,
+                headerStyle: {
+                  ...screenOptions.headerStyle,
+                  height: HEADER_HEIGHT
+                }
+              }}>
+                <Stack.Screen name="Home" options={() => {
+                  return {
+                    title: "Croma",
+                    headerLeft: () => hamburgerMenuIcon(),
+                    headerTitleContainerStyle: { left: 40 }
+                  };
+                }} component={HomeScreen} />
+                <Stack.Screen name="ColorPicker" options={{title: "Color picker"}} component={ColorPickerScreen} />
+                <Stack.Screen name={"AboutUs"} options={{title: "About us"}} component={AboutUsScreen}/>
+                <Stack.Screen name="ColorDetails" options={{title: "Color details"}}  component={ColorDetailsScreen} />
+                <Stack.Screen name="Palettes" component={PalettesScreen} />
+                <Stack.Screen name="SavePalette" options={{title: "Save palette"}}  component={SavePaletteScreen} />
+                <Stack.Screen name="AddPaletteManually" component={AddPaletteManuallyScreen} />
+                <Stack.Screen name="Palette" component={PaletteScreen} />
+                <Stack.Screen name="ProVersion" component={ProVersionScreen} />
+                <Stack.Screen name="SyncPalettes" options={{ title: "Import/Export your palettes" }} component={SyncPalettesScreen} />
+                <Stack.Screen name="CommonPalettes" component={CommonPalettesScreen} />
+                <Stack.Screen name="PaletteLibrary"  options={{ title: "Palette library" }} component={PaletteLibraryScreen} />
+                <Stack.Screen name="ColorList" options={{ title: "New palette" }} component={ColorListScreen} />
+              </Stack.Navigator>
             </NavigationContainer>
           </View>
         </View>
-      </ErrorBoundary>
+      </SideMenu>
     </CromaContext.Provider>
   );
 
   return !isPalettesLoaded ? spinner : MainContent;
 }
 
-const getNavigator = () => {
-  return Platform.OS === "android" ? getDrawerNavigator() : getStackNavigator();
-};
-
-const navigator = getNavigator();
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: "center",
     backgroundColor: Colors.backgroundColor,
     flexDirection: "row"
+  },
+  sideMenuIcon: {
+    fontSize: 25, height: 25, color: "white", paddingRight: 4
   }
 });
+const screenOptions = {
+  headerStyle: {
+    backgroundColor: Colors.primary,
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    shadowColor: "black",
+    shadowOffset: { height: 3, width: 0 },
+    borderBottomWidth: 0
+  },
+  cardStyle: {
+    backgroundColor: "rgb(242, 242, 242)"
+  },
+  headerTintColor: "#fff"
+};

README.md

@@ -6,9 +6,10 @@
 ![](Croma_web.gif)
 
 ### Installation guide 
-- Installation: `npm install`
-- Runing on web: `npm run web` 
-- Runing on android: `./bundle-and-run-android.sh`
+- Installation: `yarn`
+- Running on android: `yarn android`
+- Running on ios: `yarn ios`
+- Release - // TODO
 
 # references
 
@@ -17,17 +18,6 @@
 - https://github.com/satya164/pigment
 
 
-# Expo commands
-
-`expo start -w` for starting the web version.
-`expo start -w --no-dev` for production version.
-
-### Android
-
-Run locally:
-
-`npm run android`
-
 Build signed apk:
 `cd android`
 `./release.sh`
@@ -61,3 +51,10 @@ Fix java files
 ### [Support us](https://www.buymeacoffee.com/kamalkishor1991) 
 
 
+### Debugging:
+
+To see console log
+From the simulator, press (⌘+D) and press Remote JS Debugging. 
+This will open a resource, http://localhost:8081/debugger-ui on localhost. 
+From there, use the Chrome Developer tools JavaScript console to view console.log
+[Stackoverflow](https://stackoverflow.com/questions/30115372/how-to-do-logging-in-react-native)

__tests__/App-test.js

@@ -0,0 +1,14 @@
+/**
+ * @format
+ */
+
+import 'react-native';
+import React from 'react';
+import App from '../App';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  renderer.create(<App />);
+});

android/.gitignore

@@ -1,95 +1 @@
-# Built application files
-*.apk
-*.aar
-*.ap_
-*.aab
-*nodes_modules*
-app/src/main/assets/index.android.bundle
-# Files for the ART/Dalvik VM
-*.dex
-
-# Java class files
-*.class
-
-# Generated files
-bin/
-gen/
-out/
-#  Uncomment the following line in case you need and you don't have the release build type files in your app
-# release/
-
-# Gradle files
-.gradle/
-build/
-
-# Local configuration file (sdk path, etc)
-local.properties
-
-# Proguard folder generated by Eclipse
-proguard/
-
-# Log Files
-*.log
-
-# Android Studio Navigation editor temp files
-.navigation/
-
-# Android Studio captures folder
-captures/
-
-# IntelliJ
-*.iml
-.idea/workspace.xml
-.idea/tasks.xml
-.idea/gradle.xml
-.idea/assetWizardSettings.xml
-.idea/dictionaries
-.idea/libraries
-# Android Studio 3 in .gitignore file.
-.idea/caches
-.idea/modules.xml
-# Comment next line if keeping position of elements in Navigation Editor is relevant for you
-.idea/navEditor.xml
-
-# Keystore files
-# Uncomment the following lines if you do not want to check your keystore files in.
-#*.jks
-#*.keystore
-
-# External native build folder generated in Android Studio 2.2 and later
-.externalNativeBuild
-.cxx/
-
-# Google Services (e.g. APIs or Firebase)
-google-services.json
-
-# Freeline
-freeline.py
-freeline/
-freeline_project_description.json
-
-# fastlane
-fastlane/report.xml
-fastlane/Preview.html
-fastlane/screenshots
-fastlane/test_output
-fastlane/readme.md
-
-# Version control
-vcs.xml
-
-# lint
-lint/intermediates/
-lint/generated/
-lint/outputs/
-lint/tmp/
-# lint/reports/
-
-
-app/src/main/res/drawable-hdpi/
-app/src/main/res/drawable-mdpi/
-app/src/main/res/drawable-xhdpi/
-app/src/main/res/drawable-xxhdpi/
-app/src/main/res/drawable-xxxhdpi/
-app/src/main/res/raw/
-app/src/main/java/app/croma/generated/BasePackageList.java
+*.hprof