react-native-template-rn-homee v0.0.96

React-Native Boilerplate by Homee!

🌟 Features

React-Native version - 0.76.7

• ⛩️ Added suport for Reactotron Debugger
• 🚀 TypeScript (.tsx)
• 🌈 Splash Screen / App Icon (iOS) Natively Changed
• 🎮 Custom BottomTab with Test Screens
• 🌓 Dark & Light Theme Support
• 🚢 Navigations with React Navigation V6
• 🧙‍♂️ State Management with the ReduxToolkit and Redux-Persist
• 🧪 React-native-Async-Storage for Redux-Persist
• 🌐 Axios Api Manager
• ⚙️ Config file with Test APIs and Methods
• 🌍 Multiple Language Support with i18n
• 💎 Many Custom Components

🚀 Getting started

To create the new project, run the following command:

npx @react-native-community/cli init AwesomeProject --version 0.76.7 --template react-native-template-rn-homee

Replace "AwesomeProject" with your package name.

The boilerplate uses the Poppins font. To download the font, visit Google Fonts - Montserrat and download the Popping Font or any other font of your choice.

Copy the Regular, Medium, and Bold into src/assets/Fonts. Link the assets with:

npx react-native-asset

📸 Screenshots

A customizable loading spinner component for React Native applications with theme support and modal overlay.

Features

• Modal-based loader overlay
• Theme integration
• Customizable spinner animation
• Responsive styling
• TypeScript support
• Fade animation

Basic Usage

import AppLoader from "./path/to/AppLoader";

const MyComponent = () => {
  const [isLoading, setIsLoading] = useState(false);

  return (
    <View>
      <AppLoader isLoading={isLoading} />
      {/* Your component content */}
    </View>
  );
};

With Async Operations

const MyComponent = () => {
  const [isLoading, setIsLoading] = useState(false);

  const handleDataFetch = async () => {
    setIsLoading(true);
    try {
      await fetchData();
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <View>
      <AppLoader isLoading={isLoading} />
      <Button onPress={handleDataFetch} title="Fetch Data" />
    </View>
  );
};

Props

Spinner Configuration

Uses react-native-spinkit with the following default configuration:

• Type: 'Wave'
• Size: 24
• Color: Theme primary color
• Visibility tied to isLoading prop

AppText is a reusable, customizable text component for React Native, offering easy styling and support for dynamic content, interactive press actions, and theme integration.

Example Usage

<AppText title="This is a title" />
<AppText subtitle="This is a subtitle" textColor="#888" fontSize={18} />
<AppText label="This is a label" textAlign="center" />

AppTextInput is a reusable, customizable text input component for React Native, supporting icons on both sides, error handling, and label styling. It allows flexible usage for various types of input fields and integrates easily with themes and custom styling.

Props

Basic Text Input Example

<AppTextInput
  placeholder="Enter your name"
  leftIcon={Icons.icnUser}
  rightIcon={Icons.icnSearch}
  onLeftIconPress={() => alert("Left icon pressed!")}
  onRightIconPress={() => alert("Right icon pressed!")}
/>

AppScrollView is a reusable, customizable scroll view component built on top of KeyboardAwareScrollView from react-native-keyboard-aware-scroll-view. It enhances the user experience by automatically adjusting the scroll position when the keyboard is shown, with options to customize extra height and bounce behavior.

Props

Basic Example AppScrollView

<AppScrollView>
  <TextInput placeholder="Type here" />
  <Button title="Submit" onPress={() => alert("Submitted!")} />
</AppScrollView>

AppMainContainer is a customizable wrapper component that provides safe area handling for both the top and bottom of the screen. It uses SafeAreaView to ensure that your content is appropriately placed within the safe areas on devices with notches or rounded corners. It also allows for flexible customization of background colors and the option to hide the top or bottom safe areas.

Props

Basic Usage

<AppMainContainer>
  <Text>Your content goes here!</Text>
</AppMainContainer>

API Utility: APIMethods

APIMethods provides utility functions for making GET and POST requests to your API, with built-in internet connectivity checks, error handling, and customizable headers.

Functions

get(endpoint: string, params?: object, customHeaders?: object): Promise<any>

Sends a GET request to the provided API endpoint.

Parameters:

• endpoint (string): The API endpoint you want to send the request to.
• params (object, optional): The query parameters to include in the request (default is an empty object).
• customHeaders (object, optional): Additional headers to send with the request.

Returns:

A promise that resolves to the response data from the API or an error message if the request fails (or no internet connection).

Example:

const data = await APIMethods.get("user/profile", { userId: 123 });
console.log(data);

post(endpoint: string, data: object, customHeaders?: object): Promise<any>

Sends a POST request to the provided API endpoint.

Parameters:

• endpoint (string): The API endpoint you want to send the request to.
• data (object): The data to be sent in the request body.
• customHeaders (object, optional): Additional headers to send with the request.

Returns:

A promise that resolves to the response data from the API or an error message if the request fails (or no internet connection).

Example:

const response = await APIMethods.post("auth/login", {
  username: "user@example.com",
  password: "********",
});
console.log(response);

Theme Provider Utility

A React Native theme management system that provides dark/light theme switching capabilities with Redux integration and system theme support.

Features

• Dark/Light theme switching
• System theme detection
• Redux state management
• Status bar style management
• TypeScript support
• Context-based theme access

Usage

Theme Provider Setup

Wrap your app with the ThemeProvider:

import { ThemeProvider } from "./path/to/ThemeProvider";

const App = () => {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
};

Using Theme Hook

Access theme values and controls in your components:

import { useTheme } from "./path/to/ThemeProvider";

const MyComponent = () => {
  const { isDarkMode, AppColors, toggleTheme } = useTheme();

  return (
    <View style={{ backgroundColor: AppColors.background }}>
      <Text style={{ color: AppColors.text }}>
        Current theme: {isDarkMode ? "Dark" : "Light"}
      </Text>
      <Button onPress={toggleTheme} title="Toggle Theme" />
    </View>
  );
};

API Reference

ThemeProvider Props

• children (ReactNode): Child components
• isDisabled (boolean, optional): Forces light theme when true. Default: false

useTheme Hook Returns

• isDarkMode (boolean): Current theme state
• AppColors (ThemeTypes): Current theme colors
• toggleTheme (() => void): Function to switch theme

Error Handling

The useTheme hook will throw an error if used outside of ThemeProvider:

"useTheme must be used within a ThemeProvider";

🧙‍♂️Author

• @homeejadav - Homee J.

Contributions

All talented wizards and witches are welcome to contribute their magic. 🪄