new-react-native-boilerplate 0.0.0-stage → 1.0.0

package/template/src/components/atoms/ButtonContainer.tsx

@@ -0,0 +1,52 @@
+import {TextContainer} from '@components/atoms';
+import {moderateScale} from '@utils/scaling';
+import React from 'react';
+import type { PressableProps, ViewStyle} from 'react-native';
+import {ActivityIndicator, Pressable} from 'react-native';
+import {createStyleSheet, UnistylesRuntime, useStyles} from 'react-native-unistyles';
+
+const stylesheet = createStyleSheet(theme => ({
+  btnStyle: (isDarkMode: boolean) => ({
+    alignItems: 'center',
+    backgroundColor: isDarkMode ? theme.colors.white : theme.colors.black,
+    borderRadius: moderateScale(8),
+    height: moderateScale(52),
+    justifyContent: 'center',
+  }),
+}));
+
+interface CustomButtonProps extends PressableProps {
+  isLoading?: boolean;
+  label: string;
+  style?: ViewStyle;
+  textStyle?: object;
+}
+
+const ButtonContainer: React.FC<CustomButtonProps> = ({
+  isLoading,
+  label,
+  style,
+  textStyle,
+  ...props
+}) => {
+  const {styles, theme} = useStyles(stylesheet);
+  const isDarkMode = UnistylesRuntime.themeName === 'dark';
+
+  return (
+    <Pressable style={[styles.btnStyle(isDarkMode), style]} {...props}>
+      {isLoading ? (
+        <ActivityIndicator color={isDarkMode ? theme.colors.black : theme.colors.white} />
+      ) : (
+        <TextContainer
+          style={{
+            color: isDarkMode ? theme.colors.black : theme.colors.white,
+            ...textStyle,
+          }}
+          text={label}
+        />
+      )}
+    </Pressable>
+  );
+};
+
+export default React.memo(ButtonContainer);

package/template/src/components/atoms/ImageContainer.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import type { ImageProps} from "react-native";
+import { Image as RNImage } from "react-native";
+import { useStyles } from "react-native-unistyles";
+
+const ImageContainer: React.FC<ImageProps> = ({ ...rest }) => {
+  const { theme } = useStyles();
+  return <RNImage tintColor={theme.colors.typography} {...rest} />;
+};
+export default ImageContainer;

package/template/src/components/atoms/RemoteImage.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { Image as RNImage } from "react-native";
+import type { ImageProps } from "react-native";
+
+const RemoteImage: React.FC<ImageProps> = ({ ...rest }) => (
+  <RNImage {...rest} />
+);
+export default React.memo(RemoteImage);

package/template/src/components/atoms/RoundImageBorder.tsx

@@ -0,0 +1,35 @@
+import { moderateScale } from "@utils/scaling";
+import React from "react";
+import type { ImageProps} from "react-native";
+import { Image as RNImage, View } from "react-native";
+import { createStyleSheet, useStyles } from "react-native-unistyles";
+
+const stylesheet = createStyleSheet((theme) => ({
+  container: {
+    alignItems: "center",
+    backgroundColor: theme.colors.background,
+    borderColor: "rgba(90,90,90,0.5)",
+    borderRadius: moderateScale(25),
+    borderWidth: 0.5,
+    height: moderateScale(50),
+    justifyContent: "center",
+    width: moderateScale(50),
+  },
+}));
+
+interface CustomImageProps extends ImageProps {
+  imageStyle?: object;
+  viewStyle?: object;
+}
+
+// Define the component
+const RoundImageBorder: React.FC<CustomImageProps> = ({ imageStyle, viewStyle, ...props }) => {
+  const { styles, theme } = useStyles(stylesheet);
+  return (
+    <View style={[styles.container, viewStyle]}>
+      <RNImage tintColor={theme.colors.darkwhite} {...props} />
+    </View>
+  );
+};
+
+export default React.memo(RoundImageBorder);

package/template/src/components/atoms/TextContainer.tsx

