### Start Metro Server for Example App

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/CONTRIBUTING.md

Starts the Metro bundler for the example application, which is used to test library changes. This command is run from the project root.

```shell
yarn example start
```

--------------------------------

### Run Example App on Android

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/CONTRIBUTING.md

Builds and runs the example application on an Android emulator or device. Requires Android development environment setup.

```shell
yarn example android
```

--------------------------------

### Run Example App on iOS

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/CONTRIBUTING.md

Builds and runs the example application on an iOS simulator or device. Requires iOS development environment setup.

```shell
yarn example ios
```

--------------------------------

### Run Example App on Web

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/CONTRIBUTING.md

Builds and runs the example application in a web browser. This is useful for cross-platform testing.

```shell
yarn example web
```

--------------------------------

### Install react-native-onboarding and dependencies

Source: https://context7.com/software-mansion-labs/react-native-onboarding/llms.txt

Installs the core react-native-onboarding package along with its required peer dependencies, react-native-reanimated and react-native-safe-area-context. It also shows optional installations for enhanced image rendering with expo-image or react-native-svg.

```bash
npm install @blazejkustra/react-native-onboarding
npm install react-native-reanimated react-native-safe-area-context
```

```bash
# Optional image rendering improvements
npm install expo-image
# or
npm install react-native-svg
```

--------------------------------

### API Example: Default Step Configuration

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/README.md

Provides an example of configuring a default step with title, description, button label, image, and position.

```tsx
{
  label: "Step 1",
  title: "Connect Your Account",
  description: "Link your account to get started",
  buttonLabel: "Connect",
  image: require('./assets/step1.png'),
  position: 'top'
}
```

--------------------------------

### Install Project Dependencies with Yarn

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/CONTRIBUTING.md

Installs all necessary dependencies for the monorepo using Yarn workspaces. This is a prerequisite for starting development.

```shell
yarn
```

--------------------------------

### API Example: Custom Intro Panel Component

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/README.md

Demonstrates how to provide a custom React component as the intro panel by passing a render function that receives an `onPressStart` callback.

```tsx
introPanel={({ onPressStart }) => (
  <CustomWelcomeScreen onStart={onPressStart} />
)}
```

--------------------------------

### Install react-native-onboarding and Dependencies

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/README.md

Installs the core react-native-onboarding library along with necessary dependencies for animations and safe area context. Optionally includes packages for image support.

```sh
npm install @blazejkustra/react-native-onboarding
npm install react-native-reanimated react-native-safe-area-context

# Optionally for image support:
# npm install expo-image
# npm install react-native-svg
```

--------------------------------

### API Example: Default Intro Panel Configuration

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/README.md

Shows how to configure the default intro panel by passing an object with title, subtitle, button text, and an image source.

```tsx
introPanel={{
  title: "Welcome to MyApp",
  subtitle: "Let\'s get you started",
  button: "Get Started",
  image: require('./assets/welcome.png')
}}
```

--------------------------------

### Custom Onboarding Components Example

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/README.md

Illustrates how to replace default components with custom ones for the intro panel, steps, background, and close button, offering complete control over the UI.

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

<Onboarding
  introPanel={CustomIntro}
  background={CustomBackground}
  skipButton={CustomCloseButton}
  steps={[
    {
      component: CustomStep,
      image: require('./assets/step1.png'),
      position: 'top',
    },
    // ... more steps
  ]}
  // ... other props
/>
```

--------------------------------

### API Example: Custom Step Component Configuration

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/README.md

Shows how to define a step using a custom React component, passing necessary callbacks like `onNext`, `onBack`, and `isLast`.

```tsx
{
  component: ({ onNext, onBack, isLast }) => (
    <CustomStepComponent 
      onNext={onNext}
      onBack={onBack}
      isLast={isLast}
      ... other props ...
    />
  ),
  image: require('./assets/step2.png'),
  position: 'bottom'
}
```

--------------------------------

### TypeScript Onboarding Configuration

Source: https://context7.com/software-mansion-labs/react-native-onboarding/llms.txt

This example showcases defining custom colors, fonts, and steps using TypeScript interfaces provided by the '@blazejkustra/react-native-onboarding' library. It ensures type safety for all configuration properties, preventing potential runtime errors. The `Onboarding` component is then rendered with these type-safe configurations.

```tsx
import Onboarding, {
  OnboardingProps,
  OnboardingColors,
  OnboardingFonts,
  OnboardingStep,
  OnboardingIntroPanelProps,
} from '@blazejkustra/react-native-onboarding';

