nx-react-native-cli 1.0.17 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nx-react-native-cli",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "A react native starter (with NX) cli script",
   "type": "module",
   "files": [

package/templates/.eslintrc.json

@@ -264,6 +264,7 @@
       "extends": ["plugin:@nx/typescript"],
       "rules": {
         "@typescript-eslint/consistent-type-definitions": "off",
+        "@typescript-eslint/no-inferrable-types": "off",
         "@typescript-eslint/no-explicit-any": "off",
         "@typescript-eslint/no-use-before-define": "off",
         "@typescript-eslint/no-unused-vars": [

package/templates/.nvmrc

@@ -1 +1 @@
-v18.20.3
+v20.9.0

package/templates/apps/mobile/android/app/build.gradle

@@ -45,7 +45,7 @@ react {
 
     /* Hermes Commands */
     //   The hermes compiler command to run. By default it is 'hermesc'
-    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+    // hermesCommand = "../../../../node_modules/react-native/sdks/hermesc/%OS-BIN%/hermesc"
     //
     //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
     // hermesFlags = ["-O", "-output-source-map"]

package/templates/apps/mobile/android/app/proguard-rules.pro

@@ -0,0 +1,20 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# Add any project specific keep options here:
+
+-keep public class com.dylanvann.fastimage.* {*;}
+-keep public class com.dylanvann.fastimage.** {*;}
+-keep public class * implements com.bumptech.glide.module.GlideModule
+-keep public class * extends com.bumptech.glide.module.AppGlideModule
+-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
+  **[] $VALUES;
+  public *;
+}
+-keep class com.shopify.reactnative.skia.** { *; }

package/templates/apps/mobile/package.json

@@ -3,7 +3,6 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    
     "android:connect": "adb reverse tcp:8081 tcp:8081",
     "start": "npx nx start mobile --skip-nx-cache",
     "run-ios": "npx nx run-ios mobile --skip-nx-cache --scheme=Dev --simulator='iPhone 13 (A96A9251-28D7-48B1-8F6A-20B6CCB8810B)'",
@@ -37,6 +36,7 @@
     "@react-navigation/native": "*",
     "@react-navigation/routers": "*",
     "@react-navigation/stack": "*",
+    "@shopify/react-native-skia": "*",
     "@tanstack/query-async-storage-persister": "*",
     "@tanstack/query-core": "*",
     "@tanstack/query-sync-storage-persister": "*",
@@ -50,12 +50,14 @@
     "jotai-optics": "*",
     "jotai": "*",
     "lodash": "*",
+    "lottie-react-native": "*",
     "metro-config": "*",
     "react-hook-form": "*",
     "react-native-dotenv": "*",
     "react-native-fast-image": "*",
     "react-native-gesture-handler": "*",
     "react-native-get-random-values": "*",
+    "react-native-haptic-feedback": "*",
     "react-native-keyboard-aware-scroll-view": "*",
     "react-native-mmkv": "*",
     "react-native-modal-datetime-picker": "*",

package/templates/apps/mobile/react-native.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  project: {
+    ios: {},
+    android: {},
+  },
+  assets: ['./src/assets/fonts'],
+};

package/templates/apps/mobile/src/app/index.tsx

@@ -8,6 +8,8 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import 'react-native-get-random-values';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { enableFreeze } from 'react-native-screens';
+import { useDeviceContext } from 'twrnc';
+
 import 'react-native-url-polyfill/auto';
 
 import { StorageManager } from '../components';
@@ -35,7 +37,11 @@ const persister = createAsyncStoragePersister({
 
 const persistOptions = { maxAge: CACHE_TIME, persister };
 
-function Application(): JSX.Element {
+function Application() {
+  useDeviceContext(tw, {
+    initialColorScheme: 'light',
+  });
+
   return (
     <GestureHandlerRootView style={tw`flex-1`}>
       <SafeAreaProvider>

package/templates/apps/mobile/src/components/atoms/BottomSheet/bottom-sheet.component.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable no-magic-numbers */
 import {
   BottomSheetBackdropProps,
@@ -6,7 +8,7 @@ import {
   BottomSheetModal,
   BottomSheetScrollView,
 } from '@gorhom/bottom-sheet';
-import React, { FC, ReactNode, RefObject, useCallback, useMemo, useRef } from 'react';
+import React, { FC, RefObject, useCallback, useMemo, useRef, useState } from 'react';
 import { Keyboard, StyleProp, ViewStyle } from 'react-native';
 import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
@@ -16,7 +18,7 @@ import { DefaultComponentProps } from '../../../types';
 
 export type BottomSheetProps = DefaultComponentProps & {
   backgroundStyle?: StyleProp<Omit<ViewStyle, 'left' | 'right' | 'position' | 'top' | 'bottom'>>;
-  children?: ReactNode;
+  children?: React.ReactNode;
   contentContainerStyle?: StyleProp<ViewStyle>;
   enableDismissOnPressBackdrop?: boolean;
   enableDynamicSizing?: boolean;
@@ -100,6 +102,7 @@ export function BottomSheet(props: BottomSheetProps) {
   return (
     <BottomSheetModal
       ref={sheetRef}
+      android_keyboardInputMode="adjustResize"
       backdropComponent={renderBackdrop}
       backgroundStyle={[tw`bg-gray-50`, backgroundStyle]}
       enableDynamicSizing={enableDynamicSizing}
@@ -125,21 +128,20 @@ export function BottomSheet(props: BottomSheetProps) {
 }
 
 export function useBottomSheet() {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
   const sheetRef = useRef<BottomSheetModal>(null);
 
   const expandSheet = useCallback(() => {
     Keyboard.dismiss();
     sheetRef.current?.present();
+    setIsVisible(true);
   }, []);
 
   const closeSheet = useCallback(() => {
     Keyboard.dismiss();
     sheetRef.current?.close();
+    setIsVisible(false);
   }, []);
 
-  return {
-    closeSheet,
-    expandSheet,
-    sheetRef,
-  };
+  return { closeSheet, expandSheet, isVisible, sheetRef };
 }

package/templates/apps/mobile/src/components/atoms/Box/box.component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { View, ViewProps } from 'react-native';
+
+import { tw } from '../../../tailwind';
+import { DefaultComponentProps } from '../../../types';
+
+type Props = DefaultComponentProps &
+  ViewProps & {
+    row?: boolean;
+  };
+
+export function Box(props: Props) {
+  const { row, style, ...rest } = props;
+
+  return (
+    <View
+      style={[tw`bg-gray-50 dark:bg-gray-900`, row && tw`flex-row items-center`, style]}
+      {...rest}
+    />
+  );
+}

package/templates/apps/mobile/src/components/atoms/Box/index.ts

@@ -0,0 +1 @@
+export * from './box.component';

package/templates/apps/mobile/src/components/atoms/Button/button.component.tsx

@@ -5,16 +5,17 @@ import {
   TextStyle,
   TouchableOpacity,
   TouchableOpacityProps,
-  View,
   ViewStyle,
 } from 'react-native';
 
 import { colors, disabledInputStyle, tw } from '../../../tailwind';
 import { DefaultComponentProps } from '../../../types/component.type';
-import { Text } from '../Text';
+import { Box } from '../Box';
+import { Typography } from '../Typography';
 
 type Props = DefaultComponentProps &
   TouchableOpacityProps & {
+    activityIndicatorColor?: string;
     buttonStyle?: StyleProp<ViewStyle>;
     children?: React.ReactNode;
     isLoading?: boolean;
@@ -24,9 +25,10 @@ type Props = DefaultComponentProps &
 
 const ACTIVE_OPACITY = 0.5;
 
-export function Button(props: Props): JSX.Element {
+export function Button(props: Props) {
   const {
     activeOpacity = ACTIVE_OPACITY,
+    activityIndicatorColor = colors.white,
     buttonStyle,
     children,
     isDisabled = false,
@@ -37,19 +39,33 @@ export function Button(props: Props): JSX.Element {
     ...rest
   } = props;
   const disabled = isDisabled || isLoading;
-  const display = children ?? <Text style={[tw`font-medium text-white`, textStyle]}>{title}</Text>;
+  const display = children ?? (
+    <Typography style={[tw`font-medium text-white`, textStyle]}>{title}</Typography>
+  );
 
   return (
     <TouchableOpacity activeOpacity={activeOpacity} disabled={disabled} style={[style]} {...rest}>
-      <View
+      <Box
         style={[
-          tw`bg-primary-700 items-center justify-center rounded-xl p-4`,
+          tw`bg-primary-700 items-center justify-center rounded-xl p-3`,
           buttonStyle,
           disabledInputStyle(disabled),
         ]}
       >
-        {isLoading ? <ActivityIndicator color={colors.white} /> : display}
-      </View>
+        {isLoading ? <ActivityIndicator color={activityIndicatorColor} /> : display}
+      </Box>
     </TouchableOpacity>
   );
 }
+
+export function OutlinedButton(props: Props) {
+  const { ...rest } = props;
+
+  return (
+    <Button
+      {...rest}
+      buttonStyle={tw`border-primary-700 border-2 bg-white`}
+      textStyle={tw`text-primary-700`}
+    />
+  );
+}

package/templates/apps/mobile/src/components/atoms/Button/index.ts

@@ -1,2 +1 @@
 export * from './button.component';
-export * from './outlined-button.component';

package/templates/apps/mobile/src/components/atoms/Divider/divider-component.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { View } from 'react-native';
 
 import { tw } from '../../../tailwind';
 import { DefaultComponentProps } from '../../../types';
+import { Box } from '../Box';
 
 type Props = DefaultComponentProps & {};
 
 export function Divider(props: Props) {
   const { style } = props;
 
-  return <View style={[tw`h-[1px] w-full bg-gray-200`, style]}></View>;
+  return <Box style={[tw`h-[1px] w-full bg-gray-200`, style]}></Box>;
 }

package/templates/apps/mobile/src/components/atoms/InputLayout/input-layout.component.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { StyleProp, TextStyle, View } from 'react-native';
+import { StyleProp, TextStyle } from 'react-native';
 
 import { tw } from '../../../tailwind';
 import { DefaultComponentProps } from '../../../types';
-import { Text } from '../Text';
+import { Box } from '../Box';
+import { Typography } from '../Typography';
 
 type Props = DefaultComponentProps & {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   isRequired?: boolean;
   label?: string;
   textStyle?: StyleProp<TextStyle>;
@@ -16,19 +17,19 @@ export function InputLayout(props: Props) {
   const { children, error, isRequired, label, style, textStyle } = props;
 
   return (
-    <View style={[style]}>
+    <Box style={[style]}>
       {label && (
-        <Text style={[tw`mb-2 text-gray-600`, textStyle]}>
+        <Typography style={[tw`mb-2 text-gray-600`, textStyle]}>
           {label}
-          {isRequired && <Text style={tw`text-red-600`}>{isRequired && '*'}</Text>}
-        </Text>
+          {isRequired && <Typography style={tw`text-red-600`}>{isRequired && '*'}</Typography>}
+        </Typography>
       )}
       {children}
       {!!error && (
-        <View style={tw`items-end`}>
-          <Text style={tw`text-right text-red-500`}>{error}</Text>
-        </View>
+        <Box style={tw`items-end`}>
+          <Typography style={tw`text-right text-red-500`}>{error}</Typography>
+        </Box>
       )}
-    </View>
+    </Box>
   );
 }

package/templates/apps/mobile/src/components/atoms/ListLoadingItem/list-loading-item.component.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { View } from 'react-native';
 
 import { tw } from '../../../tailwind';
 import { DefaultComponentProps } from '../../../types';
+import { Box } from '../Box';
 import { Skeleton } from '../Skeleton';
 
 type Props = DefaultComponentProps & {
@@ -13,19 +13,19 @@ export function ListLoadingItemComponent(props: Props) {
   const { isLoading, style } = props;
 
   return (
-    <View style={[style]}>
-      <View style={[tw`gap-2`, style]}>
+    <Box style={[style]}>
+      <Box style={[tw`gap-2`, style]}>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[100px] w-full`} />}
+          {isLoading && <Box style={tw`h-[100px] w-full`} />}
         </Skeleton>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[100px] w-full`} />}
+          {isLoading && <Box style={tw`h-[100px] w-full`} />}
         </Skeleton>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[100px] w-full`} />}
+          {isLoading && <Box style={tw`h-[100px] w-full`} />}
         </Skeleton>
-      </View>
-    </View>
+      </Box>
+    </Box>
   );
 }
 
@@ -33,24 +33,24 @@ export function ListLoadingHorizontalItemComponent(props: Props) {
   const { isLoading, style } = props;
 
   return (
-    <View style={[style]}>
-      <View style={[tw`flex-row gap-2`, style]}>
+    <Box style={[style]}>
+      <Box style={[tw`flex-row gap-2`, style]}>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
+          {isLoading && <Box style={tw`h-[200px] w-[100px]`} />}
         </Skeleton>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
+          {isLoading && <Box style={tw`h-[200px] w-[100px]`} />}
         </Skeleton>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
+          {isLoading && <Box style={tw`h-[200px] w-[100px]`} />}
         </Skeleton>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
+          {isLoading && <Box style={tw`h-[200px] w-[100px]`} />}
         </Skeleton>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
+          {isLoading && <Box style={tw`h-[200px] w-[100px]`} />}
         </Skeleton>
-      </View>
-    </View>
+      </Box>
+    </Box>
   );
 }

package/templates/apps/mobile/src/components/atoms/Modal/modal.component.tsx

@@ -1,15 +1,16 @@
 /* eslint-disable no-magic-numbers */
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
-import React, { ReactNode, useCallback, useState } from 'react';
-import { Keyboard, ModalBaseProps, StyleProp, View, ViewStyle } from 'react-native';
+import React, { useCallback, useState } from 'react';
+import { Keyboard, ModalBaseProps, StyleProp, ViewStyle } from 'react-native';
 import RNModal from 'react-native-modal';
 
 import { tw } from '../../../tailwind';
 import { DefaultComponentProps } from '../../../types';
+import { Box } from '../Box';
 
 export type ModalProps = DefaultComponentProps &
   ModalBaseProps & {
-    children?: ReactNode;
+    children?: React.ReactNode;
     containerStyle?: StyleProp<ViewStyle>;
     isVisible: boolean;
     onBackdropPress?: () => void;
@@ -31,7 +32,7 @@ export function Modal(props: ModalProps) {
       onBackdropPress={onBackdropPress}
     >
       <BottomSheetModalProvider>
-        <View style={[tw`px-4`, containerStyle]}>{children}</View>
+        <Box style={[tw`px-4`, containerStyle]}>{children}</Box>
       </BottomSheetModalProvider>
     </RNModal>
   );

package/templates/apps/mobile/src/components/atoms/ScreenLoader/screen-loader.component.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
-import { ActivityIndicator, View } from 'react-native';
+import { ActivityIndicator } from 'react-native';
 
 import { colors, tw } from '../../../tailwind';
 import { DefaultComponentProps } from '../../../types/component.type';
+import { Box } from '../Box';
 
 type Props = DefaultComponentProps;
 
-export function ScreenLoader(props: Props): JSX.Element {
+export function ScreenLoader(props: Props) {
   const { style } = props;
 
   return (
-    <View style={[tw`h-full w-full items-center justify-center bg-gray-50 p-8`, style]}>
+    <Box style={[tw`h-full w-full items-center justify-center bg-gray-50 p-8`, style]}>
       <ActivityIndicator color={colors.primary[400]} />
-    </View>
+    </Box>
   );
 }

package/templates/apps/mobile/src/components/atoms/Skeleton/skeleton.component.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { View } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -8,6 +7,7 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { tw } from '../../../tailwind';
+import { Box } from '../Box';
 
 interface Props {
   children: React.ReactNode;
@@ -36,7 +36,7 @@ export function Skeleton(props: Props) {
 
   return (
     <Animated.View style={[tw`rounded-lg bg-gray-200`, animatedStyle]}>
-      <View style={tw`opacity-0`}>{children}</View>
+      <Box style={tw`opacity-0`}>{children}</Box>
     </Animated.View>
   );
 }

package/templates/apps/mobile/src/components/atoms/TextInput/text-input.component.tsx

@@ -4,7 +4,6 @@ import {
   TextInputProps as RNTextInputProps,
   StyleProp,
   TextStyle,
-  View,
 } from 'react-native';
 
 import {
@@ -14,7 +13,8 @@ import {
   disabledInputStyle,
   focusedInputStyle,
 } from '../../../tailwind';
-import { DefaultInputComponentProps } from '../../../types';
+import { DefaultComponentProps } from '../../../types';
+import { Box } from '../Box';
 
 import { DefaultNameInputProps, DefaultTextAreaInputProps } from './constants';
 
@@ -29,7 +29,7 @@ export function getTextInputHeightAdjustment(numberOfNewLines: number) {
   return TEXT_INPUT_MIN_HEIGHT + (numberOfNewLines - 2) * TEXT_INPUT_LINE_HEIGHT;
 }
 
-export type TextInputProps = DefaultInputComponentProps<string> &
+export type TextInputProps = DefaultComponentProps &
   RNTextInputProps & {
     textInputRef?: React.RefObject<RNTextInput>;
     textStyle?: StyleProp<TextStyle>;
@@ -62,7 +62,7 @@ export function TextInput(props: TextInputProps) {
   }
 
   return (
-    <View
+    <Box
       style={[
         defaultInputContainerStyle,
         focusedInputStyle(isFocused),
@@ -85,7 +85,7 @@ export function TextInput(props: TextInputProps) {
         onFocus={handleOnFocus}
         {...extraProps}
       />
-    </View>
+    </Box>
   );
 }
 

package/templates/apps/mobile/src/components/atoms/Typography/index.ts

@@ -0,0 +1 @@
+export * from './typography.component';

package/templates/apps/mobile/src/components/atoms/{Text/text.component.tsx → Typography/typography.component.tsx}

@@ -7,7 +7,7 @@ type Props = TextProps & {
   numberOfLines?: number;
 };
 
-export function Text(props: Props): JSX.Element {
+export function Typography(props: Props): JSX.Element {
   const { numberOfLines = 0, style, ...extraProps } = props;
 
   const shouldTruncateTextProps: TextProps =