A React Native template featuring Redux for state management, react-i18next for internationalization, React Query for data fetching, customizable UI components, and seamless navigation. Includes Axios for API management, WebSocket support, and a modular architecture for scalable mobile app development, not using Expo at all for performance purpose.
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.
Created using the default components provided in the project.
π Internationalization (i18n)
react-i18next
for seamless localization.ποΈ State Management with Redux
π Data Fetching with React Query
π§ Navigation
react-navigation
with base components like VStack
and HStack
.βοΈ Component-Based Architecture
π¦ Common Utilities
π Axios Management
π WebSocket Management
πͺ Cookie Management
π Authentication
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.Ensure you have the following installed:
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'
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.
To run the tests, use the following command:
yarn test
yarn format
yarn start
yarn android
or yarn ios
yarn lint
yarn test
yarn test:e2e
There is no license; you're free to use it.
Feel free to contribute to this project by submitting issues or pull requests.
For any questions or support, please contact Toni Da Rodda.