// Define custom colors with type safety
const customColors: OnboardingColors = {
  background: {
    primary: '#007AFF',
    secondary: '#FFFFFF',
    label: '#F2F2F7',
    accent: '#1C1C1E',
  },
  text: {
    primary: '#1C1C1E',
    secondary: '#8E8E93',
    contrast: '#FFFFFF',
  },
};

// Define custom fonts with type safety
const customFonts: OnboardingFonts = {
  introTitle: 'Inter-Bold',
  introSubtitle: 'Inter-Medium',
  stepTitle: 'Inter-SemiBold',
  stepDescription: 'Inter-Regular',
  primaryButton: 'Inter-Medium',
};

// Type-safe step definition
const steps: OnboardingStep[] = [
  {
    // Default text-based step
    label: 'Step 1',
    title: 'Welcome',
    description: 'Get started with our app',
    buttonLabel: 'Next',
    image: require('./assets/step1.png'),
    position: 'top',
  },
  {
    // Custom component step
    component: ({ onNext, onBack, isLast }) => (
      <CustomStepComponent
        onNext={onNext}
        onBack={onBack}
        isLast={isLast}
      />
    ),
    image: require('./assets/step2.png'),
    position: 'bottom',
  },
];

export default function TypeSafeOnboarding() {
  return (
    <Onboarding
      colors={customColors}
      fonts={customFonts}
      introPanel={{
        title: 'Type-safe onboarding',
        button: 'Start',
      }}
      steps={steps}
      onComplete={() => console.log('Complete')}
    />
  );
}

```

--------------------------------

### Customize Onboarding Background and Skip Button

Source: https://context7.com/software-mansion-labs/react-native-onboarding/llms.txt

This example shows how to customize the background and the skip button of the onboarding component. It defines custom React Native components for the background image and the skip button's touchable opacity with text. These custom components are then passed to the 'background' and 'skipButton' props of the Onboarding component.

```tsx
import { Image, StyleSheet, TouchableOpacity, Text } from 'react-native';
import Onboarding from '@blazejkustra/react-native-onboarding';

function CustomBackground() {
  return (
    <Image
      source={require('./assets/gradient-bg.png')}
      style={StyleSheet.absoluteFillObject}
      resizeMode="cover"
    />
  );
}

function CustomCloseButton({ onPress }) {
  return (
    <TouchableOpacity onPress={onPress} style={styles.closeBtn}>
      <Text style={styles.closeBtnText}>✕</Text>
    </TouchableOpacity>
  );
}

export default function CustomBackgroundOnboarding() {
  return (
    <Onboarding
      background={CustomBackground}
      skipButton={CustomCloseButton}
      introPanel={{
        title: 'Custom background example',
        button: 'Start',
      }}
      steps={[
        {
          title: 'Beautiful backgrounds',
          description: 'Add custom backgrounds behind your onboarding flow.',
          buttonLabel: 'Continue',
          image: require('./assets/step1.png'),
          position: 'top',
        },
      ]}
      onComplete={() => console.log('Completed')}
    />
  );
}

const styles = StyleSheet.create({
  closeBtn: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: 'rgba(0,0,0,0.3)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  closeBtnText: {
    color: '#fff',
    fontSize: 20,
    fontWeight: '600',
  },
});
```

--------------------------------

### Customize Theme Colors in React Native Onboarding

Source: https://context7.com/software-mansion-labs/react-native-onboarding/llms.txt

This example demonstrates how to override the default theme colors for the react-native-onboarding component. It allows for customization of background and text colors to match a specific brand or aesthetic. The 'colors' prop accepts an object with nested properties for various elements.

```tsx
import Onboarding from '@blazejkustra/react-native-onboarding';