@@ -0,0 +1,38 @@
+import fontFamily from "@constants/fontFamily";
+import { scale } from "@utils/scaling";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import type { TextProps } from "react-native";
+import { Text } from "react-native";
+import { createStyleSheet, useStyles } from "react-native-unistyles";
+
+const stylesheet = createStyleSheet((theme) => ({
+  sectionTitle: {
+    color: theme.colors.typography,
+    fontFamily: fontFamily.regular,
+    fontSize: scale(14),
+  },
+}));
+
+interface TextContainterProps extends TextProps {
+  isDynamicText?: boolean;
+  style?: object;
+  text: "" | string;
+}
+
+const TextContainer: React.FC<TextContainterProps> = ({
+  isDynamicText = false,
+  style,
+  text,
+  ...rest
+}) => {
+  const { t } = useTranslation();
+  const { styles } = useStyles(stylesheet);
+  return (
+    <Text style={[styles.sectionTitle, style]} {...rest}>
+      {isDynamicText ? text : t(text)}
+    </Text>
+  );
+};
+
+export default React.memo(TextContainer);

package/template/src/components/atoms/WrapperContainer.tsx

@@ -0,0 +1,43 @@
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+import { StatusBar, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { createStyleSheet, useStyles } from 'react-native-unistyles';
+
+const stylesheet = createStyleSheet(theme => ({
+  container: {
+    backgroundColor: theme.colors.background,
+    flex: 1,
+  },
+}));
+
+type SectionProps = PropsWithChildren<{
+  isSafeAreaView?: boolean;
+  style?: object;
+}>;
+
+const WrapperContainer = ({
+  children,
+  isSafeAreaView = true,
+  style,
+}: SectionProps): React.JSX.Element => {
+  const {styles} = useStyles(stylesheet);
+  const {theme} = useStyles();
+
+  if (isSafeAreaView) {
+    return (
+      <SafeAreaView style={[styles.container, style]}>
+        <StatusBar barStyle={theme.colors.barStyle} />
+        {children}
+      </SafeAreaView>
+    );
+  }
+  return (
+    <View style={[styles.container, style]}>
+      <StatusBar barStyle={theme.colors.barStyle} />
+      {children}
+    </View>
+  );
+};
+
+export default React.memo(WrapperContainer);

package/template/src/components/atoms/index.ts

@@ -0,0 +1,6 @@
+export { default as ButtonContainer } from './ButtonContainer';
+export { default as ImageContainer } from './ImageContainer';
+export { default as RemoteImage } from './RemoteImage';
+export { default as RoundImageBorder } from './RoundImageBorder';
+export { default as TextContainer } from './TextContainer';
+export { default as WrapperContainer } from './WrapperContainer';

package/template/src/components/molecules/AuthHeader.tsx

@@ -0,0 +1,55 @@
+import { ImageContainer, TextContainer } from "@components/atoms";
+import fontFamily from "@constants/fontFamily";
+import imagePath from "@constants/imagePath";
+import { moderateScale, scale, verticalScale } from "@utils/scaling";
+import type { PropsWithChildren } from "react";
+import React from "react";
+import type { ViewStyle } from "react-native";
+import { View } from "react-native";
+import { createStyleSheet, useStyles } from "react-native-unistyles";
+
+const stylesheet = createStyleSheet(() => ({
+  descStyle: {
+    fontFamily: fontFamily.regular,
+    fontSize: scale(14),
+    lineHeight: scale(27),
+    marginBottom: verticalScale(24),
+    marginTop: verticalScale(8),
+    opacity: 0.5,
+  },
+  headerStyle: {
+    alignItems: "center",
+    flexDirection: "row",
+    marginBottom: verticalScale(32),
+  },
+  titleStyle: {
+    fontFamily: fontFamily.semiBold,
+    fontSize: scale(27),
+  },
+}));
+
+type SectionProps = PropsWithChildren<{
+  description: string;
+  style?: ViewStyle;
+  title: string;
+}>;
+
+const AuthHeader = ({ description, style = {}, title }: SectionProps): React.JSX.Element => {
+  const { styles } = useStyles(stylesheet);
+  return (
+    <>
+      <View style={[styles.headerStyle, style]}>
+        <ImageContainer source={imagePath.icStar} />
+        <ImageContainer
+          resizeMode="cover"
+          source={imagePath.icLine}
+          style={{ marginLeft: moderateScale(16), width: "100%" }}
+        />
+      </View>
+      <TextContainer style={styles.titleStyle} text={title} />
+      <TextContainer style={styles.descStyle} text={description} />
+    </>
+  );
+};
+
+export default React.memo(AuthHeader);

package/template/src/components/molecules/CustomTextInput.tsx

@@ -0,0 +1,102 @@
+import {TextContainer} from '@components/atoms';
+import fontFamily from '@constants/fontFamily';
+import {moderateScale, scale, verticalScale} from '@utils/scaling';
+import React, {forwardRef, Ref, useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import type {ImageSourcePropType, TextInputInstance,TextInputProps} from 'react-native';
+import { Pressable, TextInput, View} from 'react-native';
+import {createStyleSheet, useStyles} from 'react-native-unistyles';
+import ImageContainer from '../atoms/ImageContainer';
+
+const stylesheet = createStyleSheet(theme => ({
+  errorText: {
+    color: theme.colors.danger,
+    fontFamily: fontFamily.medium,
+    fontSize: scale(12),
+    marginLeft: scale(2),
+    marginTop: verticalScale(5),
+  },
+  input: {
+    alignItems: 'center',
+    backgroundColor: theme.colors.textInputColor,
+    borderColor: 'rgba(217, 217, 217,1)',
+    borderRadius: moderateScale(10),
+    borderWidth: moderateScale(0.5),
+    flexDirection: 'row',
+    height: moderateScale(52),
+    paddingHorizontal: moderateScale(12),
+  },
+  labelStyle: {
+    fontFamily: fontFamily.medium,
+    fontSize: scale(14),
+    marginBottom: moderateScale(8),
+  },
+  textInputStyle: {
+    color: theme.colors.typography,
+    flex: 1,
+    fontFamily: fontFamily.medium,
+    fontSize: scale(12),
+    height: moderateScale(52),
+    marginHorizontal: moderateScale(8),
+  },
+}));
+
+interface CustomTextInputProps extends TextInputProps {
+  error?: null | string;
+  label: string;
+  leftImage?: ImageSourcePropType | null;
+  onChangeText: (text: string) => void;
+  onPressRight?: () => void;
+  placeholder: string;
+  rightImage?: ImageSourcePropType | null;
+  style?: object;
+}
+
+const CustomTextInput = forwardRef<TextInputInstance, CustomTextInputProps>(
+  (
+    {error, label, leftImage, onChangeText, onPressRight, placeholder, rightImage, style, ...rest},
+    ref,
+  ) => {
+    const [text, setText] = useState('');
+    const {styles, theme} = useStyles(stylesheet);
+    const {t} = useTranslation();
+
+    const handleTextChange = (inputText: string) => {
+      setText(inputText);
+      if (onChangeText) {
+        onChangeText(inputText);
+      }
+    };
+
+    return (
+      <View style={style}>
+        {label ? <TextContainer style={styles.labelStyle} text={label} /> : null}
+        <View style={styles.input}>
+          {leftImage ? (
+            <ImageContainer
+              resizeMode="contain"
+              source={leftImage}
+              style={{height: moderateScale(16), width: moderateScale(16)}}
+            />
+          ) : null}
+          <TextInput
+            onChangeText={handleTextChange}
+            placeholder={t(`${placeholder}`)}
+            placeholderTextColor={theme.colors.placeholder}
+            ref={ref}
+            style={styles.textInputStyle}
+            value={text}
+            {...rest}
+          />
+          {rightImage ? (
+            <Pressable onPress={onPressRight}>
+              <ImageContainer source={rightImage} />
+            </Pressable>
+          ) : null}
+        </View>
+        {error && <TextContainer style={styles.errorText} text={error} />}
+      </View>
+    );
+  },
+);
+export default React.memo(CustomTextInput);

package/template/src/components/molecules/EmptyComp.tsx

@@ -0,0 +1,16 @@
+ 
+
+import React from "react";
+import { ActivityIndicator, View } from "react-native";
+import ErrorComp from "./ErrorComp";
+
+type EmptyCompType = {
+  isError: boolean;
+  isLoading: boolean;
+};
+const EmptyComp: React.FC<EmptyCompType> = ({ isError, isLoading }): React.JSX.Element => {
+  const emptyComponent = isLoading ? <ActivityIndicator /> : isError ? <ErrorComp /> : <View />;
+  return emptyComponent;
+};
+
+export default EmptyComp;

package/template/src/components/molecules/ErrorComp.tsx

@@ -0,0 +1,25 @@
+import {TextContainer, WrapperContainer} from '@components/atoms';
+import React from 'react';
+import {View} from 'react-native';
+import {createStyleSheet, useStyles} from 'react-native-unistyles';
+
+const stylesheet = createStyleSheet(() => ({
+  container: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+}));
+
+const ErrorComp = (): React.JSX.Element => {
+  const {styles} = useStyles(stylesheet);
+  return (
+    <WrapperContainer isSafeAreaView={false}>
+      <View style={styles.container}>
+        <TextContainer text="SOMETHING_WENT_WRONG" />
+      </View>
+    </WrapperContainer>
+  );
+};
+
+export default React.memo(ErrorComp);

package/template/src/components/molecules/FooterView.tsx

@@ -0,0 +1,41 @@
+import {TextContainer} from '@components/atoms';
+import fontFamily from '@constants/fontFamily';
+import {moderateScale} from '@utils/scaling';
+import React from 'react';
+import type {GestureResponderEvent} from 'react-native';
+import { View} from 'react-native';
+import {createStyleSheet, useStyles} from 'react-native-unistyles';
+
+const stylesheet = createStyleSheet(() => ({
+  bottomView: {
+    alignItems: 'center',
+    alignSelf: 'center',
+    flexDirection: 'row',
+  },
+  text: {
+    fontFamily: fontFamily.semiBold,
+    marginLeft: moderateScale(4),
+  },
+}));
+
+const FooterView = ({
+  linkPress,
+  linkText,
+  simpleText,
+}: {
+  linkPress: ((event: GestureResponderEvent) => void) | undefined;
+  linkText: string;
+  simpleText: string;
+}): React.JSX.Element => {
+  // Stylesheet declaration
+  const {styles} = useStyles(stylesheet);
+
+  return (
+    <View style={styles.bottomView}>
+      <TextContainer text={simpleText} />
+      <TextContainer onPress={linkPress} style={styles.text} text={linkText} />
+    </View>
+  );
+};
+
+export default FooterView;

package/template/src/components/molecules/HeaderComp.tsx

@@ -0,0 +1,51 @@
+import RoundImageBorder from "@components/atoms/RoundImageBorder";
+import imagePath from "@constants/imagePath";
+import { useNavigation } from "@react-navigation/native";
+import { moderateScale } from "@utils/scaling";
+import type { PropsWithChildren } from "react";
+import React from "react";
+import type { ImageSourcePropType} from "react-native";
+import { Pressable, View } from "react-native";
+import { createStyleSheet, useStyles } from "react-native-unistyles";
+
+const stylesheet = createStyleSheet(() => ({
+  headerStyle: {
+    alignItems: "center",
+    flexDirection: "row",
+    height: moderateScale(60),
+    justifyContent: "space-between",
+  },
+}));
+
+type SectionProps = PropsWithChildren<{
+  leftImage?: ImageSourcePropType;
+  onPressLeft?: () => void;
+  onPressRight?: () => void;
+  rightImage?: ImageSourcePropType;
+  style?: object;
+}>;
+
+const HeaderComp = ({
+  leftImage = imagePath.icBack,
+  onPressLeft,
+  onPressRight,
+  rightImage = imagePath.icShare,
+  style,
+}: SectionProps): React.JSX.Element => {
+  const navigation = useNavigation();
+
+  const { styles } = useStyles(stylesheet);
+
+  return (
+    <View style={{ ...styles.headerStyle, ...style }}>
+      <Pressable onPress={onPressLeft || (() => navigation.goBack())}>
+        <RoundImageBorder source={leftImage} />
+      </Pressable>
+      <Pressable onPress={onPressRight}>
+        <RoundImageBorder source={rightImage} />
+      </Pressable>
+    </View>
+  );
+};
+
+export default React.memo(HeaderComp);

package/template/src/components/molecules/HomeHeader.tsx

@@ -0,0 +1,63 @@
+import { ImageContainer, TextContainer } from "@components/atoms";
+import fontFamily from "@constants/fontFamily";
+import imagePath from "@constants/imagePath";
+import { moderateScale, scale, verticalScale } from "@utils/scaling";
+import React from "react";
+import type { PropsWithChildren } from "react";
+import type { ViewStyle } from "react-native";
+import { Image, Pressable, View } from "react-native";
+import { createStyleSheet, useStyles } from "react-native-unistyles";
+
+const stylesheet = createStyleSheet(() => ({
+  descStyle: {
+    fontFamily: fontFamily.regular,
+    fontSize: scale(14),
+    lineHeight: scale(27),
+    marginBottom: verticalScale(24),
+    marginTop: verticalScale(8),
+    opacity: 0.5,
+  },
+  headerStyle: {
+    alignItems: "center",
+    flexDirection: "row",
+    height: moderateScale(60),
+    justifyContent: "space-between",
+  },
+  profileImage: {
+    borderRadius: moderateScale(25),
+    height: moderateScale(50),
+    width: moderateScale(50),
+  },
+  titleStyle: {
+    fontFamily: fontFamily.semiBold,
+    fontSize: scale(24),
+    lineHeight: scale(27),
+  },
+}));
+
+type SectionProps = PropsWithChildren<{
+  onPress?: () => void;
+  style?: ViewStyle;
+  title?: string;
+}>;
+
+const HeaderComp = ({ onPress, style, title }: SectionProps): React.JSX.Element => {
+  const { styles } = useStyles(stylesheet);
+  return (
+    <View key="header" style={{ ...styles.headerStyle, ...style }}>
+      <Image
+        key="profileImage"
+        source={{
+          uri: "https://m.media-amazon.com/images/I/31Cd9UQp6eL._AC_UF1000,1000_QL80_.jpg",
+        }}
+        style={styles.profileImage}
+      />
+      <TextContainer key="title" style={styles.titleStyle} text={`${title}`} />
+      <Pressable key="setting" onPress={onPress}>
+        <ImageContainer source={imagePath.icSetting} />
+      </Pressable>
+    </View>
+  );
+};
+
+export default React.memo(HeaderComp);

package/template/src/components/molecules/HomeListHeader.tsx

@@ -0,0 +1,48 @@
+import {TextContainer} from '@components/atoms';
+import fontFamily from '@constants/fontFamily';
+import {moderateScale, scale, verticalScale} from '@utils/scaling';
+import React, {memo} from 'react';
+import {View} from 'react-native';
+import {createStyleSheet, useStyles} from 'react-native-unistyles';
+import SearchBar from './SearchBar';
+
+const stylesheet = createStyleSheet(theme => ({
+  flexRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: verticalScale(15),
+    marginHorizontal: moderateScale(20),
+  },
+  recommendTextStyle: {
+    fontFamily: fontFamily.medium,
+    fontSize: scale(18),
+  },
+  searchBarStyle: {
+    marginBottom: verticalScale(20),
+    marginHorizontal: moderateScale(16),
+    marginTop: verticalScale(28),
+  },
+  textStyle: {
+    color: theme.colors.typography,
+  },
+}));
+
+const HomeListHeader: React.FC = memo(() => {
+  const {styles} = useStyles(stylesheet);
+  return (
+    <>
+      <SearchBar
+        style={styles.searchBarStyle}
+        textStyle={styles.textStyle}
+        title="FIND_INTERESTING_BLOG"
+      />
+      <View style={styles.flexRow}>
+        <TextContainer style={styles.recommendTextStyle} text="RECOMMEND" />
+        <TextContainer text="SEE_MORE" />
+      </View>
+    </>
+  );
+});
+
+export default React.memo(HomeListHeader);