From 5b76dddeb07bd357ed829c65f703a2e6d487bd31 Mon Sep 17 00:00:00 2001 From: ArunGovil Date: Sun, 15 Jan 2023 12:57:50 +0530 Subject: [PATCH] update/release --- .gitignore | 2 - release/README.md | 151 ++++++++++++++++++ release/index.tsx | 103 ++++++++++++ release/lib/components/common/ListItem.tsx | 36 +++++ .../lib/components/common/StepIndicator.tsx | 48 ++++++ .../lib/components/modern/ModernStepper.tsx | 43 +++++ .../components/standard/StandardStepper.tsx | 62 +++++++ release/lib/styles.ts | 84 ++++++++++ release/lib/types.ts | 14 ++ release/package.json | 26 +++ 10 files changed, 567 insertions(+), 2 deletions(-) create mode 100644 release/README.md create mode 100644 release/index.tsx create mode 100644 release/lib/components/common/ListItem.tsx create mode 100644 release/lib/components/common/StepIndicator.tsx create mode 100644 release/lib/components/modern/ModernStepper.tsx create mode 100644 release/lib/components/standard/StandardStepper.tsx create mode 100644 release/lib/styles.ts create mode 100644 release/lib/types.ts create mode 100644 release/package.json diff --git a/.gitignore b/.gitignore index 8278417..840aea1 100644 --- a/.gitignore +++ b/.gitignore @@ -63,5 +63,3 @@ buck-out/ /ios/Pods/ /vendor/bundle/ -# Other -/release \ No newline at end of file diff --git a/release/README.md b/release/README.md new file mode 100644 index 0000000..797ee1e --- /dev/null +++ b/release/README.md @@ -0,0 +1,151 @@ +# react-native-flatboard + +A Flatlist based onboarding screen for React Native + +

+flatboard +

