react-native-boiler-plate-vijay 1.0.0

package/template/src/navigation/index.ts

@@ -0,0 +1,5 @@
+export * from './MainNavigation';
+export * from './AuthStack';
+export * from './AppStack';
+export * from './RootNavigationRef';
+export * from './TabNavigator';

package/template/src/screens/Home/index.tsx

@@ -0,0 +1,51 @@
+import React, {FC} from 'react';
+import {StyleSheet, View} from 'react-native';
+import {TabNavigationWithAppStackScreenProps} from '@types';
+import {colors, perfectSize} from '@theme';
+import {fonts} from '@fonts';
+import {PrimaryButton, PrimaryText} from '@components';
+import {showSuccessMessage} from '@common';
+import {useTranslation} from 'react-i18next';
+import moment from 'moment';
+
+const Home: FC<TabNavigationWithAppStackScreenProps<'Home'>> = ({
+  navigation,
+}) => {
+  const {t: translate} = useTranslation();
+  return (
+    <View style={styles.mainView}>
+      <PrimaryText style={styles.lblLoginScreen}>
+        {translate('homeScreen.homeScreen')}
+      </PrimaryText>
+      <PrimaryText style={styles.lblLoginScreen}>
+        {moment().format('LLLL')}
+      </PrimaryText>
+      <PrimaryButton
+        label={translate('homeScreen.openModalScreen')}
+        onPress={() => navigation.navigate('ModalScreen')}
+      />
+      <PrimaryButton
+        label={translate('homeScreen.showSuccessMessage')}
+        onPress={() => {
+          showSuccessMessage(translate('validations.testSuccess'));
+        }}
+      />
+    </View>
+  );
+};
+
+export default Home;
+
+const styles = StyleSheet.create({
+  mainView: {
+    flex: 1,
+    backgroundColor: colors.white,
+    justifyContent: 'center',
+    alignItems: 'center',
+    rowGap: perfectSize(20),
+  },
+  lblLoginScreen: {
+    fontFamily: fonts.bold,
+    fontSize: perfectSize(20),
+  },
+});

package/template/src/screens/Login/index.tsx

@@ -0,0 +1,48 @@
+import {StyleSheet, View} from 'react-native';
+import React, {FC} from 'react';
+import {AuthStackScreenProps} from '@types';
+import {colors, perfectSize} from '@theme';
+import {PrimaryButton, PrimaryText} from '@components';
+import {fonts} from '@fonts';
+import {showDangerMessage} from '@common';
+import {useTranslation} from 'react-i18next';
+import {dispatch, initialState, setUserData} from '@appRedux';
+
+const LogIn: FC<AuthStackScreenProps<'LogIn'>> = ({navigation}) => {
+  const {t: translate} = useTranslation();
+  return (
+    <View style={styles.mainView}>
+      <PrimaryText style={styles.lblLoginScreen}>
+        {translate('loginScreen.loginScreen')}
+      </PrimaryText>
+      <PrimaryButton
+        label={translate('loginScreen.login')}
+        onPress={() => {
+          dispatch(setUserData(initialState.userData));
+        }}
+      />
+      <PrimaryButton
+        label={translate('loginScreen.showErrorMessage')}
+        onPress={() => {
+          showDangerMessage(translate('validations.testError'));
+        }}
+      />
+    </View>
+  );
+};
+
+export default LogIn;
+
+const styles = StyleSheet.create({
+  mainView: {
+    flex: 1,
+    backgroundColor: colors.white,
+    justifyContent: 'center',
+    alignItems: 'center',
+    rowGap: perfectSize(20),
+  },
+  lblLoginScreen: {
+    fontFamily: fonts.bold,
+    fontSize: perfectSize(20),
+  },
+});

package/template/src/screens/ModalScreen/index.tsx

