react native template Download - react native template Source code download

react native template

Other source code

System-design

Download

React Native Template

This project is a React Native template designed to accelerate development by providing essential features such as state management, internationalization, data fetching, navigation, and reusable components.

Screenshots

Created using the default components provided in the project.

Welcome Screen

Login Screen

Register Screen

register Screen

Profile Screen

profile Screen

Features

? Internationalization (i18n)
- Multi-language support using react-i18next for seamless localization.
?️ State Management with Redux
- Centralized state management for efficient global state access and updates.
? Data Fetching with React Query
- Optimized data fetching, caching, and synchronization.
? Navigation
- Smooth and intuitive navigation using react-navigation with base components like VStack and HStack.
⚛️ Component-Based Architecture
- Modular design with reusable UI components and consistent styling.
? Common Utilities
- Helper functions and utilities for streamlined development.
? Axios Management
- Configurable API requests using Axios with built-in error handling and response management.
WebSocket Management
- Real-time communication support using WebSockets.
? Cookie Management
- Simplified management of cookies for authentication and user sessions.
Authentication
- User authentication and registration with secure token management.

Components

The project includes a set of reusable components for building user interfaces:

Button Components
- button.tsx: Standard button component with customizable styling.
Typography Components
- h1.tsx, h2.tsx: Heading components for consistent typography.
- text.tsx: Customizable text component for displaying content.
Input Components
- input.tsx: Basic input field component.
- input-with-icon.tsx: Input field with an icon for enhanced user interaction.
Layout Components
- vstack.tsx: Vertical stack layout for arranging elements vertically.
- hstack.tsx: Horizontal stack layout for arranging elements horizontally.
- spacer.tsx: Spacer component for adding flexible space between elements.
Navigation Components
- navbar.tsx: Customizable navigation bar for app header.
Image Components
- image.tsx: Image component for displaying images with caching support.
Utility Components
- separator.tsx: Divider component for separating content.
- separator-with-text.tsx: Divider with text for enhanced UI.
- switch.tsx: Toggle switch component for boolean inputs.
Index File
- index.ts: Central export file for components.

Getting Started

Prerequisites

Ensure you have the following installed:

Node.js (v14 or higher)
Yarn
Android Studio / Xcode for Android/iOS development

Installation

Clone the repository:

git clone [email protected]:ToniDarodda/react-native-template.git
cd ReactNativeTemplate

Install dependencies:
```
yarn install
```
Configure environment variables:

Update the .env file in the root directory with your configuration settings:
```
API_URL='https://your-api-url.com'
SOCKET_URL='https://your-socket-url.com'
```

Running the Application

Start the Metro Bundler:
```
yarn start
```
Run the application on Android:
```
yarn android
```
Run the application on iOS:
```
yarn ios
```
Access the application:

The app will be available on your emulator or device.