update/release

.gitignore

@@ -63,5 +63,3 @@ buck-out/
 /ios/Pods/
 /vendor/bundle/
 
-# Other
-/release

release/README.md

@@ -0,0 +1,151 @@
+# react-native-flatboard
+
+A Flatlist based onboarding screen for React Native
+
+<p>
+<img src="https://raw.githubusercontent.com/ArunGovil/react-native-flatboard/main/src/assets/cover.webp" width=720 alt="flatboard"/>
+</p>
+
+---
+
+## Installation
+
+Using npm
+
+```sh
+npm i react-native-flatboard
+```
+
+Using Yarn
+
+```sh
+yarn add react-native-flatboard
+```
+
+<br>
+
+> **Note**
+> In case of error on first run, try restarting the metro server.
+
+#### Basic usage:
+
+```jsx
+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"
+        buttonTitle="Lets Go"
+        hideIndicator
+        headingStyles={{
+          fontSize: 24,
+          color: '#93c01f',
+          textAlign: 'center',
+        }}
+      />
+    </View>
+  );
+}
+```
+
+#### Data format:
+
+```jsx
+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)
+
+<table>
+  <tr>
+    <th>Name<br/></th>
+    <th>Type</th>
+    <th>Required</th>
+    <th>Default</th>
+    <th>Description</th>
+  </tr>
+  <tr>
+    <td>data</td>
+    <td>array</td>
+    <td>true</td>
+    <td>Empty Array</td>
+    <td>Array of data for each slide to be rendered.</td>
+  </tr>
+   <tr>
+    <td>onFinish</td>
+    <td>function</td>
+    <td>true</td>
+    <td>none</td>
+    <td>Function to call on tour end.</td>
+  </tr>
+  <tr>
+    <td>variant</td>
+    <td>string</td>
+    <td>false</td>
+    <td>standard</td>
+    <td>Flatboard theme, supports 'standard' & 'modern'.</td>
+  </tr>  
+  <tr>
+    <td>accentColor</td>
+    <td>string</td>
+    <td>false</td>
+    <td>#93c01f</td>
+    <td>Accent color for selected theme.</td>
+  </tr>
+  <tr>
+    <td>buttonTitle</td>
+    <td>array</td>
+    <td>false</td>
+    <td>Get Started</td>
+    <td>Title for primary/finish button.</td>
+  </tr>
+  <tr>
+    <td>hideIndicator</td>
+    <td>boolean</td>
+    <td>false</td>
+    <td>false</td>
+    <td>Hide the step indicator.</td>
+  </tr>
+    <td>headingStyles</td>
+    <td>StyleSheet</td>
+    <td>false</td>
+    <td>default styles</td>
+    <td>Custom text styles for heading</td>
+  </tr>
+  <tr>
+    <td>descriptionStyles</td>
+    <td>StyleSheet</td>
+    <td>false</td>
+    <td>default styles</td>
+    <td>Custom text styles for description</td>
+  </tr>
+</table>
+
+<br>
+
+Please note, the package is still in development and more features are being added regularly.

release/index.tsx

@@ -0,0 +1,103 @@
+import {View, Image, StatusBar, FlatList} from 'react-native';
+import React, {useState, useRef} from 'react';
+import {styles} from './lib/styles';
+import {OnBoardingData, TextStyles} from './lib/types';
+import ModernStepper from './lib/components/modern/ModernStepper';
+import StandardStepper from './lib/components/standard/StandardStepper';
+import ListItem from './lib/components/common/ListItem';
+type FlatBoardProps = {
+  data: OnBoardingData[];
+  onFinish: (e: Event) => void;
+  accentColor?: string;
+  buttonTitle?: string;
+  variant?: 'standard' | 'modern';
+  hideIndicator?: boolean;
+  headingStyle?: TextStyles;
+  descriptionStyle?: TextStyles;
+};
+export default function FlatBoard({
+  data,
+  onFinish,
+  accentColor,
+  buttonTitle,
+  hideIndicator,
+  variant,
+  headingStyle,
+  descriptionStyle,
+}: FlatBoardProps) {
+  const swipeRef = useRef<FlatList>(null);
+  const [step, setStep] = useState(0);
+
+  const nextStep = () => {
+    setStep(step + 1);
+    swipeRef.current &&
+      swipeRef.current.scrollToIndex({
+        animated: true,
+        index: step + 1,
+      });
+  };
+
+  const previousStep = () => {
+    setStep(step - 1);
+    swipeRef.current &&
+      swipeRef.current.scrollToIndex({
+        animated: true,
+        index: step - 1,
+      });
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle={'dark-content'} backgroundColor={'white'} />
+      <FlatList
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        keyExtractor={(item): any => item.id}
+        ref={swipeRef}
+        pagingEnabled
+        onMomentumScrollEnd={event => {
+          const index = Math.floor(
+            Math.floor(event.nativeEvent.contentOffset.x) /
+              Math.floor(event.nativeEvent.layoutMeasurement.width),
+          );
+          setStep(index);
+        }}
+        data={data}
+        renderItem={({item}) => (
+          <ListItem
+            icon={item.icon}
+            description={item.description}
+            title={item.title}
+            headingStyle={headingStyle}
+            descriptionStyle={descriptionStyle}
+          />
+        )}
+        contentContainerStyle={[
+          styles.listWrapper,
+          variant === 'modern' && {marginTop: '10%'},
+        ]}
+      />
+      {variant === 'modern' ? (
+        <ModernStepper
+          step={step}
+          data={data}
+          onFinish={onFinish}
+          accentColor={accentColor}
+          buttonTitle={buttonTitle}
+          hideIndicator={hideIndicator}
+        />
+      ) : (
+        <StandardStepper
+          step={step}
+          data={data}
+          onFinish={onFinish}
+          accentColor={accentColor}
+          previousStep={previousStep}
+          nextStep={nextStep}
+          buttonTitle={buttonTitle}
+          hideIndicator={hideIndicator}
+        />
+      )}
+    </View>
+  );
+}

release/lib/components/common/ListItem.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {View, Text, Image, useWindowDimensions} from 'react-native';
+import {styles} from '../../styles';
+import {TextStyles} from '../../types';
+
+type ListItemProps = {
+  icon: any;
+  title: string;
+  description: string;
+  headingStyle?: TextStyles;
+  descriptionStyle?: TextStyles;
+};
+
+const ListItem = ({
+  icon,
+  title,
+  description,
+  headingStyle,
+  descriptionStyle,
+}: ListItemProps) => {
+  const {width} = useWindowDimensions();
+  return (
+    <View style={[styles.swipeItem, {width: width}]}>
+      <Image style={styles.image} source={icon} />
+      <Text style={[styles.primaryText, headingStyle && headingStyle]}>
+        {title}
+      </Text>
+      <Text
+        style={[styles.secondaryText, descriptionStyle && descriptionStyle]}>
+        {description}
+      </Text>
+    </View>
+  );
+};
+
+export default ListItem;

release/lib/components/common/StepIndicator.tsx

@@ -0,0 +1,48 @@
+import {View, StyleSheet} from 'react-native';
+import React from 'react';
+import {OnBoardingData} from '../../types';
+
+type StepIndicatorProps = {
+  data: OnBoardingData[];
+  current: number;
+  accent?: string;
+};
+
+export default function StepIndicator({
+  data,
+  current,
+  accent,
+}: StepIndicatorProps) {
+  return (
+    <View style={styles.container}>
+      {data.map(item => {
+        return (
+          <View
+            key={item.id}
+            style={[
+              styles.circle,
+              item.id - 1 === current && {
+                backgroundColor: accent ? accent : '#93c01f',
+              },
+            ]}
+          />
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    width: 50,
+    justifyContent: 'center',
+  },
+  circle: {
+    height: 8,
+    width: 8,
+    backgroundColor: '#eeeeee',
+    borderRadius: 12,
+    marginHorizontal: 2,
+  },
+});

release/lib/components/modern/ModernStepper.tsx

@@ -0,0 +1,43 @@
+import {View, Text, TouchableOpacity} from 'react-native';
+import React from 'react';
+import {styles} from '../../styles';
+import {OnBoardingData} from '../../types';
+import StepIndicator from '../common/StepIndicator';
+
+type ModernStepperProps = {
+  step: number;
+  data: OnBoardingData[];
+  onFinish: (e: Event) => void;
+  accentColor?: string;
+  buttonTitle?: string;
+  hideIndicator?: boolean;
+};
+
+export default function ModernStepper({
+  step,
+  data,
+  onFinish,
+  hideIndicator,
+  accentColor,
+  buttonTitle,
+}: ModernStepperProps) {
+  return (
+    <View style={styles.modernStepper}>
+      <View style={styles.modernIndicator}>
+        {!hideIndicator && (
+          <StepIndicator current={step} data={data} accent={accentColor} />
+        )}
+      </View>
+      <TouchableOpacity
+        style={[
+          styles.modernButton,
+          {backgroundColor: accentColor ? accentColor : '#93c01f'},
+        ]}
+        onPress={onFinish}>
+        <Text style={styles.modernTitle}>
+          {buttonTitle ? buttonTitle : 'Get Started'}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+}