@@ -0,0 +1,56 @@
+import {Pressable, StyleSheet, Text} from 'react-native';
+import React, {FC} from 'react';
+import {AppStackScreenProps} from '@types';
+import {colors, perfectSize} from '@theme';
+import {fonts} from '@fonts';
+import {PrimaryText} from '@components';
+import {useTranslation} from 'react-i18next';
+
+const ModalScreen: FC<AppStackScreenProps<'ModalScreen'>> = ({navigation}) => {
+  const {t: translate} = useTranslation();
+
+  return (
+    <Pressable style={styles.backdrop} onPress={() => navigation.goBack()}>
+      <Pressable style={styles.card} onPress={() => {}}>
+        <PrimaryText style={styles.title}>
+          {translate('modalScreen.modalScreen')}
+        </PrimaryText>
+        <PrimaryText style={styles.description}>
+          {translate('modalScreen.modalDescription')}
+        </PrimaryText>
+      </Pressable>
+    </Pressable>
+  );
+};
+
+export default ModalScreen;
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: colors.black60,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  card: {
+    width: '85%',
+    backgroundColor: colors.white,
+    borderRadius: perfectSize(20),
+    paddingVertical: perfectSize(32),
+    paddingHorizontal: perfectSize(24),
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: perfectSize(18),
+    fontFamily: fonts.semiBold,
+    color: colors.black,
+    marginBottom: perfectSize(8),
+  },
+  description: {
+    fontSize: perfectSize(13),
+    fontFamily: fonts.primary,
+    color: colors.black,
+    textAlign: 'center',
+    opacity: 0.5,
+  },
+});

package/template/src/screens/Profile/index.tsx

@@ -0,0 +1,68 @@
+import React, {FC} from 'react';
+import {Alert, StyleSheet, View} from 'react-native';
+import {TabNavigationWithAppStackScreenProps} from '@types';
+import {colors, perfectSize} from '@theme';
+import {fonts} from '@fonts';
+import {PrimaryButton, PrimaryText} from '@components';
+import {useTranslation} from 'react-i18next';
+import {dispatch, resetUserData, setLanguage} from '@appRedux';
+
+const Profile: FC<TabNavigationWithAppStackScreenProps<'Profile'>> = ({
+  navigation,
+}) => {
+  const {t: translate} = useTranslation();
+
+  const handleChangeLanguage = () => {
+    Alert.alert(
+      'Change Language',
+      'Are you sure you want to change language?',
+      [
+        {
+          text: translate('profileScreen.cancel'),
+          onPress: () => console.log('Cancel Pressed'),
+          style: 'destructive',
+        },
+        {
+          text: translate('languages.en'),
+          onPress: async () => dispatch(setLanguage('en')),
+        },
+        {
+          text: translate('languages.es'),
+          onPress: async () => dispatch(setLanguage('es')),
+        },
+      ],
+    );
+  };
+
+  return (
+    <View style={styles.mainView}>
+      <PrimaryText style={styles.lblLoginScreen}>
+        {translate('profileScreen.profileScreen')}
+      </PrimaryText>
+      <PrimaryButton
+        label={translate('profileScreen.changeLanguage')}
+        onPress={handleChangeLanguage}
+      />
+      <PrimaryButton
+        label={translate('profileScreen.logout')}
+        onPress={() => dispatch(resetUserData())}
+      />
+    </View>
+  );
+};
+
+export default Profile;
+
+const styles = StyleSheet.create({
+  mainView: {
+    flex: 1,
+    backgroundColor: colors.white,
+    justifyContent: 'center',
+    alignItems: 'center',
+    rowGap: perfectSize(20),
+  },
+  lblLoginScreen: {
+    fontFamily: fonts.bold,
+    fontSize: perfectSize(20),
+  },
+});

package/template/src/screens/index.ts

@@ -0,0 +1,5 @@
+import LogIn from './Login';
+import Home from './Home';
+import Profile from './Profile';
+import ModalScreen from './ModalScreen';
+export {LogIn, Home, Profile, ModalScreen};

package/template/src/theme/colors.ts

@@ -0,0 +1,7 @@
+export const colors = {
+  white: '#FFFFFF',
+  black: '#000000',
+  black50: '#00000050',
+  black60: '#00000060',
+  primary: '#6C63FF',
+};

package/template/src/theme/dimensions.ts

@@ -0,0 +1,35 @@
+import {Dimensions} from 'react-native';
+
+export const {width, height} = Dimensions.get('screen');
+
+type DesignSize = {width: number; height: number};
+
+const CURRENT_RESOLUTION = Math.sqrt(height * height + width * width);
+
+// Creates a scaling function based on the design resolution
+const create = (designSize: DesignSize): ((size: number) => number) => {
+  if (
+    !designSize ||
+    typeof designSize?.width !== 'number' ||
+    typeof designSize?.height !== 'number' ||
+    !designSize?.width ||
+    !designSize?.height
+  ) {
+    throw new Error(
+      'create function | Invalid design size object! must have width and height fields of type Number.',
+    );
+  }
+  const DESIGN_RESOLUTION = Math.sqrt(
+    designSize.height * designSize.height + designSize.width * designSize.width,
+  );
+  const RESOLUTIONS_PROPORTION = CURRENT_RESOLUTION / DESIGN_RESOLUTION;
+  return (size: number) => Number((RESOLUTIONS_PROPORTION * size).toFixed());
+};
+
+// The screen size your design is based on (e.g. iPhone 14 Pro Max)
+const designResolution: DesignSize = {
+  width: 430,
+  height: 932,
+};
+
+export const perfectSize = create(designResolution);

