Onboarding/tutorial flow for React Native.
npm install @blazejkustra/react-native-onboardinghttps://github.com/user-attachments/assets/bb51a0c3-15be-42b6-b20d-c33c29b84bc7
⨠Beautiful, customizable onboarding/tutorial flows for React Native ā with smooth animations, flexible theming, and highly customizable components.
* Cross-platform ā Works seamlessly on iOS, Android, and Web
* Smooth animations ā React Native Reanimated for smooth transitions
* Works out of the box ā Just install and use with default styles
* Flexible theming and custom components ā Complete control over colors, fonts, and styling
A private AI app that runs entirely offline on your device, with no data sent to the cloud and no internet connection required. Private Mind represents a new era of AI! Powerful, personal, and completely private.
``sh`
npm install @blazejkustra/react-native-onboarding
The library requires these dependencies for animations and safe area context:
`sh`
npm install react-native-reanimated react-native-safe-area-context
Optionally for image support, install one of:
`sh`
npm install expo-image
`sh `
npm install react-native-svg
You can use Onboarding component with default styles just by passing required props to the component:
`tsx
import Onboarding from '@blazejkustra/react-native-onboarding';
function MyOnboarding() {
return (
title: 'Welcome to My App',
subtitle: 'Let\'s get you started',
button: 'Get Started',
image: require('./assets/logo.png'),
}}
steps={[
{
title: 'Step 1',
description: 'This is the first step of your journey',
buttonLabel: 'Next',
image: require('./assets/step1.png'),
position: 'top',
},
{
title: 'Step 2',
description: 'Learn about our amazing features',
buttonLabel: 'Continue',
image: require('./assets/step2.png'),
position: 'bottom',
},
]}
onComplete={() => {
await AsyncStorage.setItem(ONBOARDING_COMPLETED_KEY, 'true');
console.log('Onboarding completed!')
}}
onSkip={() => console.log('Onboarding skipped')}
onStepChange={(step) => console.log('Current step:', step)}
/>
);
}
`
Or you can create your own custom components for the intro panel, individual steps, background, close button, etc.
`tsx
function CustomIntro({ onPressStart }: { onPressStart: () => void }) {
return (
... your custom intro panel ...
);
}
function CustomStep({ onNext, onBack, isLast }: { onNext: () => void, onBack: () => void, isLast: boolean }) {
return (
... your custom step component ...
);
}
function CustomBackground() {
return (
... your custom background component ...
);
}
function CustomCloseButton({ onPress }: { onPress: () => void }) {
return (
... your custom close button component ...
);
}
background={CustomBackground}
skipButton={CustomCloseButton}
steps={[
{
component: CustomStep,
image: require('./assets/step1.png'),
position: 'top',
},
// ... more steps
]}
// ... other props
/>
`
To see all the props and their types, check the types file. Also example usages are available in the example catalog.
#### introPanelOnboardingIntroPanel
Type:
Required - The welcome screen that users see at the start of the onboarding
The intro panel can be either:
- Default panel: Pass an object with title, subtitle, button, imageonPressStart
- Custom component: Pass a render function that receives callback
`tsx
// Default intro panel
introPanel={{
title: "Welcome to MyApp",
subtitle: "Let's get you started",
button: "Get Started",
image: require('./assets/welcome.png')
}}
// Custom intro panel
introPanel={({ onPressStart }) => (
)}
`
#### stepsOnboardingStep[]
Type:
Required - Array of onboarding steps to display
!Step
Each step can be either a default text-based step or a fully custom component:
`tsx
// Default step
{
label: "Step 1",
title: "Connect Your Account",
description: "Link your account to get started",
buttonLabel: "Connect",
image: require('./assets/step1.png'),
position: 'top'
}
// Custom step component
{
component: ({ onNext, onBack, isLast }) => (
onBack={onBack}
isLast={isLast}
... other props ...
/>
),
image: require('./assets/step2.png'),
position: 'bottom'
}
`
#### onComplete() => void
Type:
Required - Callback fired when user completes the final step, usually used to save the completion state to the local storage and navigate to the main app.
`tsx`
onComplete={() => {
// Navigate to main app
navigation.navigate('Home');
// Or save completion state
AsyncStorage.setItem('onboarding_completed', 'true');
}}
#### onSkip() => void
Type:
Optional - Callback fired when user skips onboarding, usually used to track the skip event and navigate away from the onboarding.
`tsx`
onSkip={() => {
// Track skip event
analytics.track('onboarding_skipped');
// Navigate away
navigation.goBack();
}}
#### onStepChange(stepIndex: number) => void
Type: undefined
Default: - Callback fired when the active step changes
`tsx`
onStepChange={(stepIndex) => {
// Track progress
analytics.track('onboarding_step', { step: stepIndex });
}}
#### showCloseButtonboolean
Type: true
Default: - Whether to show the close button in the header
`tsx`
showCloseButton={false} // Hide close button
#### showBackButtonboolean
Type: true
Default: - Whether to show back button on steps (except first step)
`tsx`
showBackButton={false} // Disable back navigation
#### wrapInModalOnWebboolean
Type: true
Default: - Whether to wrap the onboarding in a modal on web
`tsx`
wrapInModalOnWeb={false} // Disable modal wrapping
#### animationDurationnumber
Type: 500
Default: - Animation duration in milliseconds for step transitions
`tsx`
animationDuration={300} // Faster animations
animationDuration={800} // Slower if app is for seniors š“š½šµš¼
#### colorsOnboardingColors
Type:
Default:
`tsx`
colors={{
background: {
primary: '#FFFFFF',
secondary: '#F8F9FA',
label: '#E9ECEF',
accent: '#007AFF'
},
text: {
primary: '#1C1C1E',
secondary: '#8E8E93',
contrast: '#FFFFFF'
}
}}
#### fontsOnboardingFonts | string
Type: 'System'
Default: - Custom font configuration
`tsx
// Single font for all text
fonts="Inter"
// Detailed font configuration
fonts={{
introTitle: 'Inter-Bold',
introSubtitle: 'Inter-Medium',
stepTitle: 'Inter-SemiBold',
stepDescription: 'Inter-Regular',
primaryButton: 'Inter-Medium'
}}
`
#### background() => ReactNode
Type: undefined
Default: - Custom background element rendered behind content
`tsx`
background={() => (
style={StyleSheet.absoluteFillObject}
/>
)}
#### skipButton({ onPress }: { onPress: () => void }) => ReactNode
Type:
Default: X icon - Custom close button renderer
`tsx``
skipButton={({ onPress }) => (
)}
Image creator: Use this Figma Community template to design consistent onboarding illustrations and export assets with the recommended dimensions.
We welcome contributions! See CONTRIBUTING.md for development workflow and CODE_OF_CONDUCT.md for our code of conduct.
---
Built with create-react-native-library š

Since 2012 Software Mansion is a software agency with
experience in building web and mobile apps. We are Core React Native
Contributors and experts in dealing with all kinds of React Native issues. We
can help you build your next dream product ā
Hire us.