export default function GreenThemedOnboarding({ navigation }) {
  return (
    <Onboarding
      colors={{
        background: {
          primary: '#22c55e',      // Main background (green)
          secondary: '#f0fdf4',    // Panel/card background (light green)
          label: '#dcfce7',        // Label badge background
          accent: '#166534',       // Accent color (dark green)
        },
        text: {
          primary: '#14532d',
          secondary: 'rgba(20, 83, 45, 0.8)',
          contrast: '#f0fdf4',
        },
      }}
      fonts="System"
      animationDuration={350}
      introPanel={{
        title: 'Green energy vibes',
        subtitle: 'Eco friendly onboarding',
        button: 'Begin',
        image: require('./assets/logo.png'),
      }}
      steps={[
        {
          label: 'Sustainable',
          title: 'Optimized models',
          description: 'Efficient inference saves power and battery.',
          buttonLabel: 'Next',
          image: require('./assets/step_benchmark.png'),
          position: 'bottom',
        },
        {
          label: 'Harmony',
          title: 'Balanced defaults',
          description: 'Great UX with sensible, configurable options.',
          buttonLabel: 'Next',
          image: require('./assets/step_sources.png'),
          position: 'top',
        },
        {
          label: 'Ready',
          title: 'Get started now',
          description: 'Launch with a clean, eco theme.',
          buttonLabel: 'Finish',
          image: require('./assets/step_models.png'),
          position: 'bottom',
        },
      ]}
      onComplete={async () => {
        await AsyncStorage.setItem('onboarding_finished', 'true');
        navigation.goBack();
      }}
      onSkip={() => navigation.goBack()}
      showCloseButton
      showBackButton
    />
  );
}

```

--------------------------------

### Configure Custom Fonts in React Native Onboarding

Source: https://context7.com/software-mansion-labs/react-native-onboarding/llms.txt

This example illustrates how to apply custom fonts to various text elements within the react-native-onboarding component. You can set a single font for all text or define specific fonts for different elements like titles, subtitles, and descriptions. The 'fonts' prop accepts either a string for a global font or an object for granular control.

```tsx
import Onboarding from '@blazejkustra/react-native-onboarding';

export default function CustomFontsOnboarding() {
  return (
    <Onboarding
      // Apply single font to all text
      fonts="Inter"
      // OR use granular font configuration
      fonts={{
        introTitle: 'Inter-Bold',
        introSubtitle: 'Inter-Medium',
        introButton: 'Inter-Medium',
        stepLabel: 'Inter-SemiBold',
        stepTitle: 'Inter-Bold',
        stepDescription: 'Inter-Regular',
        stepButton: 'Inter-Medium',
        primaryButton: 'Inter-Medium',
        secondaryButton: 'Inter-Medium',
      }}
      introPanel={{
        title: 'Welcome',
        button: 'Start',
      }}
      steps={[
        {
          title: 'Custom typography',
          description: 'Each text element can use different font families.',
          buttonLabel: 'Continue',
          image: require('./assets/step1.png'),
          position: 'top',
        },
      ]}
      onComplete={() => console.log('Done')}
    />
  );
}

