5.0.0 • Published 1 year ago

dx_onboarding_screen v5.0.0

Weekly downloads
-
License
-
Repository
github
Last release
1 year ago

dx_onboadring_screen Component

The dx_onboadring_screen component for React Native that provides a customizable onboarding experience with swipe functionality and navigation buttons.

Installation

npm i dx_onboarding_screen

Usage

import Onbording from 'dx_onboarding_screen';

//pass in your object of slides prop

 const slides = [
    {
      title: "Welcome to Onbording!",
      description: "This is the first slide.",
      image: require('./assets/slide1.jpg'),
      buttonText: "Next"
    },
    {
      title: "Learn More",
      description: "This is the second slide.",
      image: require('./assets/slide2.jpg'),
      buttonText: "Learn More"
    },
    {
      title: "Get Started",
      description: "This is the third slide.",
      image: require('./assets/slide3.jpg'),
      buttonText: "Login"
    }
  ];

// Use Onbording component
<Onbording slides={slides} />

## Example

import React from 'react';
import { View } from 'react-native';
import Onbording from '@username/onbording';

const App = () => {
  const slides = [
    {
      title: "Welcome to Onbording!",
      description: "This is the first slide.",
      image: require('./assets/slide1.jpg'),
      buttonText: "Next"
    },
    {
      title: "Learn More",
      description: "This is the second slide.",
      image: require('./assets/slide2.jpg'),
      buttonText: "Learn More"
    },
    {
      title: "Get Started",
      description: "This is the third slide.",
      image: require('./assets/slide3.jpg'),
      buttonText: "Login"
    }
  ];

  return (
    <View style={{ flex: 1 }}>
      <Onbording slides={slides} />
    </View>
  );
};

export default App;


// how it works

[LINK](https://www.youtube.com/watch?v=D7NdYJf2qaI)
5.0.0

1 year ago

4.1.2

1 year ago

3.1.2

1 year ago

2.1.2

1 year ago

1.0.2

1 year ago

0.0.2

1 year ago

0.0.1

1 year ago