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)

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