+ +--- + +## Installation + +Using npm + +```sh +npm i react-native-flatboard +``` + +Using Yarn + +```sh +yarn add react-native-flatboard +``` + +
+ +> **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 ( + + + + ); +} +``` + +#### 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) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name
TypeRequiredDefaultDescription
dataarraytrueEmpty ArrayArray of data for each slide to be rendered.
onFinishfunctiontruenoneFunction to call on tour end.
variantstringfalsestandardFlatboard theme, supports 'standard' & 'modern'.
accentColorstringfalse#93c01fAccent color for selected theme.
buttonTitlearrayfalseGet StartedTitle for primary/finish button.
hideIndicatorbooleanfalsefalseHide the step indicator.
headingStylesStyleSheetfalsedefault stylesCustom text styles for heading
descriptionStylesStyleSheetfalsedefault stylesCustom text styles for description
+ +
+ +Please note, the package is still in development and more features are being added regularly. diff --git a/release/index.tsx b/release/index.tsx new file mode 100644 index 0000000..291b80d --- /dev/null +++ b/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(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 ( + + + 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}) => ( + + )} + contentContainerStyle={[ + styles.listWrapper, + variant === 'modern' && {marginTop: '10%'}, + ]} + /> + {variant === 'modern' ? ( + + ) : ( + + )} + + ); +} diff --git a/release/lib/components/common/ListItem.tsx b/release/lib/components/common/ListItem.tsx new file mode 100644 index 0000000..8f43ea6 --- /dev/null +++ b/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 ( + + + + {title} + + + {description} + + + ); +}; + +export default ListItem; diff --git a/release/lib/components/common/StepIndicator.tsx b/release/lib/components/common/StepIndicator.tsx new file mode 100644 index 0000000..de7d55d --- /dev/null +++ b/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 ( + + {data.map(item => { + return ( + + ); + })} + + ); +} + +const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + width: 50, + justifyContent: 'center', + }, + circle: { + height: 8, + width: 8, + backgroundColor: '#eeeeee', + borderRadius: 12, + marginHorizontal: 2, + }, +}); diff --git a/release/lib/components/modern/ModernStepper.tsx b/release/lib/components/modern/ModernStepper.tsx new file mode 100644 index 0000000..2aec4ce --- /dev/null +++ b/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 ( + + + {!hideIndicator && ( + + )} + + + + {buttonTitle ? buttonTitle : 'Get Started'} + + + + ); +} diff --git a/release/lib/components/standard/StandardStepper.tsx b/release/lib/components/standard/StandardStepper.tsx new file mode 100644 index 0000000..5190fe3 --- /dev/null +++ b/release/lib/components/standard/StandardStepper.tsx @@ -0,0 +1,62 @@ +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 StandardStepperProps = { + step: number; + data: OnBoardingData[]; + onFinish: (e: Event) => void; + previousStep: (e: Event) => void; + nextStep: (e: Event) => void; + accentColor?: string; + buttonTitle?: string; + hideIndicator?: boolean; +}; + +export default function StandardStepper({ + step, + onFinish, + hideIndicator, + data, + accentColor, + buttonTitle, + previousStep, + nextStep, +}: StandardStepperProps) { + return ( + + {step === 0 ? ( + + Skip + + ) : ( + + Previous + + )} + + {!hideIndicator && ( + + )} + + {step < data.length - 1 ? ( + + Next + + ) : ( + + + {buttonTitle ? buttonTitle : 'Get Started'} + + + )} + + ); +} diff --git a/release/lib/styles.ts b/release/lib/styles.ts new file mode 100644 index 0000000..5936b73 --- /dev/null +++ b/release/lib/styles.ts @@ -0,0 +1,84 @@ +import {StyleSheet} from 'react-native'; + +export const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#ffffff', + }, + swipeItem: { + justifyContent: 'center', + alignItems: 'center', + }, + listWrapper: { + minHeight: '50%', + maxHeight: '90%', + alignItems: 'center', + justifyContent: 'center', + }, + image: { + height: 280, + width: 280, + marginBottom: 48, + borderRadius: 8, + }, + primaryText: { + fontSize: 16, + fontWeight: 'bold', + color: '#080c12', + }, + secondaryText: { + fontSize: 14, + color: '#666', + marginTop: 8, + textAlign: 'center', + paddingHorizontal: 18, + }, + stepper: { + position: 'absolute', + bottom: 100, + width: '90%', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + nextButton: { + padding: 5, + borderRadius: 24, + color: '#666', + minWidth: 90, + textAlign: 'center', + }, + skipButton: { + padding: 5, + borderRadius: 24, + color: '#ffffff', + minWidth: 90, + }, + skipItem: { + color: '#ffffff', + textAlign: 'center', + }, + indicator: {}, + modernIndicator: { + marginBottom: 26, + }, + modernStepper: { + width: '90%', + alignItems: 'center', + marginBottom: 20, + }, + modernButton: { + width: '100%', + height: 50, + borderRadius: 12, + alignItems: 'center', + justifyContent: 'center', + }, + modernTitle: { + fontWeight: 'bold', + fontSize: 16, + color: '#ffffff', + }, +}); diff --git a/release/lib/types.ts b/release/lib/types.ts new file mode 100644 index 0000000..264908d --- /dev/null +++ b/release/lib/types.ts @@ -0,0 +1,14 @@ +export type OnBoardingData = { + id: number; + title: string; + description: string; + icon: string; +}; + +export type TextStyles = { + fontSize?: number; + fontFamily?: string; + color?: string; + fontWeight?: string | number; + textAlign?: string; +}; diff --git a/release/package.json b/release/package.json new file mode 100644 index 0000000..4371dfb --- /dev/null +++ b/release/package.json @@ -0,0 +1,26 @@ +{ + "name": "react-native-flatboard", + "version": "1.0.5", + "description": "A Flatlist based onboarding screen for React Native", + "main": "index.tsx", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "peerDependencies": { + "react": "^18.1.0", + "react-native": "^0.70.0" + }, + "repository": { + "type": "git", + "url": "https://github.com/ArunGovil/react-native-flatboard.git" + }, + "keywords": [ + "onboarding", + "react-native", + "flatlist", + "swipeable", + "indicator" + ], + "author": "Arun Govil", + "license": "MIT" +}