StatusBarExample.tsx

import React from 'react';
import SliderIntro, { type ISliderIntroItem } from 'react-native-slider-intro';

const slides: ISliderIntroItem[] = [
  {
    index: 1,
    title: 'First step',
    text: 'Simple description.',
    image: require('./images/step3.png'),
    backgroundColor: '#febe29',
  },
  {
    index: 2,
    title: 'Second step',
    text: 'Simple description for the second step.',
    image: require('./images/step4.png'),
    backgroundColor: '#febe29',
  },
  {
    index: 3,
    title: 'Third step',
    text: 'Try to make something beauty here.',
    image: require('./images/step2.png'),
    backgroundColor: '#febe29',
  },
  {
    index: 4,
    title: 'Fourth step',
    text: 'Here you can open a custom link.',
    link: 'https://pccontroller.rnstudio.hu',
    image: require('./images/step1.png'),
    backgroundColor: '#febe29',
  },
];

const StatusBarExample = ({ closeExample }: { closeExample: () => void }) => {
  return (
    <SliderIntro
      data={slides}
      showStatusBar={true}
      statusBarColor="red"
      onDone={closeExample}
      onSkip={closeExample}
    />
  );
};

export default StatusBarExample;