-
Create a New Expo Project
npx create-expo-app MyNewApp --template
-
Navigate into Your Project Directory
cd MyNewApp
-
Install Dependencies
To run the project on the web, install the following dependencies:
npx expo install react-dom react-native-web @expo/metro-runtime
This project uses the Axiforma font.
-
Download the Font Files
Download the Axiforma font files and place them in an
assets/fonts
directory within your project.
This project utilizes several third-party libraries to enhance its functionality and development experience:
1. Lottie React Native π
-
Why:
- Easily add high-quality animations to React Native apps.
- Ideal for creating animated error highlights and other engaging animations.
-
Usage:
- Used for displaying animated error highlights view.
- Key point: Enhances user experience with visually appealing animations.
2. Moti π
-
Why:
- Simplifies animations in React Native.
- Provides a clean and concise API for creating complex animations with ease.
-
Usage:
- Used to show skeleton loading states in the UI.
- Key point: Improves user experience by providing smooth and visually appealing loading states.
3. Tamagui π
-
Why:
- A library for creating responsive and beautifully designed UIs with React Native.
- Simplifies the theming and layout process with a compelling set of tools.
-
Usage:
- Used to create awesome UI and themes.
- Key point: Streamlines the process of building responsive and visually consistent UIs.
4. SWR π
-
Why:
- Offers powerful data fetching and caching capabilities, making it easy to handle remote data.
- Efficiently manages caching, revalidation, focus tracking, and more.
-
Usage:
- Fetch data from APIs with minimal configuration and manage cache automatically.
- Key point: Simplifies handling of remote data fetching while enhancing performance.
5. Expo Router π
-
Why:
- Simplifies navigation in React Native projects by using a file-based routing system, similar to popular web frameworks.
- Enhances maintainability and scalability of navigation logic.
-
Usage:
- Define routes in a more intuitive way using the file structure.
- Key point: Provides a clean and maintainable way to manage navigation in React Native projects.
6. react-native-gifted-charts π
-
Why:
- Provides beautifully crafted and easy-to-use chart components for React Native.
- Ideal for creating rich data visualizations without complex implementations.
-
Usage:
- Render various types of charts, such as bar charts, line charts, and pie charts.
- Key point: Enables the creation of engaging, interactive data visualizations seamlessly.
To start the project, run:
npx expo start
Click here to view the screen recording