React Native Onboarding Screen

Create Onboarding Screen in React Native using Reanimated
View Demo • Report Bug • Request Feature

Table of Contents

1. About The Project
   • Technologies used
2. Development
   • Prerequisites
   • Make it your own
   • Install dependencies
   • Available Scripts
3. Base Dependencies
4. Folder Structure
5. License
6. Credits

About the project

This project focuses on creating an onboarding screen in a mobile application using React Native and the powerful Reanimated library.

With React Native, you can develop a highly responsive and cross-platform user interface, ensuring that the onboarding screen is accessible on both iOS and Android devices. The integration of the Reanimated library adds a touch of magic to our animations, allowing us to create smooth transitions and stunning visuals.

Demo

Demo iOS

Technologies used

Development

Prerequisites

Here we'll list things you need to use the software and how to install them.

• Node js
• Watchman
• Xcode 12
• Cocoapods 1.10.1

Make it your own

To get a local copy, clone it using:

git clone https://github.com/castromaciel/onboarding-screen.git

Or get it downloading

rm -rf .git && git init
git add .
git commit -m "Initial commit"

Install dependencies:

yarn install
#or
npm install

For iOS

npx pod-install

Available Scripts

In this project, you can run the following scripts:

Scripts	Description
npm run-android	Runs the app at android devices.
npm run-ios	Runs the app at iOS devices.
npm test	Runs tests.

Base Dependencies

• reanimated animation library.
• lottie-react-native Lottie component for React Native.

Folder Structure

• src: This folder is the main container of all the code inside application.
  • assets: Asset folder to store all images, vectors, etc.
  • components: Folder to store any common component that you use through app (such as a generic button)
  • data: Folder used for mock data used for development and testing purposes.
  • interfaces: Folder to defining TypeScript interfaces that help in defining data structures and contracts between different parts of the application.
  • screens: Folder that contains all application screens/features.
    • Screen: Each screen should be stored inside its folder and inside it a file for its code.
      • index.tsx
• App.tsx: Main component that starts whole app.
• index.js: Entry point of application as per React-Native standards.

License

This project is licensed under the terms of the MIT license.

Credits

Based on video Rakha Wibowo.

Badges used from Ileriayo • markdown-badges.