package/template/src/theme/index.ts

@@ -0,0 +1,3 @@
+export * from './colors';
+export * from './dimensions';
+export * from './styles';

package/template/src/theme/styles.ts

@@ -0,0 +1,7 @@
+import {StyleSheet} from 'react-native';
+
+export const CommonStyles = StyleSheet.create({
+  flex1: {
+    flex: 1,
+  },
+});

package/template/src/types/declarations.d.ts

@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import React from 'react';
+  import {SvgProps} from 'react-native-svg';
+  const content: React.FC<SvgProps>;
+  export default content;
+}

package/template/src/types/index.ts

@@ -0,0 +1,64 @@
+import {BottomTabScreenProps} from '@react-navigation/bottom-tabs';
+import {
+  CompositeScreenProps,
+  NavigatorScreenParams,
+} from '@react-navigation/native';
+import {NativeStackScreenProps} from '@react-navigation/native-stack';
+
+export type AuthStackParamList = {
+  LogIn: undefined;
+};
+
+export type AppStackParamList = {
+  // https://reactnavigation.org/docs/typescript#nesting-navigators
+  TabNavigation?: NavigatorScreenParams<TabScreenRouteProp>;
+  ModalScreen: undefined;
+};
+
+export type TabScreenRouteProp = {
+  Home: undefined;
+  Profile: undefined;
+};
+
+// Auth stack screen props — for screens inside AuthStack (e.g. LogIn)
+export type AuthStackScreenProps<T extends keyof AuthStackParamList> =
+  NativeStackScreenProps<AuthStackParamList, T>;
+
+// App stack screen props — for screens inside AppStack (e.g. ModalScreen)
+export type AppStackScreenProps<T extends keyof AppStackParamList> =
+  NativeStackScreenProps<AppStackParamList, T>;
+
+// Tab screen props — for screens inside TabNavigator
+export type TabNavigationScreenProps<T extends keyof TabScreenRouteProp> =
+  BottomTabScreenProps<TabScreenRouteProp, T>;
+
+// Composite props — for tab screens that also need to navigate to AppStack screens
+export type TabNavigationWithAppStackScreenProps<
+  T extends keyof TabScreenRouteProp,
+> = CompositeScreenProps<
+  BottomTabScreenProps<TabScreenRouteProp, T>,
+  NativeStackScreenProps<AppStackParamList, keyof AppStackParamList>
+>;
+
+export type UserTypes = {
+  _id: string;
+  user_name: string;
+  first_name: string;
+  last_name: string;
+  email: string;
+  password: string;
+  user_type: number;
+  created_at: string;
+  __v: number;
+  resetToken: string;
+  device_info: string;
+  device_os_version: string;
+  device_type: string;
+  token: string;
+};
+
+export type ResponseType<Data = any> = {
+  data?: Data;
+  status: number;
+  message: string;
+};

package/template/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "@react-native/typescript-config",
+  "compilerOptions": {
+    "types": ["jest"],
+    "ignoreDeprecations": "6.0",
+    "baseUrl": ".",
+    "paths": {
+      "@api": ["./src/api"],
+      "@assets": ["./src/assets"],
+      "@common": ["./src/common"],
+      "@components": ["./src/components"],
+      "@fonts": ["./src/assets/fonts"],
+      "@hooks": ["./src/hooks"],
+      "@i18n": ["./src/i18n"],
+      "@images": ["./src/assets/images"],
+      "@navigation": ["./src/navigation"],
+      "@appRedux": ["./src/appRedux"],
+      "@screens": ["./src/screens"],
+      "@services": ["./src/services"],
+      "@static": ["./src/static"],
+      "@theme": ["./src/theme"],
+      "@types": ["./src/types"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["**/node_modules", "**/Pods"]
+}

package/template.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  // Placeholder used across the template — CLI replaces this with the user's app name
+  placeholderName: 'HelloWorld',
+
+  // Placeholder for the title shown in app.json displayName
+  titlePlaceholder: 'Hello App Display Name',
+
+  // The folder containing the actual template files
+  templateDir: './template',
+};