Build Onboarding Slides Component for Your App

Learn how to add Onboarding Slides functionality to your custom React Native and Django app with Crowdbotics.

What is the Onboarding Slides component and how much does it cost?

A feature that helps users get started with an onboarding tutorial set of screens. It usually takes between 5.4 and 6.6 hours and costs $450 to add Onboarding Slides to an application.

How does the Onboarding Slides component work?

This feature displays multiple slides that welcome users to the app and describe how to use it. These slides include customizable backgrounds and content and can be clicked through in a designated order.

What is the Onboarding Slides component used for?

Here are some common Onboarding Slides user stories in a custom app build:

As an app user, I would like to read an explanation of how to use the app before I login.

Onboarding Slides component README file

Onboarding Tutorial Screen

The Onboarding Tutorial Screen is a ReactNative based onboarding screen. It can be configured to have 1 or many slide screens with content and expansion detailed in the file.

Installation

After you have added the screen module into your project, you will need to configure a few items by modifying the project files in the github repository. Please note to replace ####### with the numeric sequence for your screen (found in folder name under /src/features) and also that the @BluePrint tags for ImportInsertion and NavigationInsertion will be removed in future so placement is with other imports and inside the AppNavigator above other screens.

STEP 1: Add dependency library to the project.

/PROJECT_ROOT_DIRECTORY/package.json:

ADD Dependency after Line 16 (dependencies opening line ""dependencies": { ")

"react-native-app-intro-slider": "^4.0.4",

Step 2: Add screen into your project screen navigation.

/src/mainNavigator.js: ADD immediately below in the section labeled //@BlueprintImportInsertion:

import Onboarding#######Navigator from '../features/Onboarding#######/navigator';

ADD immediately below in the section inside AppNavigator definition labeled //@BlueprintNavigationInsertion section:

Onboarding#######: { screen: Onboarding#######Navigator },

STEP (OPTIONAL): do this if you do not have a splash and want the onboarding to load first.

ADD comma after contentComponent: Sidemenu, and initialRoutName so that your code looks like:

const DrawerAppNavigator = createDrawerNavigator(
{
...AppNavigator,
},
{
contentComponent: SideMenu,
initialRouteName: "Onboarding#######", // Onboarding Slide Screen
},
);

STEP 3: Update the Onboarding Slide Screen content as desired, the navigated screen after done (typically the HOME screen) including the number of slide screens needed.

/src/features/Onboarding#######/index.js:

MODIFY slides, update with your slides content/desired number of slides:

const slides = [
{
key: 'one',
title: 'Title 1',
text: 'Description.\nSay something cool',
image: { uri: "https://crowdbotics-slack-dev.s3.amazonaws.com/media/project_component_resources/cb-icon.png" },
backgroundColor: '#59b2ab',
},
{
key: 'two',
title: 'Title 2',
text: 'Other cool stuff',
image: { uri: "https://crowdbotics-slack-dev.s3.amazonaws.com/media/project_component_resources/cb-icon.png" },
backgroundColor: '#febe29',
},
// {
// key: 'three',
// title: 'Rocket guy',
// text: 'I\'m already out of descriptions\n\nLorem ipsum bla bla bla',
// image: require('./assets/3.jpg'),
// backgroundColor: '#22bcb5',
// }
];

MODIFY Line 55, Replace LoginAndSignup177769 with desired destination home/screen:

this.props.navigation.navigate('LoginAndSignup177769')

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

This component does not yet have a README file. However, another Crowdbotics user may have created this component and shared it as a free community component.

Browse our community components for the Onboarding Slides component.

Full Onboarding Slides component code

import React from "react";
import {
  View,
  Image,
  Text,
  StyleSheet,
} from "react-native";
import { SlideMenuIcon } from '../../navigator/slideMenuIcon';
import AppIntroSlider from 'react-native-app-intro-slider';

const slides = [
  {
    key: 'one',
    title: 'Title 1',
    text: 'Description.\nSay something cool',
    image: { uri: "https://crowdbotics-slack-dev.s3.amazonaws.com/media/project_component_resources/cb-icon.png" },
    backgroundColor: '#59b2ab',
  },
  {
    key: 'two',
    title: 'Title 2',
    text: 'Other cool stuff',
    image: { uri: "https://crowdbotics-slack-dev.s3.amazonaws.com/media/project_component_resources/cb-icon.png" },
    backgroundColor: '#febe29',
  },
  // {
  //   key: 'three',
  //   title: 'Rocket guy',
  //   text: 'I\'m already out of descriptions\n\nLorem ipsum bla bla bla',
  //   image: require('./assets/3.jpg'),
  //   backgroundColor: '#22bcb5',
  // }
];

export default class Blank extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      headerLeft: <SlideMenuIcon navigationProps={navigation} />,
    };
  };

  state = {};

  _renderItem = ({ item }) => {
    return (
      <View style={[styles.slide, { backgroundColor: item.backgroundColor }]}>
        <Text style={styles.title}>{item.title}</Text>
        <Image style={styles.image} source={item.image} />
        <Text style={styles.text}>{item.text}</Text>
      </View>
    );
  }

  _onDone = () => {
    this.props.navigation.navigate('LoginAndSignup177769') // Login/Sign up Screen
  }


  render = () => (
    <View style={{ flex: 1, }}>
      <AppIntroSlider renderItem={this._renderItem} data={slides} onDone={this._onDone} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginHorizontal: 16,
  },
  slide: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 320,
    height: 320,
    marginVertical: 32,
  },
  text: {
    color: 'rgba(255, 255, 255, 0.8)',
    textAlign: 'center',
  },
  title: {
    fontSize: 22,
    color: 'white',
    textAlign: 'center',
  },
});

This component is not yet available as a verified component in the Crowdbotics platform. However, another Crowdbotics user may have created it and shared it as a free community component.

Browse our community components for the Onboarding Slides component.

Recommended components for you

Chat

Login and Signup

Splash Screen

Google Sign Up

Terms and Conditions

Privacy Policy

All component categories

Add this feature to your project

Snap Onboarding Slides into your app along with our full library of prebuilt components.

Import layouts directly from Figma and visually build backend data models.

Two-way GitHub sync and automated deployments to Heroku will have your app up and running in minutes.

Add Onboarding Slides to My App

Build with more components from Crowdbotics

Crowdbotics can build your custom app with Onboarding Slides functionality and hundreds of other components.

Go from specs to code 4X faster than conventional development.

Our expert PMs and developers are standing by to provide a detailed quote and build timeline.

Start Building

Search All Components: