expo-onboarding

Dead simple onboarding for your React Native/Expo app.

Installation

npm install expo-onboarding

Usage

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>
  );
}

Peer Dependencies

You should have these packages installed in your project already:

• expo
• react
• react-native
• expo-blur
• expo-symbols

Demo

Note: You are seeing a GIF version of the video recording, so frames are dropped.

API

OnboardingViewProps

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

OnboardingFeature

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

Contributing

Contributions are very welcome! Please refer to guidelines described in the contributing guide.

License

MIT