The react-native-flatboard from arungovil

arungovil / react-native-flatboard Goto Github PK

View Code? Open in Web Editor NEW

Flatlist based lightweight onboarding screen for React Native

JavaScript 2.38% TypeScript 37.36% Ruby 3.03% Starlark 1.13% Java 29.17% CMake 0.51% C++ 13.64% Objective-C 4.47% Objective-C++ 8.31%

react-native-flatboard's Introduction

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 onComplete = () => {
    console.log('Onboarding Completed');
  };

  const data = [];

  return (
    <View style={{flex: 1}}>
      <FlatBoard
        data={data}
        onFinish={onComplete}
        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 primary/finish button.
backgroundColor	string	false	#ffffff	Background color for Flatboard screens.
buttonTitle	array	false	Get Started	Title for primary/finish button.
hideIndicator	boolean	false	false	Hide step indicator.
headingStyles	StyleSheet	false	default styles	Custom text styles for heading
descriptionStyles	StyleSheet	false	default styles	Custom text styles for description