Dead simple onboarding for your React Native/Expo app.
npm install expo-onboarding
import { OnboardingView, OnboardingFeature } from 'expo-onboarding'; import { View, TouchableOpacity, Text } from 'react-native'; const FEATURES: OnboardingFeature[] = [ { title: 'Feature One', description: 'This is the first amazing feature of our app. It helps you accomplish great things.', systemImage: 'star.fill', }, { title: 'Feature Two', description: 'Our second feature with clickable links. Connect with others and share your experience.', systemImage: 'heart.fill', links: [ { sectionText: 'Connect with others', sectionUrl: 'https://example.com', }, ], }, ]; export default function App() { return ( <View style={{ flex: 1, backgroundColor: 'black', paddingTop: '20%' }}> <OnboardingView features={FEATURES} icon={require('./assets/icon.png')} appName="Your App" tintColor="blue" titleStyle={{}} featureTitleStyle={{ color: 'white' }} featureDescriptionStyle={{ color: 'gray' }} ButtonComponent={() => ( <TouchableOpacity style={{ backgroundColor: 'blue', padding: 15, borderRadius: 12, width: '80%', }} onPress={() => console.log('Get started pressed')} > <Text style={{ color: 'white', textAlign: 'center', fontSize: 18 }}> Get Started </Text> </TouchableOpacity> )} /> </View> ); }
You should have these packages installed in your project already:
exporeactreact-nativeexpo-blurexpo-symbols
Note: You are seeing a GIF version of the video recording, so frames are dropped.
| Prop | Type | Description |
|---|---|---|
features |
OnboardingFeature[] |
Array of features to display |
icon |
ImageSourcePropType |
App icon to display |
appName |
string |
Your app name |
tintColor |
string |
Primary accent color |
titleStyle |
TextStyle |
Styling for app title |
featureTitleStyle |
TextStyle |
Styling for feature titles |
featureDescriptionStyle |
TextStyle |
Styling for feature descriptions |
ButtonComponent |
ComponentType |
Custom button component |
| Prop | Type | Description |
|---|---|---|
title |
string |
Feature title |
description |
string |
Feature description |
systemImage |
SymbolViewProps['name'] |
SF Symbol name for iOS |
icon? |
ComponentType |
Custom icon component for Android |
links? |
Array<{sectionText: string, sectionUrl: string}> |
Optional clickable links in description |
Contributions are very welcome! Please refer to guidelines described in the contributing guide.
MIT