nx-react-native-cli 1.0.19 → 1.1.0

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

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

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

@@ -0,0 +1 @@
+export * from './keyboard-aware-scroll-view.component';

package/templates/apps/mobile/src/components/atoms/KeyboardAwareScrollView/keyboard-aware-scroll-view.component.tsx

@@ -0,0 +1,54 @@
+import React, { ReactElement } from 'react';
+import { NativeScrollEvent, NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
+import { KeyboardAwareScrollView as RNKeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import Animated from 'react-native-reanimated';
+
+import { tw } from '../../../tailwind';
+import { DefaultComponentProps } from '../../../types';
+
+type Props = DefaultComponentProps & {
+  children?: React.ReactNode;
+  scrollViewRef?: React.RefObject<RNKeyboardAwareScrollView>;
+  containerStyle?: StyleProp<ViewStyle>;
+  extraBottomPadding?: number;
+  refreshControl?: ReactElement;
+  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+};
+
+const defaultStyle = tw`grow`;
+
+const AnimatedKeyboardAwareScrollView = Animated.createAnimatedComponent(RNKeyboardAwareScrollView);
+
+export function KeyboardAwareScrollView(props: Props) {
+  const {
+    children,
+    containerStyle,
+    extraBottomPadding,
+    onScroll,
+    refreshControl,
+    scrollViewRef,
+    style,
+  } = props;
+
+  const defaultContainerStyle = [
+    defaultStyle,
+    containerStyle,
+    // eslint-disable-next-line no-magic-numbers
+    extraBottomPadding && tw`pb-[${extraBottomPadding + 50}px]`,
+  ];
+
+  return (
+    <AnimatedKeyboardAwareScrollView
+      ref={scrollViewRef}
+      contentContainerStyle={[defaultContainerStyle, containerStyle]}
+      enableResetScrollToCoords={false}
+      keyboardShouldPersistTaps="handled"
+      refreshControl={refreshControl}
+      scrollEventThrottle={16}
+      style={style}
+      onScroll={onScroll}
+    >
+      {children}
+    </AnimatedKeyboardAwareScrollView>
+  );
+}

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

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

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

@@ -1,12 +1,11 @@
 /* eslint-disable no-magic-numbers */
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import React, { useCallback, useState } from 'react';
-import { Keyboard, ModalBaseProps, StyleProp, ViewStyle } from 'react-native';
+import { Keyboard, ModalBaseProps, StyleProp, View, 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 & {
@@ -32,7 +31,7 @@ export function Modal(props: ModalProps) {
       onBackdropPress={onBackdropPress}
     >
       <BottomSheetModalProvider>
-        <Box style={[tw`px-4`, containerStyle]}>{children}</Box>
+        <View style={[tw`px-4`, containerStyle]}>{children}</View>
       </BottomSheetModalProvider>
     </RNModal>
   );

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

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

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

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

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

@@ -4,6 +4,7 @@ import {
   TextInputProps as RNTextInputProps,
   StyleProp,
   TextStyle,
+  View,
 } from 'react-native';
 
 import {
@@ -14,7 +15,6 @@ import {
   focusedInputStyle,
 } from '../../../tailwind';
 import { DefaultComponentProps } from '../../../types';
-import { Box } from '../Box';
 
 import { DefaultNameInputProps, DefaultTextAreaInputProps } from './constants';
 
@@ -62,7 +62,7 @@ export function TextInput(props: TextInputProps) {
   }
 
   return (
-    <Box
+    <View
       style={[
         defaultInputContainerStyle,
         focusedInputStyle(isFocused),
@@ -85,7 +85,7 @@ export function TextInput(props: TextInputProps) {
         onFocus={handleOnFocus}
         {...extraProps}
       />
-    </Box>
+    </View>
   );
 }
 

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

@@ -1,8 +1,9 @@
 export * from './BottomSheet';
-export * from './Box';
 export * from './Button';
 export * from './Divider';
+export * from './ExcludedEdges';
 export * from './InputLayout';
+export * from './KeyboardAwareScrollView';
 export * from './ListLoadingItem';
 export * from './Modal';
 export * from './ScreenLoader';

package/templates/apps/mobile/src/components/molecules/BackButton/back-button.component.tsx

@@ -6,6 +6,7 @@ import {
   PressableProps,
   StyleProp,
   TouchableOpacity,
+  View,
   ViewStyle,
 } from 'react-native';
 
@@ -14,7 +15,6 @@ import { ArrowLeftIcon } from '../../../icons';
 import { Screens } from '../../../routes';
 import { tw } from '../../../tailwind';
 import { DefaultComponentProps } from '../../../types/component.type';
-import { Box } from '../../atoms';
 
 type Props = DefaultComponentProps &
   PressableProps & {
@@ -50,9 +50,9 @@ export function BackButton(props: Props) {
       style={[tw`h-[48px] w-[48px]`, style]}
       onPress={handleOnPress}
     >
-      <Box style={[tw`flex-1 items-center justify-center rounded-full`, style]}>
+      <View style={[tw`flex-1 items-center justify-center rounded-full`, style]}>
         <ArrowLeftIcon style={tw`text-gray-950`} />
-      </Box>
+      </View>
     </TouchableOpacity>
   );
 }

package/templates/apps/mobile/src/components/molecules/ScreenContainer/screen-container.component.tsx

@@ -6,18 +6,18 @@ import {
   Platform,
   StatusBar,
   StyleProp,
+  View,
   ViewStyle,
 } from 'react-native';
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
-import Animated from 'react-native-reanimated';
+import { KeyboardAwareScrollView as RNKeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import { Edge, SafeAreaProviderProps, SafeAreaView } from 'react-native-safe-area-context';
 
 import CONFIG from '../../../config';
 import { tw } from '../../../tailwind';
-import { Box } from '../../atoms';
+import { KeyboardAwareScrollView } from '../../atoms';
 
 type Props = SafeAreaProviderProps & {
-  scrollViewRef?: React.RefObject<KeyboardAwareScrollView>;
+  scrollViewRef?: React.RefObject<RNKeyboardAwareScrollView>;
   containerStyle?: StyleProp<ViewStyle>;
   excludedEdges?: Edge[];
   extraBottomPadding?: number;
@@ -37,18 +37,16 @@ const safeAreaViewEdges: Edge[] = Platform.select({
   ios: ['top', 'left', 'right', 'bottom'],
 });
 
-const AnimatedKeyboardAwareScrollView = Animated.createAnimatedComponent(KeyboardAwareScrollView);
-
 export function ScreenContainer(props: Props) {
   const {
     children,
-    scrollViewRef,
     containerStyle,
     excludedEdges = [],
     extraBottomPadding = 0,
     hasScroll = true,
     onScroll,
     refreshControl,
+    scrollViewRef,
     shouldBeTranslucent = false,
     shouldShowStatusBar = true,
     statusBarColor = 'transparent',
@@ -81,21 +79,18 @@ export function ScreenContainer(props: Props) {
   ];
 
   return (
-    <SafeAreaView edges={edges} style={[tw`flex-1 bg-gray-50 dark:bg-gray-900`, style]}>
+    <SafeAreaView edges={edges} style={[tw`flex-1 bg-gray-50`, style]}>
       {hasScroll ? (
-        <AnimatedKeyboardAwareScrollView
-        scrollViewRef={scrollViewRef}
-          contentContainerStyle={defaultContainerStyle}
-          enableResetScrollToCoords={false}
-          keyboardShouldPersistTaps="handled"
+        <KeyboardAwareScrollView
+          containerStyle={defaultContainerStyle}
           refreshControl={refreshControl}
-          scrollEventThrottle={16}
+          scrollViewRef={scrollViewRef}
           onScroll={onScroll}
         >
           {children}
-        </AnimatedKeyboardAwareScrollView>
+        </KeyboardAwareScrollView>
       ) : (
-        <Box style={defaultContainerStyle}>{children}</Box>
+        <View style={defaultContainerStyle}>{children}</View>
       )}
     </SafeAreaView>
   );

package/templates/apps/mobile/src/components/molecules/ScreenHeader/screen-header.component.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import { StyleProp, TouchableOpacity, ViewStyle } from 'react-native';
+import { StyleProp, TouchableOpacity, View, ViewStyle } from 'react-native';
 
 import { GearIcon } from '../../../icons';
 import { tw } from '../../../tailwind';
 import { DefaultComponentProps } from '../../../types/component.type';
-import { Box } from '../../atoms';
 import { Typography } from '../../atoms/Typography';
 import { BackButton } from '../BackButton';
 
@@ -36,19 +35,19 @@ export function ScreenHeader(props: Props) {
       style={tw`z-10 h-[48px] w-[48px]`}
       onPress={onExtraActionPress}
     >
-      <Box style={[tw`flex-1 items-center justify-center rounded-full`, style]}>
+      <View style={[tw`flex-1 items-center justify-center rounded-full`, style]}>
         {extraActionComponent ? (
           extraActionComponent
         ) : (
           <GearIcon height={25} style={tw`text-black-950`} width={25} />
         )}
-      </Box>
+      </View>
     </TouchableOpacity>
   );
 
   return (
-    <Box style={[tw`h-[64px] border border-transparent`, style]}>
-      <Box style={[tw`flex-row items-center justify-between border border-transparent p-4 pt-2`]}>
+    <View style={[tw`h-[64px] border border-transparent`, style]}>
+      <View style={[tw`flex-row items-center justify-between border border-transparent p-4 pt-2`]}>
         {hasBackButton && <BackButton style={tw`z-10`} onPress={onBackPress} />}
         <Typography
           style={[
@@ -59,7 +58,7 @@ export function ScreenHeader(props: Props) {
           {title}
         </Typography>
         {extraActionComponentDisplay}
-      </Box>
-    </Box>
+      </View>
+    </View>
   );
 }

package/templates/apps/mobile/src/screens/LandingScreen/landing.screen.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
+import { View } from 'react-native';
 import {
   BottomSheet,
-  Box,
   Button,
   OutlinedButton,
   ScreenContainer,
@@ -10,27 +10,30 @@ import {
   Typography,
   useBottomSheet,
 } from '../../components';
-import { useToggleDarkMode } from '../../hooks';
 import { PublicScreenProps, Screens } from '../../routes';
 import { tw } from '../../tailwind';
+import { toast } from '../../utils';
 
 export function LandingScreen(props: PublicScreenProps<Screens.LANDING>) {
-  const toggleDarkMode = useToggleDarkMode();
   const { expandSheet, sheetRef } = useBottomSheet();
 
+  function toastHi() {
+    toast('Hi!')
+  }
+
   return (
     <ScreenContainer>
-      <ScreenHeader title="Landing" onExtraActionPress={toggleDarkMode} />
-      <Box style={tw`mx-4`}>
-        <Box row style={tw`gap-2`}>
+      <ScreenHeader title="Landing" onExtraActionPress={toastHi} />
+      <View style={tw`mx-4`}>
+        <View row style={tw`gap-2`}>
           <Button title="Show Bottom Sheet" onPress={expandSheet} />
           <OutlinedButton title="Login" />
-        </Box>
-      </Box>
+        </View>
+      </View>
       <BottomSheet sheetRef={sheetRef}>
-        <Box>
+        <View>
           <Typography>Bottom Sheet</Typography>
-        </Box>
+        </View>
       </BottomSheet>
     </ScreenContainer>
   );

package/templates/apps/mobile/src/utils/index.ts

@@ -1,4 +1,3 @@
 export * from './axios.util';
 export * from './log.util';
 export * from './route.util';
-

package/templates/apps/mobile/src/utils/route.util.ts

@@ -1,6 +1,6 @@
 /* eslint-disable max-params */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { CommonActions, NavigationState, ParamListBase, Route } from '@react-navigation/native';
+import { CommonActions, NavigationState, ParamListBase } from '@react-navigation/native';
 
 export function getPreviousRouteName(navigationState: NavigationState<ParamListBase>) {
   const routes = navigationState.routes;

package/templates/apps/mobile/tailwind.config.js

@@ -14,7 +14,7 @@ module.exports = {
   ],
   theme: {
     fontFamily: {
-      sans: ['Roboto'],
+      sans: ['Inter 18pt'],
     },
     extend: {
       flex: {

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

@@ -1,21 +0,0 @@
-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

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