```

--------------------------------

### Basic Onboarding Component in React Native

Source: https://context7.com/software-mansion-labs/react-native-onboarding/llms.txt

Demonstrates how to create a basic onboarding flow using the react-native-onboarding component. It includes setting up introductory panel, defining multiple tutorial steps with titles, descriptions, and images, and handling completion and skip actions. It also shows how to use AsyncStorage to track onboarding completion.

```tsx
import Onboarding from '@blazejkustra/react-native-onboarding';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function MyOnboarding({ navigation }) {
  return (
    <Onboarding
      animationDuration={300}
      introPanel={{
        title: 'Your private AI mind.',
        subtitle: 'In your pocket.',
        button: 'Get Started',
        image: require('./assets/logo.png'),
      }}
      steps={[
        {
          label: 'Offline AI access',
          title: 'Chat with AI models offline',
          description: 'Interact with AI models securely and offline on your mobile device.',
          buttonLabel: 'Got it, next',
          image: require('./assets/step_chat.png'),
          position: 'top',
        },
        {
          label: 'Performance tests',
          title: 'Benchmark your models',
          description: 'Easily test out how AI models perform while being benchmarked.',
          buttonLabel: 'Nice, next',
          image: require('./assets/step_benchmark.png'),
          position: 'bottom',
        },
        {
          label: 'AI RAG',
          title: 'Add source documents',
          description: 'Use extra files to extend models knowledge and responses.',
          buttonLabel: 'Great, next',
          image: require('./assets/step_sources.png'),
          position: 'top',
        },
        {
          label: 'Speech to text',
          title: 'Use voice instead of chat',
          description: 'Use voice messages that automatically transcript into text.',
          buttonLabel: 'Awesome, next',
          image: require('./assets/step_voice.png'),
          position: 'top',
        },
        {
          label: 'Custom models',
          title: 'Upload extra models',
          description: 'Add your own custom models compatible with ExecuTorch.',
          buttonLabel: 'Start chatting',
          image: require('./assets/step_models.png'),
          position: 'bottom',
        },
      ]}
      onComplete={async () => {
        await AsyncStorage.setItem('onboarding_completed', 'true');
        navigation.goBack();
      }}
      onSkip={() => {
        navigation.goBack();
      }}
      onStepChange={(stepIndex) => {
        console.log('Step changed to:', stepIndex);
      }}
      showCloseButton
      showBackButton
    />
  );
}
```

--------------------------------

### Onboarding Component API

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/README.md

Documentation for the main Onboarding component and its available props.

```APIDOC
## Onboarding Component

### Description

The main component for creating onboarding and tutorial flows. It accepts various props to customize the appearance and behavior of the onboarding experience.

### Props

#### `introPanel`
- **Type:** `OnboardingIntroPanel` (object or function)
- **Required:** Yes
- **Description:** Defines the introductory screen of the onboarding flow. Can be a default panel with title, subtitle, button, and image, or a custom component.

```typescript
// Default panel
introPanel={{
  title: "Welcome to MyApp",
  subtitle: "Let's get you started",
  button: "Get Started",
  image: require('./assets/welcome.png')
}}

// Custom component
introPanel={({ onPressStart }) => (
  <CustomWelcomeScreen onStart={onPressStart} />
)}
```

#### `steps`
- **Type:** `OnboardingStep[]`
- **Required:** Yes
- **Description:** An array of objects, where each object represents a step in the onboarding flow. Steps can be default text-based or custom components.

```typescript
// Default step
steps={[
  {
    label: "Step 1",
    title: "Connect Your Account",
    description: "Link your account to get started",
    buttonLabel: "Connect",
    image: require('./assets/step1.png'),
    position: 'top'
  },
  // ... more steps
]}

// Custom component step
steps={[
  {
    component: ({ onNext, onBack, isLast }) => (
      <CustomStepComponent 
        onNext={onNext} 
        onBack={onBack} 
        isLast={isLast} 
        // ... other props
      />
    ),
    image: require('./assets/step2.png'),
    position: 'bottom'
  },
  // ... more steps
]}
```

#### `onComplete`
- **Type:** `() => Promise<void> | void`
- **Required:** No
- **Description:** Callback function executed when the onboarding flow is completed.

#### `onSkip`
- **Type:** `() => void`
- **Required:** No
- **Description:** Callback function executed when the user skips the onboarding.

#### `onStepChange`
- **Type:** `(step: number) => void`
- **Required:** No
- **Description:** Callback function executed when the current step changes, receiving the index of the new step.

#### `background`
- **Type:** `React.FC`
- **Required:** No
- **Description:** A custom component to render as the background of the onboarding.

