onBoarding UI in react native

 app.js this project contains images in assets folder

import React, { useState, useEffect } from 'react';
import { Image } from 'react-native';
import Login from './components/Login';
import OnBoarding from './components/Onboarding';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import AsyncStorage from '@react-native-async-storage/async-storage';

const App = () => {
  const [isFirstLouch, setisFirstLouch] = useState(null);
  const Stack = createStackNavigator();
  useEffect(() => {
    AsyncStorage.getItem('already Lounched').then(() => {
      if (value == null) {
        AsyncStorage.getItem('already Lounched', 'true');
        setisFirstLouch(true);
      } else {
        setisFirstLouch(false);
      }
    });
  }, []);
  return (
  if (isFirstLouch == null) {
    return null;
  } else if (isFirstLouch == true) {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="OnBoarding" component={OnBoarding} />
          <Stack.Screen name="Login" component={Login} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  } else {
    return <Login />;
  }
)
};
export default App;
************************************************
login
index.js
import React from 'react'
import { View, Text } from 'react-native'
import styles from './styles';

const Login = () => {
    return (
        <View style={styles.container}>
            <Text>Login screen</Text>
        </View>
    )
}

export default Login;
login
styles.js
import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
    container:{
        backgroundColor:'green'
    }
})


export default styles;
**********************************************************
onboarding
index.js
import React from 'react';
import {Text, Image, View, StyleSheet} from 'react-native';
import styles from './styles';
import Onboarding from 'react-native-onboarding-swiper';
import {TouchableOpacity} from 'react-native-gesture-handler';
const OnBoarding = ({navigation, ...props}) => {
  const done = ({...props}) => {
    return (
      <TouchableOpacity style={{marginHorizontal: 10}} {...props}>
        <Text style={{color: 'yellow'}}>Done</Text>
      </TouchableOpacity>
    );
  };
  const skip = ({...props}) => {
    return (
      <TouchableOpacity style={{marginHorizontal: 10}} {...props}>
        <Text style={{color: 'skyblue'}}>skip</Text>
      </TouchableOpacity>
    );
  };
  const next = ({...props}) => {
    return (
      <TouchableOpacity style={{marginHorizontal: 10}} {...props}>
        <Text style={{color: 'green'}}>next</Text>
      </TouchableOpacity>
    );
  };
  const dot = ({selected}) => {
    let bgcolor;
    bgcolor = selected ? '#9b51e0' : '#ffff';
    return (
      <View
        style={{
          width: 10,
          height: 10,
          marginHorizontal: 10,
          backgroundColor: bgcolor,
        }}
      />
    );
  };
  return (
    <Onboarding
      onDone={() => navigation.navigate('Login')}
      onSkip={() => navigation.navigate('Login')}
      DoneButtonComponent={props.done}
      SkipButtonComponent={skip}
      NextButtonComponent={next}
      DotComponent={dot}
      pages={[
        {
          backgroundColor: '#9b51e0',
          image: (
            <Image
              style={styles.img}
              source={require('../../assets/pics1.png')}
            />
          ),
          title: 'Onboarding',
          subtitle: 'Done with React Native Onboarding Swiper',
        },
        {
          backgroundColor: '#fe6e58',
          image: (
            <Image
              style={styles.img}
              source={require('../../assets/pics2.png')}
            />
          ),
          title: 'The Title',
          subtitle: 'This is the subtitle that sumplements the title.',
        },
        {
          backgroundColor: '#999',
          image: (
            <Image
              style={styles.img}
              source={require('../../assets/pics3.png')}
            />
          ),
          title: 'The Title',
          subtitle: 'This is the subtitle that sumplements the title.',
        },
      ]}
    />
  );
};

export default OnBoarding;
onboarding
styles.js
import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
    container:{
        backgroundColor:'green'
    },
    img:{
        height:200,
        width:300,
    }
})


export default styles;
***************************************************
pkg.json
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.15.8",
    "@react-native-masked-view/masked-view": "^0.2.6",
    "@react-navigation/native": "^6.0.4",
    "@react-navigation/stack": "^6.0.9",
    "install": "^0.13.0",
    "npm": "^7.24.1",
    "react": "17.0.2",
    "react-native": "0.65.1",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-onboarding-swiper": "^1.1.4",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.8.0"
  },

Comments

Post a Comment

Popular posts from this blog

Privacy Policy for Live Weather Forecast - Realtime app

  Privacy Policy SMA Creative Studio built the Live Weather Forecast - Realtime app as a Free app. This SERVICE is provided by SMA Creative Studio at no cost and is intended for use as is. This page is used to inform visitors regarding my policies with the collection, use, and disclosure of Personal Information if anyone decided to use my Service. If you choose to use my Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that I collect is used for providing and improving the Service. I will not use or share your information with anyone except as described in this Privacy Policy. The terms used in this Privacy Policy have the same meanings as in our Terms and Conditions, which are accessible at Live Weather Forecast - Realtime unless otherwise defined in this Privacy Policy. Information Collection and Use For a better experience, while using our Service, I may require you to provide us with certain personally identif...
Read more

NFC Checker App Privacy Policy

  Privacy Policy SMA Creative Studio built the NFC Checker app as a Free app. This SERVICE is provided by SMA Creative Studio at no cost and is intended for use as is. This page is used to inform visitors regarding my policies with the collection, use, and disclosure of Personal Information if anyone decided to use my Service. If you choose to use my Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that I collect is used for providing and improving the Service. I will not use or share your information with anyone except as described in this Privacy Policy. The terms used in this Privacy Policy have the same meanings as in our Terms and Conditions, which are accessible at NFC Checker unless otherwise defined in this Privacy Policy. Information Collection and Use For a better experience, while using our Service, I may require you to provide us with certain personally identifiable information. The information that I ...
Read more

FlatList

 app.js import React , { useState } from 'react' ; import {   StyleSheet ,   View ,   Text ,   ScrollView ,   Platform ,   SafeAreaView ,   FlatList ,   TouchableOpacity , } from 'react-native' ; const App = () => {   const items = [     { id: 1 , name: 'imran' , age: 32 },     { id: 2 , name: 'kamran' , age: 22 },     { id: 3 , name: 'jabeel' , age: 14 },     { id: 4 , name: 'code' , age: 44 },     { id: 5 , name: 'with' , age: 78 },     { id: 6 , name: 'harry' , age: 32 },     { id: 7 , name: 'hellos' , age: 31 },     { id: 8 , name: 'majid' , age: 29 },     { id: 9 , name: 'sher' , age: 24 },     { id: 10 , name: 'muhammad' , age: 22 },     { id: 11 , name: 'asnari' , age: 32 },     { id: 12 , name: 'kamran' , age: 22 },     { id: 13 , name: 'jabeel' , age...
Read more