react-native-boiler-plate-vijay 1.0.0

package/template/src/components/PrimaryButton.tsx

@@ -0,0 +1,74 @@
+import React, {FC} from 'react';
+import {
+  ActivityIndicator,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  TouchableOpacity,
+  TouchableOpacityProps,
+} from 'react-native';
+import {colors, perfectSize} from '@theme';
+import PrimaryText from './PrimaryText';
+import {fonts} from '@fonts';
+
+interface PrimaryButtonProps extends TouchableOpacityProps {
+  label: string;
+  labelStyle?: StyleProp<TextStyle>;
+  loading?: boolean;
+}
+
+const PrimaryButton: FC<PrimaryButtonProps> = ({
+  label,
+  labelStyle,
+  loading = false,
+  disabled,
+  style,
+  ...rest
+}) => {
+  const isDisabled = disabled || loading;
+
+  return (
+    <TouchableOpacity
+      style={[styles.container, style]}
+      activeOpacity={0.6}
+      disabled={isDisabled}
+      {...rest}>
+      <PrimaryText
+        style={[
+          styles.label,
+          labelStyle,
+          loading && {
+            opacity: 0,
+          },
+        ]}>
+        {label}
+      </PrimaryText>
+
+      {loading && (
+        <ActivityIndicator
+          color={colors.white}
+          size={'small'}
+          style={{position: 'absolute'}}
+        />
+      )}
+    </TouchableOpacity>
+  );
+};
+
+export default PrimaryButton;
+
+const styles = StyleSheet.create({
+  container: {
+    height: perfectSize(40),
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: perfectSize(8),
+    backgroundColor: colors.primary,
+    paddingHorizontal: perfectSize(20),
+  },
+  label: {
+    fontSize: perfectSize(14),
+    fontFamily: fonts.semiBold,
+    color: colors.white,
+  },
+});

package/template/src/components/PrimaryFlashMessage.tsx

@@ -0,0 +1,122 @@
+import React, {FC, forwardRef} from 'react';
+import {View, StyleSheet, Animated} from 'react-native';
+import FlashMessage, {FlashMessageProps} from 'react-native-flash-message';
+import {colors, perfectSize} from '@theme';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {prettyPrint} from '@common';
+import PrimaryText from './PrimaryText';
+import {fonts} from '@fonts';
+
+const TYPE_CONFIG: Record<string, {bg: string; accent: string; icon: string}> =
+  {
+    success: {bg: '#1A2E22', accent: '#34C759', icon: '✓'},
+    danger: {bg: '#2E1A1A', accent: '#FF3B30', icon: '✕'},
+    warning: {bg: '#2E2A1A', accent: '#FF9500', icon: '⚠'},
+    info: {bg: '#1A1E2E', accent: '#007AFF', icon: 'ℹ'},
+    default: {bg: '#1C1C1E', accent: '#8E8E93', icon: '•'},
+  };
+
+const FlashMessageComponent: FC<{message: any}> = ({message}) => {
+  prettyPrint({message});
+  const type = message?.type ?? 'default';
+  const {bg, accent, icon} = TYPE_CONFIG[type] ?? TYPE_CONFIG.default;
+  const {top, bottom} = useSafeAreaInsets();
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          marginTop: top + perfectSize(12),
+          marginBottom: bottom + perfectSize(12),
+          backgroundColor: bg,
+          opacity: message?.animationValue ?? 1,
+        },
+      ]}>
+      <View style={[styles.accent, {backgroundColor: accent}]} />
+      <View style={[styles.iconWrap, {backgroundColor: accent + '30'}]}>
+        <PrimaryText style={[styles.icon, {color: accent}]}>{icon}</PrimaryText>
+      </View>
+      <View style={styles.textWrap}>
+        {!!message?.message && (
+          <PrimaryText style={styles.title}>{message.message}</PrimaryText>
+        )}
+        {!!message?.description && (
+          <PrimaryText style={styles.description}>
+            {message.description}
+          </PrimaryText>
+        )}
+      </View>
+    </Animated.View>
+  );
+};
+
+const PrimaryFlashMessage = forwardRef<
+  FlashMessage,
+  Partial<FlashMessageProps>
+>((props, ref) => (
+  <FlashMessage
+    ref={ref}
+    position="top"
+    duration={3000}
+    MessageComponent={FlashMessageComponent}
+    transitionConfig={animationValue => ({
+      transform: [],
+      opacity: animationValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 1],
+      }),
+    })}
+    {...props}
+  />
+));
+
+export default PrimaryFlashMessage;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: perfectSize(16),
+    marginTop: perfectSize(12),
+    borderRadius: perfectSize(16),
+    paddingVertical: perfectSize(14),
+    paddingRight: perfectSize(16),
+    overflow: 'hidden',
+    shadowColor: colors.black,
+    shadowOffset: {width: 0, height: perfectSize(6)},
+    shadowOpacity: 0.3,
+    shadowRadius: perfectSize(10),
+  },
+  accent: {
+    width: perfectSize(4),
+    alignSelf: 'stretch',
+    borderRadius: perfectSize(4),
+    marginRight: perfectSize(12),
+  },
+  iconWrap: {
+    width: perfectSize(36),
+    height: perfectSize(36),
+    borderRadius: perfectSize(10),
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: perfectSize(12),
+  },
+  icon: {
+    fontSize: perfectSize(16),
+    fontWeight: '700',
+  },
+  textWrap: {
+    flex: 1,
+  },
+  title: {
+    color: colors.white,
+    fontSize: perfectSize(14),
+    fontFamily: fonts.semiBold,
+  },
+  description: {
+    color: '#AEAEB2',
+    fontSize: perfectSize(12),
+    fontFamily: fonts.primary,
+    marginTop: perfectSize(2),
+  },
+});

package/template/src/components/PrimaryLoader.tsx

@@ -0,0 +1,37 @@
+import React, {FC} from 'react';
+import {ActivityIndicator, StyleSheet, View} from 'react-native';
+import {colors, perfectSize} from '@theme';
+import {useAppSelector} from '@appRedux';
+
+interface PrimaryLoaderProps {
+  isLocalLoading?: boolean;
+}
+
+const PrimaryLoader: FC<PrimaryLoaderProps> = ({isLocalLoading = false}) => {
+  const {isLoading} = useAppSelector(state => state.loader);
+  const isVisible = isLocalLoading ?? isLoading;
+  return isVisible ? (
+    <View style={[styles.container, StyleSheet.absoluteFill]}>
+      <View style={styles.whiteBox}>
+        <ActivityIndicator color={colors.primary} size={perfectSize(40)} />
+      </View>
+    </View>
+  ) : null;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: colors.black60,
+  },
+  whiteBox: {
+    aspectRatio: 1,
+    backgroundColor: colors.white,
+    height: perfectSize(80),
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: perfectSize(5),
+  },
+});
+export default PrimaryLoader;

package/template/src/components/PrimaryScrollView.tsx

@@ -0,0 +1,97 @@
+import {perfectSize} from '@theme';
+import React, {
+  ReactNode,
+  useState,
+  useEffect,
+  useRef,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
+import {Keyboard, Platform, TextInput, ScrollViewProps} from 'react-native';
+import {ScrollView} from 'react-native-gesture-handler';
+
+interface PrimaryScrollViewProps extends ScrollViewProps {
+  children?: ReactNode;
+}
+
+export interface PrimaryScrollViewHandle {
+  scrollTo: (options: {y: number; animated?: boolean}) => void;
+  scrollToEnd: (options: {animated?: boolean}) => void;
+}
+
+const PrimaryScrollView = forwardRef<
+  PrimaryScrollViewHandle,
+  PrimaryScrollViewProps
+>(({children, contentContainerStyle, ...rest}, ref) => {
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const scrollViewRef = useRef<ScrollView>(null);
+
+  useEffect(() => {
+    const showSub = Keyboard.addListener(
+      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
+      e => {
+        setKeyboardHeight(e.endCoordinates.height);
+
+        // Auto-scroll logic: scroll to the focused input field
+        setTimeout(() => {
+          const currentlyFocusedInput = TextInput.State.currentlyFocusedInput();
+          if (currentlyFocusedInput && scrollViewRef.current) {
+            currentlyFocusedInput.measureLayout(
+              scrollViewRef.current as any,
+              (x, y, width, height) => {
+                // Scroll so the input top sits with breathing room above it.
+                // Adjust the padding value (height - perfectSize(12)) to control the gap above the focused input.
+                scrollViewRef.current?.scrollTo({
+                  y: Math.max(0, y - height - perfectSize(12)),
+                  animated: true,
+                });
+              },
+              () => {},
+            );
+          }
+        }, 100);
+      },
+    );
+
+    const hideSub = Keyboard.addListener(
+      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
+      () => {
+        setKeyboardHeight(0);
+      },
+    );
+
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, []);
+
+  useImperativeHandle(ref, () => ({
+    scrollTo: options => scrollViewRef.current?.scrollTo(options),
+    scrollToEnd: options => scrollViewRef.current?.scrollToEnd(options),
+  }));
+
+  return (
+    <ScrollView
+      showsHorizontalScrollIndicator={false}
+      showsVerticalScrollIndicator={false}
+      keyboardShouldPersistTaps={'handled'}
+      ref={scrollViewRef}
+      contentContainerStyle={[
+        contentContainerStyle,
+        keyboardHeight > 0
+          ? {
+              paddingBottom: keyboardHeight,
+              justifyContent: 'flex-start',
+            }
+          : undefined,
+      ]}
+      {...rest}>
+      {children}
+    </ScrollView>
+  );
+});
+
+PrimaryScrollView.displayName = 'PrimaryScrollView';
+
+export default PrimaryScrollView;

package/template/src/components/PrimaryText.tsx

@@ -0,0 +1,25 @@
+import React, {FC} from 'react';
+import {StyleSheet, Text, TextProps} from 'react-native';
+import {colors, perfectSize} from '@theme';
+import {fonts} from '@assets';
+
+interface PrimaryTextProps extends TextProps {}
+
+const PrimaryText: FC<PrimaryTextProps> = ({style, children, ...props}) => {
+  return (
+    <Text style={[styles.text, style]} {...props}>
+      {children}
+    </Text>
+  );
+};
+
+export default PrimaryText;
+
+const styles = StyleSheet.create({
+  text: {
+    includeFontPadding: false,
+    color: colors.black,
+    fontFamily: fonts.primary,
+    fontSize: perfectSize(16),
+  },
+});

package/template/src/components/index.ts

@@ -0,0 +1,15 @@
+import PrimaryLoader from './PrimaryLoader';
+import PrimaryFlashMessage from './PrimaryFlashMessage';
+import PrimaryButton from './PrimaryButton';
+import PrimaryText from './PrimaryText';
+import NoInternetModalPopUp from './NoInternetModalPopUp';
+import PrimaryScrollView from './PrimaryScrollView';
+
+export {
+  PrimaryLoader,
+  PrimaryFlashMessage,
+  PrimaryButton,
+  PrimaryText,
+  PrimaryScrollView,
+  NoInternetModalPopUp,
+};

package/template/src/i18n/en.json

@@ -0,0 +1,30 @@
+{
+  "loginScreen": {
+    "loginScreen": "LogIn Screen",
+    "login": "Login",
+    "showErrorMessage": "Show Error Message"
+  },
+  "modalScreen": {
+    "modalScreen": "Modal Screen",
+    "modalDescription": "This is a modal screen. Tap outside to dismiss."
+  },
+  "homeScreen": {
+    "homeScreen": "Home Screen",
+    "openModalScreen": "Open Modal Screen",
+    "showSuccessMessage": "Show Success Message"
+  },
+  "profileScreen": {
+    "profileScreen": "Profile Screen",
+    "logout": "Logout",
+    "changeLanguage": "Change Language",
+    "cancel": "Cancel"
+  },
+  "validations": {
+    "testError": "This is error message",
+    "testSuccess": "This is success message"
+  },
+  "languages": {
+    "en": "English",
+    "es": "Spanish"
+  }
+}

package/template/src/i18n/es.json

@@ -0,0 +1,30 @@
+{
+  "loginScreen": {
+    "loginScreen": "Pantalla de Inicio de Sesión",
+    "login": "Iniciar sesión",
+    "showErrorMessage": "Mostrar mensaje de error"
+  },
+  "modalScreen": {
+    "modalScreen": "Pantalla Modal",
+    "modalDescription": "Esta es una pantalla modal. Toque afuera para cerrarla."
+  },
+  "homeScreen": {
+    "homeScreen": "Pantalla de Inicio",
+    "openModalScreen": "Abrir pantalla modal",
+    "showSuccessMessage": "Mostrar mensaje de éxito"
+  },
+  "profileScreen": {
+    "profileScreen": "Pantalla de Perfil",
+    "logout": "Cerrar sesión",
+    "changeLanguage": "Cambiar idioma",
+    "cancel": "Cancelar"
+  },
+  "validations": {
+    "testError": "Este es un mensaje de error",
+    "testSuccess": "Este es un mensaje de éxito"
+  },
+  "languages": {
+    "en": "Inglés",
+    "es": "Español"
+  }
+}

package/template/src/i18n/i18n.ts

@@ -0,0 +1,37 @@
+import i18n from 'i18next';
+import {initReactI18next} from 'react-i18next';
+import en from './en.json';
+import es from './es.json';
+import moment from 'moment';
+
+require('moment/locale/es');
+
+import {ASYNC_KEY, setAsyncData} from '@common';
+
+i18n.use(initReactI18next).init({
+  compatibilityJSON: 'v4',
+  resources: {
+    en: {translation: en},
+    es: {translation: es},
+  },
+  lng: 'en',
+  fallbackLng: 'en',
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+// Set moment locale based on i18n language
+i18n.on('languageChanged', lng => {
+  moment.locale(lng);
+});
+
+// Set initial moment locale
+moment.locale(i18n.language);
+
+export const onChangeLanguage = async (lang: string) => {
+  await i18n.changeLanguage(lang);
+  await setAsyncData(ASYNC_KEY.LANGUAGE, lang);
+};
+
+export default i18n;

package/template/src/i18n/index.ts

@@ -0,0 +1,4 @@
+import i18n from './i18n';
+
+export * from './i18n';
+export {i18n};

package/template/src/index.tsx

@@ -0,0 +1,25 @@
+import React, {FC} from 'react';
+import {MainNavigation} from '@navigation';
+import {GestureHandlerRootView} from 'react-native-gesture-handler';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {CommonStyles} from '@theme';
+import {PrimaryLoader, PrimaryFlashMessage} from '@components';
+import {Provider} from 'react-redux';
+import store from '@appRedux';
+import './i18n/i18n';
+
+const App: FC = () => {
+  return (
+    <Provider store={store}>
+      <GestureHandlerRootView style={CommonStyles.flex1}>
+        <SafeAreaProvider>
+          <MainNavigation />
+          <PrimaryLoader />
+          <PrimaryFlashMessage />
+        </SafeAreaProvider>
+      </GestureHandlerRootView>
+    </Provider>
+  );
+};
+
+export default App;

package/template/src/navigation/AppStack.tsx

@@ -0,0 +1,22 @@
+import React, {FC} from 'react';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import {AppStackParamList} from '@types';
+import {TabNavigation} from '@navigation';
+import {ModalScreen} from '@screens';
+
+const Stack = createNativeStackNavigator<AppStackParamList>();
+
+export const AppStack: FC = () => (
+  <Stack.Navigator screenOptions={{headerShown: false, headerShadowVisible: false}}>
+    <Stack.Screen name="TabNavigation" component={TabNavigation} />
+    <Stack.Group
+      screenOptions={{
+        headerShown: false,
+        presentation: 'transparentModal',
+        gestureEnabled: true,
+        animation: 'slide_from_bottom',
+      }}>
+      <Stack.Screen name="ModalScreen" component={ModalScreen} />
+    </Stack.Group>
+  </Stack.Navigator>
+);

package/template/src/navigation/AuthStack.tsx

@@ -0,0 +1,12 @@
+import React, {FC} from 'react';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import {AuthStackParamList} from '@types';
+import {LogIn} from '@screens';
+
+const Stack = createNativeStackNavigator<AuthStackParamList>();
+
+export const AuthStack: FC = () => (
+  <Stack.Navigator screenOptions={{headerShown: false}}>
+    <Stack.Screen name="LogIn" component={LogIn} />
+  </Stack.Navigator>
+);

package/template/src/navigation/MainNavigation.tsx

@@ -0,0 +1,35 @@
+import React, {FC, useEffect, useState} from 'react';
+import {NavigationContainer} from '@react-navigation/native';
+import {dispatch, setLanguage, setUserData, useAppSelector} from '@appRedux';
+import {ASYNC_KEY, getAsyncData} from '@common';
+import {NoInternetModalPopUp, PrimaryLoader} from '@components';
+import {AuthStack, AppStack, navigationRef} from '@navigation';
+
+export const MainNavigation: FC = () => {
+  const {isLogIn} = useAppSelector(state => state.profile);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    getUser();
+  }, []);
+
+  const getUser = async () => {
+    const user = await getAsyncData(ASYNC_KEY.USER);
+    const language = await getAsyncData(ASYNC_KEY.LANGUAGE);
+    if (user) {
+      dispatch(setUserData(user));
+    }
+    if (language) {
+      dispatch(setLanguage(language));
+    }
+    setIsLoading(false);
+  };
+
+  return (
+    <NavigationContainer ref={navigationRef}>
+      {!isLoading && (isLogIn ? <AppStack /> : <AuthStack />)}
+      <PrimaryLoader isLocalLoading={isLoading} />
+      <NoInternetModalPopUp />
+    </NavigationContainer>
+  );
+};

package/template/src/navigation/RootNavigationRef.ts

@@ -0,0 +1,46 @@
+import {
+  createNavigationContainerRef,
+  NavigationAction,
+  PartialState,
+  NavigationState,
+} from '@react-navigation/native';
+import {AuthStackParamList, AppStackParamList} from '@types';
+
+export type RootStackParamList = AuthStackParamList & AppStackParamList;
+
+export const navigationRef = createNavigationContainerRef<RootStackParamList>();
+
+export function navigate(
+  name: keyof RootStackParamList,
+  params?: RootStackParamList[keyof RootStackParamList],
+) {
+  if (navigationRef.isReady()) {
+    navigationRef.navigate(name as any, params as any);
+  }
+}
+
+export function goBack() {
+  if (navigationRef.isReady() && navigationRef.canGoBack()) {
+    navigationRef.goBack();
+  }
+}
+
+export function getCurrentRoute() {
+  if (navigationRef.isReady()) {
+    return navigationRef.getCurrentRoute()?.name;
+  }
+}
+
+export function resetRoot(
+  state?: PartialState<NavigationState> | NavigationState,
+) {
+  if (navigationRef.isReady()) {
+    navigationRef.resetRoot(state);
+  }
+}
+
+export function dispatch(action: NavigationAction) {
+  if (navigationRef.isReady()) {
+    navigationRef.dispatch(action);
+  }
+}

package/template/src/navigation/TabNavigator.tsx

@@ -0,0 +1,65 @@
+import React, {FC} from 'react';
+import {StyleSheet, View} from 'react-native';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {AppStackScreenProps, TabScreenRouteProp} from '@types';
+import {colors, perfectSize} from '@theme';
+import {Home, Profile} from '@screens';
+import {
+  IC_Home_Active,
+  IC_Home_UnActive,
+  IC_Setting_Active,
+  IC_Setting_UnActive,
+} from '@images';
+
+const Tabs = createBottomTabNavigator<TabScreenRouteProp>();
+
+export const TabNavigation: FC<AppStackScreenProps<'TabNavigation'>> = () => {
+  const renderTabItem = (
+    focused: boolean,
+    TabFocusedIcon: any,
+    TabUnFocusedIcon: any,
+  ) => {
+    return focused ? (
+      <TabFocusedIcon height={perfectSize(24)} width={perfectSize(24)} />
+    ) : (
+      <TabUnFocusedIcon height={perfectSize(24)} width={perfectSize(24)} />
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <Tabs.Navigator
+        id="TabNavigator"
+        screenOptions={{
+          headerShadowVisible: false,
+          headerShown: false,
+        }}>
+        <Tabs.Screen
+          name={'Home'}
+          component={Home}
+          options={{
+            tabBarLabel: () => false,
+            tabBarIcon: ({focused}) =>
+              renderTabItem(focused, IC_Home_Active, IC_Home_UnActive),
+          }}
+        />
+        <Tabs.Screen
+          name={'Profile'}
+          component={Profile}
+          options={{
+            tabBarLabel: () => false,
+            tabBarIcon: ({focused}) =>
+              renderTabItem(focused, IC_Setting_Active, IC_Setting_UnActive),
+          }}
+        />
+      </Tabs.Navigator>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.white,
+  },
+});