#### `skipButton`
- **Type:** `React.FC<{ onPress: () => void }>`
- **Required:** No
- **Description:** A custom component to render as the skip button. It receives an `onPress` handler.

```

--------------------------------

### Publish New Versions with Release-it

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/CONTRIBUTING.md

Initiates the publishing process for new versions of the library using the release-it tool. This includes version bumping, tagging, and creating releases.

```shell
yarn release
```

--------------------------------

### Basic Usage of Onboarding Component

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/README.md

Demonstrates how to use the Onboarding component with default styles by providing required props like introPanel, steps, and callbacks for completion and skipping.

```tsx
import Onboarding from '@blazejkustra/react-native-onboarding';

function MyOnboarding() {
  return (
    <Onboarding
      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'),
          position: 'top',
        },
        {
          title: 'Step 2', 
          description: 'Learn about our amazing features',
          buttonLabel: 'Continue',
          image: require('./assets/step2.png'),
          position: 'bottom',
        },
      ]}
      onComplete={async () => {
        await AsyncStorage.setItem(ONBOARDING_COMPLETED_KEY, 'true');
        console.log('Onboarding completed!')
      }}
      onSkip={() => console.log('Onboarding skipped')}
      onStepChange={(step) => console.log('Current step:', step)}
    />
  );
}
```

--------------------------------

### Run Unit Tests with Jest

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/CONTRIBUTING.md

Executes the unit test suite for the project using Jest. Ensures that individual components and functions work as expected.

```shell
yarn test
```

--------------------------------

### Implement Custom Intro Panel in React Native

Source: https://context7.com/software-mansion-labs/react-native-onboarding/llms.txt

This snippet shows how to create a custom intro component for the react-native-onboarding library. It defines a `CustomIntro` component with a logo, title, subtitle, and a call-to-action button. The `OnboardingCustomIntro` component then integrates this custom intro panel using the `introPanel` prop. It also configures various onboarding steps and navigation logic.

```tsx
import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';
import Onboarding from '@blazejkustra/react-native-onboarding';
import AsyncStorage from '@react-native-async-storage/async-storage';

function CustomIntro({ onPressStart }) {
  return (
    <View style={styles.introContainer}>
      <Image source={require('./assets/logo.png')} style={styles.logo} />
      <Text style={styles.h1}>Private AI, Personalized</Text>
      <Text style={styles.h2}>Tap to begin your journey</Text>
      <TouchableOpacity onPress={onPressStart} style={styles.cta}>
        <Text style={styles.ctaText}>Dive In</Text>
      </TouchableOpacity>
    </View>
  );
}

export default function OnboardingCustomIntro({ navigation }) {
  return (
    <Onboarding
      colors={{
        background: {
          primary: '#0EA5E9',
          secondary: '#0B1220',
          label: '#111827',
          accent: '#0EA5E9',
        },
        text: {
          primary: '#E5E7EB',
          secondary: 'rgba(229,231,235,0.7)',
          contrast: 'white',
        },
      }}
      fonts="System"
      introPanel={CustomIntro}  // Pass custom component
      steps={[
        {
          title: 'Your data stays with you',
          description: 'We never send your prompts to external servers.',
          buttonLabel: 'Next',
          image: require('./assets/step_chat.png'),
          position: 'top',
        },
        {
          title: 'Optimized for device',
          description: 'Experience low-latency responses on-device.',
          buttonLabel: 'Next',
          image: require('./assets/step_benchmark.png'),
          position: 'bottom',
        },
        {
          title: 'You decide how it works',
          description: 'Customize models and knowledge sources freely.',
          buttonLabel: "Let's go",
          image: require('./assets/step_sources.png'),
          position: 'bottom',
        },
      ]}
      onComplete={async () => {
        await AsyncStorage.setItem('onboarding_finished', 'true');
        navigation.goBack();
      }}
      onSkip={() => navigation.goBack()}
      showCloseButton
      showBackButton={false}
    />
  );
}

