fix crash native module

README.md

@@ -8,12 +8,13 @@
 
 - Elegant usage directly within the RN-Boiler Cli
 - Fastlane (App center included)
+- Lefthook
 - Boot Splash
 - Blur Hash
+- Declare String, Number, Array
 - Consistent with the default React Native template
 - Minimal additional dependencies
 - Lots of built-in components
-- Native modules
 - Multiple schema ios(Dev/Prod as default)
 - Multiple productFlavors android (dev/prod as default)
 
@@ -63,7 +64,7 @@ Args command:
 - [axios](https://axios-http.com)
 - [react-hook-form](https://www.react-hook-form.com)
 - [react-native-mmkv](https://github.com/mrousavy/react-native-mmkv)
-- [yup](https://github.com/jquense/yup)
+- [zod](https://github.com/colinhacks/zod)
 - [react-native-bootsplash](https://github.com/zoontek/react-native-bootsplash)
 - [react-native-reanimated-v2](https://github.com/software-mansion/react-native-reanimated#readme)
 - [redux](http://redux.js.org)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-boiler-template",
-  "version": "1.70.21",
+  "version": "1.70.22",
   "description": "Clean and minimalist React Native template for a quick start with TypeScript and components",
   "scripts": {
     "test": "exit 0"

template/_babelrc

@@ -14,7 +14,6 @@
           "@common": "./src/app/common",
           "@hooks": "./src/app/common/hooks",
           "@validate": "./src/app/common/yup-validate",
-          "@native-module": "./src/app/common/native-module",
           "@listener": "./src/app/common/redux/listener.ts",
           "@animated": "./src/app/common/animated",
           "@config": "./src/app/config",

template/src/app/common/animated/transition.ts

@@ -18,8 +18,9 @@ import { sharedBin } from './math';
 export const useSharedTransition = (
   state: boolean | number,
   config?: WithTimingConfig,
+  initialValue?: number,
 ): Animated.SharedValue<number> => {
-  const value = useSharedValue(0);
+  const value = useSharedValue(initialValue ?? 0);
   useEffect(() => {
     value.value = typeof state === 'boolean' ? sharedBin(state) : state;
   }, [state, value]);
@@ -40,8 +41,9 @@ export const useSharedTransition = (
 export const useSharedSpringTransition = (
   state: boolean,
   config?: WithSpringConfig,
+  initialValue?: number,
 ): Animated.SharedValue<number> => {
-  const value = useSharedValue(0);
+  const value = useSharedValue(initialValue ?? 0);
   useEffect(() => {
     value.value = typeof state === 'boolean' ? sharedBin(state) : state;
   }, [state, value]);

template/src/app/library/components/image/index.tsx

@@ -16,90 +16,65 @@ const ImageComponent = ({
   style: styleOverride = {},
   source,
   blurHashOnLoad = 'L9AB*A%LPqys8_H=yDR5nMMeVXR5',
-  thumbBlurHash,
   resizeMode = 'cover',
   containerStyle,
   childrenError,
-  childrenOnload,
   onLoad,
   onLoadStart,
   onError,
   ...rest
 }: ImageProps) => {
   // state
 
-  const [loadSucceeded, setLoadSucceeded] = useState<boolean>(false);
-  const [loadThumbSucceeded, setLoadThumbSucceeded] = useState<boolean>(false);
   const [error, setError] = useState<boolean>(false);
+  const [loadImageEnded, setLoadImageEnded] = useState<boolean>(false);
 
-  const opacityImg = useSharedTransition(loadSucceeded);
-  const opacityBlur = useSharedTransition(loadThumbSucceeded);
-  const opacityOnLoad = useSharedTransition(!loadThumbSucceeded);
+  const opacityBlur = useSharedTransition(
+    !loadImageEnded,
+    { duration: 1000 },
+    1,
+  );
 
   // function
-  const onLoadImageStart = () => {
+  const handleLoadStart = () => {
     setError(false);
     execFunc(onLoadStart);
   };
 
-  const onLoadThumbSucceeded = () => {
-    setLoadThumbSucceeded(true);
+  const handleLoadImageEnd = () => {
+    setLoadImageEnded(true);
   };
 
-  const onLoadImageSucceeded = (event: OnLoadEvent) => {
+  const handleSucceeded = (event: OnLoadEvent) => {
     setTimeout(() => {
       setError(false);
-      setLoadSucceeded(true);
     }, 200);
     execFunc(onLoad, event);
   };
 
-  const onLoadError = () => {
+  const handleLoadError = () => {
     setError(true);
     execFunc(onError);
   };
 
   // reanimated style
-  const imageStyle = useAnimatedStyle(() => ({
-    opacity: opacityImg.value,
-  }));
-
-  const imageOnloadStyle = useAnimatedStyle(() => ({
-    opacity: opacityOnLoad.value,
-  }));
   const imageBlurStyle = useAnimatedStyle(() => ({
     opacity: opacityBlur.value,
+    backgroundColor: 'red',
+    zIndex: 999,
   }));
 
   // render
   return (
     <View style={[styles.container, containerStyle]}>
-      <Animated.View style={[styles.viewOnLoad, imageOnloadStyle]}>
-        {childrenOnload || (
-          <Blurhash
-            blurhash={blurHashOnLoad}
-            style={[StyleSheet.absoluteFillObject]}
-          />
-        )}
-      </Animated.View>
-      <Animated.View style={[StyleSheet.absoluteFillObject, imageBlurStyle]}>
-        <Animated.View style={[StyleSheet.absoluteFillObject]}>
-          {thumbBlurHash !== undefined && (
-            <Blurhash
-              onLoadEnd={onLoadThumbSucceeded}
-              blurhash={thumbBlurHash ?? ''}
-              style={[StyleSheet.absoluteFillObject]}
-            />
-          )}
-        </Animated.View>
-      </Animated.View>
-      <Animated.View style={[StyleSheet.absoluteFillObject, imageStyle]}>
+      <Animated.View style={[StyleSheet.absoluteFillObject]}>
         <FastImage
           {...rest}
-          onLoadStart={onLoadImageStart}
+          onLoadStart={handleLoadStart}
           resizeMode={resizeMode}
-          onError={onLoadError}
-          onLoad={onLoadImageSucceeded}
+          onError={handleLoadError}
+          onLoad={handleSucceeded}
+          onLoadEnd={handleLoadImageEnd}
           style={[styles.img, styleOverride]}
           source={
             onCheckType(source, 'string')
@@ -108,6 +83,14 @@ const ImageComponent = ({
           }
         />
       </Animated.View>
+      <Animated.View
+        pointerEvents={'none'}
+        style={[StyleSheet.absoluteFillObject, imageBlurStyle]}>
+        <Blurhash
+          blurhash={blurHashOnLoad ?? ''}
+          style={[StyleSheet.absoluteFillObject]}
+        />
+      </Animated.View>
       {error && (
         <Animated.View style={[styles.viewError]}>
           {childrenError}

template/src/app/library/components/image/type.ts

@@ -30,18 +30,6 @@ export interface ImageProps
    */
   blurHashOnLoad?: string;
 
-  /**
-   * Source thumb(lazy load)
-   * @default undefined
-   */
-  thumbBlurHash?: string;
-
-  /**
-   * Element when image load start
-   * @default element with color #bbb
-   */
-  childrenOnload?: React.ReactNode;
-
   /**
    * Element when image load error
    * @default element with color #bbb

template/src/app/navigation/app-navigation.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { StatusBar } from 'react-native';
 
+import KeyboardManager from 'react-native-keyboard-manager';
 import { useSelector } from 'react-redux';
 
 import { dispatch, RXStore } from '@common';
@@ -12,7 +13,6 @@ import {
 } from '@components';
 import { ImageTransition } from '@components/light-box/image-transition';
 import { PortalHost } from '@gorhom/portal';
-import { AppModule } from '@native-module';
 import { navigationRef } from '@navigation/navigation-service';
 import { RootNavigation } from '@navigation/root-navigator';
 import { useFlipper } from '@react-navigation/devtools';
@@ -39,15 +39,7 @@ export const AppContainer = () => {
   }, [showDialog]);
 
   useEffect(() => {
-    if (theme === 'dark') {
-      AppModule.setIQKeyboardOption({
-        keyboardAppearance: 'dark',
-      });
-    } else {
-      AppModule.setIQKeyboardOption({
-        keyboardAppearance: 'light',
-      });
-    }
+    KeyboardManager.setKeyboardAppearance(theme);
   }, [theme]);
 
   if (__DEV__) {

template/src/app/navigation/navigation-service.ts

@@ -5,12 +5,13 @@ import { RootStackParamList } from '@navigation/screen-types';
 import {
   CommonActions,
   NavigationContainerRef,
+  StackActions,
 } from '@react-navigation/native';
 
 export const navigationRef =
   createRef<NavigationContainerRef<RootStackParamList>>();
 
-export function navigate<RouteName extends keyof RootStackParamList>(
+export function navigateScreen<RouteName extends keyof RootStackParamList>(
   ...arg: undefined extends RootStackParamList[RouteName]
     ?
         | [screen: RouteName]
@@ -23,6 +24,30 @@ export function navigate<RouteName extends keyof RootStackParamList>(
   );
 }
 
+export function pushScreen<RouteName extends keyof RootStackParamList>(
+  ...arg: undefined extends RootStackParamList[RouteName]
+    ?
+        | [screen: RouteName]
+        | [screen: RouteName, params?: RootStackParamList[RouteName]]
+    : [screen: RouteName, params: RootStackParamList[RouteName]]
+) {
+  navigationRef.current?.dispatch(
+    StackActions.push(arg[0] as any, arg.length > 1 ? arg[1] : undefined),
+  );
+}
+
+export function replaceScreen<RouteName extends keyof RootStackParamList>(
+  ...arg: undefined extends RootStackParamList[RouteName]
+    ?
+        | [screen: RouteName]
+        | [screen: RouteName, params?: RootStackParamList[RouteName]]
+    : [screen: RouteName, params: RootStackParamList[RouteName]]
+) {
+  navigationRef.current?.dispatch(
+    StackActions.replace(arg[0] as any, arg.length > 1 ? arg[1] : undefined),
+  );
+}
+
 export function goBack() {
   navigationRef.current?.dispatch(CommonActions.goBack);
 }

template/src/app/navigation/root-navigator.tsx

@@ -5,7 +5,6 @@ import { useSelector } from 'react-redux';
 
 import { Home } from '@features/authentication/home';
 import { Login } from '@features/un-authentication/login';
-import { AppModule } from '@native-module';
 import { APP_SCREEN, RootStackParamList } from '@navigation/screen-types';
 import { createStackNavigator } from '@react-navigation/stack';
 import { selectAppToken } from '@redux-selector/app';
@@ -24,13 +23,6 @@ export const RootNavigation = () => {
     return () => clearTimeout(id);
   }, []);
 
-  useEffect(() => {
-    if (!token) {
-      // clean cache when logout
-      AppModule.clearCache();
-    }
-  }, [token]);
-
   // render
   return (
     <RootStack.Navigator screenOptions={{ headerShown: false }}>

template/tsconfig.json

@@ -42,7 +42,6 @@
       "@assets/*": ["./src/app/assets/*"],
       "@common": ["./src/app/common/index"],
       "@hooks": ["./src/app/common/hooks/index"],
-      "@native-module": ["./src/app/common/native-module/index"],
       "@validate/*": ["./src/app/common/yup-validate/*"],
       "@listener": ["./src/app/common/redux/listener.ts"],
       "@animated": ["./src/app/common/animated/index"],