Onboarding/tutorial flow for React Native with analytics.
npm install rn-onboarding-analyticshttps://github.com/user-attachments/assets/bb51a0c3-15be-42b6-b20d-c33c29b84bc7
Add analytics to your onboarding/tutorial flow with this React Native library.
āØ 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 rn-onboarding-analytics
The library requires these dependencies :
`sh
npm install react-native-reanimated react-native-safe-area-context expo-constants expo-localization
`
`
Add on the babel config:
plugins: [
// should be always the last plugin
'react-native-reanimated/plugin',
],
``
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 'rn-onboarding-analytics';
function MyOnboarding() {
return (
introPanel={{
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'),
},
{
title: 'Step 2',
description: 'Learn about our amazing features',
buttonLabel: 'Continue',
image: require('./assets/step2.png'),
},
]}
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'),
},
// ... 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.
#### introPanel
Type: OnboardingIntroPanel
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, image
- 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 }) => (
)}
`
#### steps
Type: OnboardingStep[]
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'),
}
// Custom step component
{
component: ({ onNext, onBack, isLast }) => (
onBack={onBack}
isLast={isLast}
... other props ...
/>
),
image: require('./assets/step2.png'),
}
`
#### onComplete
Type: () => void
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
Type: () => void
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
Type: (stepIndex: number) => void undefined
Default: - Callback fired when the active step changes
`tsx`
onStepChange={(stepIndex) => {
// Track progress
analytics.track('onboarding_step', { step: stepIndex });
}}
#### showBackButton
Type: boolean true
Default: - Whether to show back button on steps (except first step)
`tsx`
showBackButton={false} // Disable back navigation
#### wrapInModalOnWeb
Type: boolean true
Default: - Whether to wrap the onboarding in a modal on web
`tsx`
wrapInModalOnWeb={false} // Disable modal wrapping
#### animationDuration
Type: number 500
Default: - Animation duration in milliseconds for step transitions
`tsx`
animationDuration={300} // Faster animations
animationDuration={800} // Slower if app is for seniors š“š½šµš¼
#### colors
Type: OnboardingColors
Default:
`tsx`
colors={{
background: {
primary: '#FFFFFF',
secondary: '#F8F9FA',
label: '#E9ECEF',
accent: '#007AFF'
},
text: {
primary: '#1C1C1E',
secondary: '#8E8E93',
contrast: '#FFFFFF'
}
}}
#### fonts
Type: OnboardingFonts | string '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
Type: () => ReactNode undefined
Default: - Custom background element rendered behind content
`tsx`
background={() => (
style={StyleSheet.absoluteFillObject}
/>
)}
#### skipButton
Type: ({ onPress }: { onPress: () => void }) => ReactNode
Default: X icon - Custom close button renderer
`tsx`
skipButton={({ onPress }) => (
)}
Use images with the same dimensions for the best visual effect. This prevents layout shifts and creates smooth transitions between steps.
Image creator: Use this Figma Community template to design consistent onboarding illustrations and export assets with the recommended dimensions.
Save onboarding completion state to persistent storage (MMKV, AsyncStorage) to prevent users from seeing the onboarding again after completion.
On completion, navigate users to the main app to provide a smooth transition from onboarding to the core experience.
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 š
https://github.com/user-attachments/assets/bb51a0c3-15be-42b6-b20d-c33c29b84bc7
Add analytics to your onboarding/tutorial flow with this React Native library.
āØ 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 rn-onboarding-analytics
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 'rn-onboarding-analytics';
function MyOnboarding() {
return (
introPanel={{
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'),
},
{
title: 'Step 2',
description: 'Learn about our amazing features',
buttonLabel: 'Continue',
image: require('./assets/step2.png'),
},
]}
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'),
},
// ... 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.
#### introPanel
Type: OnboardingIntroPanel
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, image
- 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 }) => (
)}
`
#### steps
Type: OnboardingStep[]
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'),
}
// Custom step component
{
component: ({ onNext, onBack, isLast }) => (
onBack={onBack}
isLast={isLast}
... other props ...
/>
),
image: require('./assets/step2.png'),
}
`
#### onComplete
Type: () => void
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
Type: () => void
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
Type: (stepIndex: number) => void undefined
Default: - Callback fired when the active step changes
`tsx
onStepChange={(stepIndex) => {
// Track progress
analytics.track('onboarding_step', { step: stepIndex });
}}
#### showBackButton
Type: boolean true
Default: - Whether to show back button on steps (except first step)
`tsx`
showBackButton={false} // Disable back navigation
#### wrapInModalOnWeb
Type: boolean true
Default: - Whether to wrap the onboarding in a modal on web
`tsx`
wrapInModalOnWeb={false} // Disable modal wrapping
#### animationDuration
Type: number 500
Default: - Animation duration in milliseconds for step transitions
`tsx`
animationDuration={300} // Faster animations
animationDuration={800} // Slower if app is for seniors š“š½šµš¼
#### colors
Type: OnboardingColors
Default:
`tsx`
colors={{
background: {
primary: '#FFFFFF',
secondary: '#F8F9FA',
label: '#E9ECEF',
accent: '#007AFF'
},
text: {
primary: '#1C1C1E',
secondary: '#8E8E93',
contrast: '#FFFFFF'
}
}}
#### fonts
Type: OnboardingFonts | string '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
Type: () => ReactNode undefined
Default: - Custom background element rendered behind content
`tsx`
background={() => (
style={StyleSheet.absoluteFillObject}
/>
)}
#### skipButton
Type: ({ onPress }: { onPress: () => void }) => ReactNode
Default: X icon - Custom close button renderer
`tsx``
skipButton={({ onPress }) => (
)}
Use images with the same dimensions for the best visual effect. This prevents layout shifts and creates smooth transitions between steps.
Image creator: Use this Figma Community template to design consistent onboarding illustrations and export assets with the recommended dimensions.
Save onboarding completion state to persistent storage (MMKV, AsyncStorage) to prevent users from seeing the onboarding again after completion.
On completion, navigate users to the main app to provide a smooth transition from onboarding to the core experience.
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 š
Forked from react-native-onboarding by Blazej Kustra.
Added analytics features and custom adjustments specific to my project.