React Native create onboarding Screen UI with light to dark theme in 10 minutes

A very efficient approach for new users to learn how to use an application, facts about the application, and how to use some of its features is through onboarding screens. This is achievable since the user interacts with it on the first screen they see after installing and launching the app.

The Onboarding Screens aren't anticipated to appear after the app's initial launch. I'll demonstrate how to set up onboarding screens in React Native for Android and iOS applications in this tutorial.

Getting started 

Create a basic React Native app

Before we can dive into our demo, we must first create a React Native project by running the following command:

npx react-native init onboarding

In my example, the name of the project is “RNNetwork,” but you can change it per your preference.

Next, go into the Project folder and install the required npm packages:

cd RNNetwork
npm i --save react-native-swiper react-native-vector-icons
   or 
yarn add react-native-swiper react-native-vector-icons

Then, run the following command for iOS for linking libraries using CocoaPods:

npx pod-install ios

Open App.tsx and add the below code :

import React from 'react';
import {
  Dimensions,
  View,
  StyleSheet,
  useColorScheme,
  Text,
  Image,
} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';
import Swiper from 'react-native-swiper';

import AntDesign from 'react-native-vector-icons/AntDesign';

const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <Swiper
      // eslint-disable-next-line react-native/no-inline-styles
      buttonWrapperStyle={{
        backgroundColor: 'transparent',
        flexDirection: 'row',
        position: 'absolute',
        bottom: 0,
        left: 0,
        flex: 1,
        paddingHorizontal: 30,
        paddingVertical: 20,
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
      }}
      showsButtons={true}
      loop={true}
      paginationStyle={{
        marginRight: w * 0.7,
        marginBottom: h * 0.02,
      }}
      activeDotColor={isDarkMode ? Colors.darker : Colors.lighter}
      dotColor={isDarkMode ? Colors.lighter : Colors.darker}
      nextButton={
        <View
          // eslint-disable-next-line react-native/no-inline-styles
          style={{
            height: 60,
            borderRadius: 30,
            alignItems: 'center',
            width: 60,
            justifyContent: 'center',
            backgroundColor: isDarkMode ? Colors.lighter : Colors.darker,
          }}>
          <AntDesign
            name="arrowright"
            size={22}
            color={isDarkMode ? Colors.darker : Colors.lighter}
          />
        </View>
      }
      prevButton={
        <View
          // eslint-disable-next-line react-native/no-inline-styles
          style={{
            height: 60,
            borderRadius: 30,
            alignItems: 'center',
            width: 60,
            justifyContent: 'center',
            backgroundColor: isDarkMode ? Colors.lighter : Colors.darker,
            marginHorizontal: 20,
          }}>
          <AntDesign
            name="arrowleft"
            size={22}
            color={isDarkMode ? Colors.darker : Colors.lighter}
          />
        </View>
      }>

      <View style={styles.slide}>
        <Image source={require('./assets/images/1.jpg')} style={styles.img} />
        <Text
          style={[
            styles.title,
            {color: isDarkMode ? Colors.lighter : Colors.darker},
          ]}>
          React Native UI-kit
        </Text>
        <Text style={[
            styles.text,
            {color: isDarkMode ? Colors.lighter : Colors.darker},
          ]}>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book.
        </Text>
      </View>
      <View style={styles.slide}>
        <Image source={require('./assets/images/2.jpg')} style={styles.img} />
        <Text style={[
            styles.title,
            {color: isDarkMode ? Colors.lighter : Colors.darker},
          ]}>
         Get Started
        </Text>
        <Text style={[
            styles.text,
            {color: isDarkMode ? Colors.lighter : Colors.darker},
          ]}>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book.
        </Text>
      </View>
      <View style={styles.slide}>
        <Image source={require('./assets/images/5.jpg')} style={styles.img} />
        <Text style={[
            styles.title,
            {color: isDarkMode ? Colors.lighter : Colors.darker},
          ]}>
           Discover
        </Text>
        <Text style={[
            styles.text,
            {color: isDarkMode ? Colors.lighter : Colors.darker},
          ]}>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book.
        </Text>
      </View>
      <View style={styles.slide}>
        <Image source={require('./assets/images/6.jpg')} style={styles.img} />
        <Text style={[
            styles.title,
            {color: isDarkMode ? Colors.lighter : Colors.darker},
          ]}>
         Welcome Devhub
        </Text>
        <Text style={[
            styles.text,
            {color: isDarkMode ? Colors.lighter : Colors.darker},
          ]}>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book.
        </Text>
      </View>
  </Swiper>
  );
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const styles = StyleSheet.create({
  slide: {
    flex: 1,
    paddingTop: 80,
    marginHorizontal: 30,
  },
  img: {
    alignSelf: 'center',
    borderBottomRightRadius: 80,
    borderTopLeftRadius: 80,
    height: h * 0.5,
    width: w * 0.9,
  },
  title: {
    marginTop: 60,
    marginHorizontal: 10,
    fontSize: 30,
  },
  text: {
    color: '#111',
    marginTop: 20,
    fontSize: 16,
    lineHeight: 20,
    marginLeft: 10,
  },
});

export default App;

Output: