react-native-flatboard

react-native-flatboard

A Flatlist based onboarding screen for React Native

Installation

Using npm

npm i react-native-flatboard

Using Yarn

yarn add react-native-flatboard

Note In case of error on first run, try restarting the metro server.

Basic usage:

import {View} from 'react-native';
import FlatBoard from 'react-native-flatboard';

export default function App() {
  const handleFinish = () => {
    console.log('Onboarding Completed');
  };

  const data = [];

  return (
    <View style={{flex: 1}}>
      <FlatBoard
        variant="standard"
        data={data}
        onFinish={handleFinish}
        accentColor="#93c01f"
        backgroundColor="#ecfccb"
        buttonTitle="Lets Go"
        hideIndicator
        headingStyles={{
          fontSize: 24,
          color: '#93c01f',
          textAlign: 'center',
        }}
      />
    </View>
  );
}

Data format:

const data = [
  {
    id: 1,
    title: 'Screen One',
    description: 'Description One',
    icon: require('image-path.jpg'),
  },
  {
    id: 2,
    title: 'Screen Two',
    description: 'Description Two',
    icon: require('image-path.jpg'),
  },
];

Customizing (props)

Name	Type	Required	Default	Description
data	array	true	Empty Array	Array of data for each slide to be rendered.
onFinish	function	true	none	Function to call on tour end.
variant	string	false	standard	Flatboard theme, supports 'standard' & 'modern'.
accentColor	string	false	#93c01f	Accent color for selected theme.
backgroundColor	string	false	#ffffff	Background color for Flatboard screens.
buttonTitle	array	false	Get Started	Title for primary/finish button.
hideIndicator	boolean	false	false	Hide the step indicator.
headingStyles	StyleSheet	false	default styles	Custom text styles for heading
descriptionStyles	StyleSheet	false	default styles	Custom text styles for description

Please note, the package is still in development and more features are being added regularly.