const styles = StyleSheet.create({
  introContainer: { gap: 12, marginTop: 16 },
  logo: { alignSelf: 'flex-start' },
  h1: { fontSize: 24, fontWeight: '800', color: '#E5E7EB' },
  h2: { fontSize: 16, color: 'rgba(229,231,235,0.7)' },
  cta: {
    marginTop: 12,
    backgroundColor: '#0EA5E9',
    paddingVertical: 10,
    paddingHorizontal: 14,
    borderRadius: 10,
    alignSelf: 'flex-start',
  },
  ctaText: { color: '#0B1220', fontWeight: '700' },
});

```

--------------------------------

### Create Custom React Native Onboarding Steps

Source: https://context7.com/software-mansion-labs/react-native-onboarding/llms.txt

This snippet defines a reusable `StepCard` component for custom onboarding steps and integrates it into the `Onboarding` component. It allows for custom titles, descriptions, and navigation buttons, providing flexibility beyond default panels. Dependencies include `react-native` and `@blazejkustra/react-native-onboarding`.

```tsx
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import Onboarding from '@blazejkustra/react-native-onboarding';
import AsyncStorage from '@react-native-async-storage/async-storage';

function StepCard({ title, description, onNext, onBack, isLast }) {
  return (
    <View style={styles.card}>
      <Text style={styles.cardTitle}>{title}</Text>
      <Text style={styles.cardDesc}>{description}</Text>
      <View style={styles.row}>
        <TouchableOpacity onPress={onBack} style={[styles.btn, styles.btnGhost]}>
          <Text style={[styles.btnText, styles.btnTextGhost]}>Back</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={onNext} style={[styles.btn, styles.btnPrimary]}>
          <Text style={styles.btnText}>{isLast ? 'Finish' : 'Next'}</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

export default function OnboardingCustomSteps({ navigation }) {
  return (
    <Onboarding
      colors={{
        background: {
          primary: '#111111',
          secondary: '#ffffff',
          label: '#f2f2f2',
          accent: '#111111',
        },
        text: {
          primary: '#111111',
          secondary: 'rgba(0,0,0,0.6)',
          contrast: '#ffffff',
        },
      }}
      fonts="System"
      animationDuration={400}
      introPanel={{
        title: 'Using custom renderers for steps',
        button: 'Start',
      }}
      steps={[
        {
          component: (props) => (
            <StepCard
              {...props}
              title="Step 1"
              description="This step uses a custom card component with custom buttons."
            />
          ),
          image: require('./assets/step_chat.png'),
          position: 'top',
        },
        {
          component: (props) => (
            <StepCard
              {...props}
              title="Step 2"
              description="We can change layout fully, independent of built-in step panel."
            />
          ),
          image: require('./assets/step_benchmark.png'),
          position: 'bottom',
        },
        {
          component: (props) => (
            <StepCard
              {...props}
              title="Step 3"
              description="Finish will call onComplete from the screen handler."
            />
          ),
          image: require('./assets/step_models.png'),
          position: 'bottom',
        },
      ]}
      onComplete={async () => {
        await AsyncStorage.setItem('onboarding_finished', 'true');
        navigation.goBack();
      }}
      onSkip={() => navigation.goBack()}
      showCloseButton
      showBackButton
    />
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#ffffff',
    borderRadius: 16,
    padding: 16,
    gap: 12,
  },
  cardTitle: { fontSize: 24, fontWeight: '800', color: '#111' },
  cardDesc: { fontSize: 18, color: 'rgba(0,0,0,0.7)' },
  row: { flexDirection: 'row', justifyContent: 'space-between', gap: 12 },
  btn: { paddingVertical: 10, paddingHorizontal: 16, borderRadius: 10 },
  btnPrimary: { backgroundColor: '#111' },
  btnGhost: { borderWidth: 1, borderColor: '#111' },
  btnText: { color: '#fff', fontWeight: '700' },
  btnTextGhost: { color: '#111', fontWeight: '700' },
});

```

--------------------------------

### Lint Project Files with ESLint

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/CONTRIBUTING.md

Runs ESLint to check for code style and potential errors in the project's JavaScript and TypeScript files.

```shell
yarn lint
```

--------------------------------

### Configure Onboarding Component Behavior and Animations

Source: https://context7.com/software-mansion-labs/react-native-onboarding/llms.txt

This code snippet illustrates how to configure various behavioral aspects of the Onboarding component, such as animation speed, button visibility, and modal presentation on the web. Properties like 'animationDuration', 'showCloseButton', 'showBackButton', and 'wrapInModalOnWeb' can be adjusted to fine-tune the user experience.

```tsx
import Onboarding from '@blazejkustra/react-native-onboarding';

export default function ConfiguredOnboarding() {
  return (
    <Onboarding
      // Animation duration in milliseconds (default: 500)
      animationDuration={300}  // Faster animations
      // or
      animationDuration={800}  // Slower for elderly users

      // Show/hide close button in header (default: true)
      showCloseButton={false}

      // Show/hide back button on steps (default: true)
      showBackButton={true}

      // Wrap in modal on web platform (default: true)
      wrapInModalOnWeb={false}  // Disable modal on web

      introPanel={{
        title: 'Configuration example',
        button: 'Start',
      }}
      steps={[ 
        {
          title: 'Customizable behavior',
          description: 'Control every aspect of the onboarding experience.',
          buttonLabel: 'Done',
          image: require('./assets/step1.png'),
          position: 'top',
        },
      ]}
      onComplete={() => console.log('Done')}
    />
  );
}
```

--------------------------------

### Fix Formatting Errors with ESLint

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/CONTRIBUTING.md

Applies automatic code formatting fixes based on ESLint and Prettier rules to the project's files.

```shell
yarn lint --fix
```

--------------------------------

### Type-Check Project Files with TypeScript

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/CONTRIBUTING.md

Executes TypeScript to perform static type checking on the project's codebase. Ensures type safety across the project.

```shell
yarn typecheck
```

--------------------------------

### Handle Onboarding Skip Callback

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/README.md

The `onSkip` callback is triggered when a user opts to skip the onboarding. It's useful for tracking skip events for analytics and navigating the user away from the onboarding flow, potentially back to a previous screen.

```tsx
onSkip={() => {
  // Track skip event
  analytics.track('onboarding_skipped');
  // Navigate away
  navigation.goBack();
}}
```

--------------------------------

### Handle Onboarding Completion Callback

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/README.md

The `onComplete` callback is invoked when the user finishes the onboarding process. It is typically used to save the completion status and navigate the user to the main application screen. This ensures the user doesn't see the onboarding again.

```tsx
onComplete={() => {
  // Navigate to main app
  navigation.navigate('Home');
  // Or save completion state
  AsyncStorage.setItem('onboarding_completed', 'true');
}}
```

--------------------------------

### Handle Onboarding Step Change Callback

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/README.md

The `onStepChange` callback is executed whenever the active onboarding step is updated. It receives the index of the new step and can be used for tracking user progress through the onboarding flow.

```tsx
onStepChange={(stepIndex) => {
  // Track progress
  analytics.track('onboarding_step', { step: stepIndex });
}}
```

--------------------------------

### Provide Custom Background Element

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/README.md

The `background` prop accepts a function that returns a `ReactNode`. This allows for rendering a custom background element behind the onboarding content, such as an image.

```tsx
background={() => (
  <Image 
    source={require('./assets/background.png')} 
    style={StyleSheet.absoluteFillObject}
  />
)}
```

--------------------------------

### Control Web Modal Wrapping

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/README.md

The `wrapInModalOnWeb` prop dictates whether the onboarding component should be wrapped in a modal when running on the web platform. The default behavior is `true`. Setting it to `false` disables this modal wrapping.

```tsx
wrapInModalOnWeb={false} // Disable modal wrapping
```

--------------------------------

### Configure Onboarding Colors

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/README.md

The `colors` prop accepts an `OnboardingColors` object to customize the color scheme of the onboarding component. This includes background colors for different elements and text colors.

```tsx
colors={{
  background: {
    primary: '#FFFFFF',
    secondary: '#F8F9FA',
    label: '#E9ECEF',
    accent: '#007AFF'
  },
  text: {
    primary: '#1C1C1E',
    secondary: '#8E8E93',
    contrast: '#FFFFFF'
  }
}}
```

--------------------------------

### Configure Onboarding Fonts

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/README.md

The `fonts` prop allows for custom font configuration. It can be a string for a single font used across all text, or an `OnboardingFonts` object for detailed control over specific text elements like titles and descriptions. The default font is 'System'.

```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'
}}
```

--------------------------------

### Track Onboarding Events with Firebase Analytics

Source: https://context7.com/software-mansion-labs/react-native-onboarding/llms.txt

This snippet demonstrates how to track user onboarding events such as completion, skipping, and step progression using Firebase Analytics. It requires '@react-native-firebase/analytics' and '@blazejkustra/react-native-onboarding' libraries. The function logs events like 'onboarding_completed', 'onboarding_skipped', and 'onboarding_step_viewed' with relevant timestamps and step indices.

```tsx
import Onboarding from '@blazejkustra/react-native-onboarding';
import analytics from '@react-native-firebase/analytics';

export default function TrackedOnboarding({ navigation }) {
  return (
    <Onboarding
      introPanel={{
        title: 'Welcome to MyApp',
        button: 'Get Started',
      }}
      steps={[
        {
          title: 'Feature 1',
          description: 'Learn about our first feature',
          buttonLabel: 'Next',
          image: require('./assets/step1.png'),
          position: 'top',
        },
        {
          title: 'Feature 2',
          description: 'Discover our second feature',
          buttonLabel: 'Finish',
          image: require('./assets/step2.png'),
          position: 'bottom',
        },
      ]}
      onComplete={async () => {
        // Track completion event
        await analytics().logEvent('onboarding_completed', {
          timestamp: Date.now(),
        });

        // Mark as completed in storage
        await AsyncStorage.setItem('onboarding_done', 'true');

        // Navigate to main app
        navigation.replace('MainApp');
      }}
      onSkip={async () => {
        // Track skip event
        await analytics().logEvent('onboarding_skipped', {
          timestamp: Date.now(),
        });

        navigation.goBack();
      }}
      onStepChange={async (stepIndex) => {
        // Track each step view
        await analytics().logEvent('onboarding_step_viewed', {
          step_index: stepIndex,
          timestamp: Date.now(),
        });
      }}
    />
  );
}
```

--------------------------------

### Control Step Back Button Visibility

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/README.md

The `showBackButton` prop controls the visibility of the back navigation button on onboarding steps, excluding the first step. Setting it to `false` disables the back button.

```tsx
showBackButton={false} // Disable back navigation
```

--------------------------------

### Render Custom Skip Button

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/README.md

The `skipButton` prop takes a function that renders a custom skip button. This function receives an `onPress` handler that should be attached to the button. The default is an 'X' icon.

```tsx
skipButton={({ onPress }) => (
  <TouchableOpacity onPress={onPress}>
    <Text style={styles.customClose}>✕</Text>
  </TouchableOpacity>
)}
```

--------------------------------

### Control Header Close Button Visibility

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/README.md

The `showCloseButton` prop is a boolean that determines whether the close button is displayed in the onboarding header. By default, it is `true`. Setting it to `false` hides the button.

```tsx
showCloseButton={false} // Hide close button
```

--------------------------------

### Configure Step Transition Animation Duration

Source: https://github.com/software-mansion-labs/react-native-onboarding/blob/main/README.md

The `animationDuration` prop accepts a number representing the duration of step transition animations in milliseconds. The default is 500ms. Adjusting this value can speed up or slow down animations.

```tsx
animationDuration={300} // Faster animations
animationDuration={800} // Slower if app is for seniors 👴🏽👵🏼
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.