📱 react-native-story-carousel

A React Native library for creating interactive and engaging screen stories.

Peer Dependencies

The react-native-story-carousel library relies on certain peer dependencies to ensure proper functionality. Please make sure to install the following dependencies in your project:

react-native-reanimated

Make sure to check for the latest version of each peer dependency and install it accordingly.

Installation

To install the Story Carousel library, use the following commands:

npm install react-native-story-carousel

Usage

Props

The StoryCarousel component takes an array of screens as a prop, each component (Screen) have access to these props by default:

Prop	Type	Description
`onSkip`	`() => void`	Function to be called when the user wants to skip the current screen.
`onPrevious`	`() => void`	Function to be called when the user wants to go back to the previous screen.
`onSkipIndex`	`(index: number) => void`	Function to be called when the user wants to skip directly to a specific screen.
`isFirstStep`	`boolean`	Boolean indicating if the current screen is the first in the sequence.
`isLastStep`	`boolean`	Boolean indicating if the current screen is the last in the sequence.
`numberOfSteps`	`number`	Total number of screens in the sequence.
`currentIndex`	`number`	Index of the current screen.

Style Props

The style prop, represented by the IScreenStyle interface, allows you to customize the appearance of the Story Carousel:

Prop	Type	Description
`fillColor`	`string`	Color of the filled portion of the progress bar.
`unfillColor`	`string`	Color of the unfilled portion of the progress bar.
`backgroundColor`	`string`	Background color of the Story Carousel component.

Screen Structure

The screens prop for the StoryCarousel component should be an array of objects, each representing a screen in the sequence. The structure of each object should adhere to the IScreen interface:

Key	Type	Description
`Screen`	`React.ComponentType<IScreenProps>`	The React component representing the content of the screen.
`duration`	`number`	(Optional) Display time for the screen in sec. If not defined, the screen will wait for user action before transitioning to the next screen.
`props`	`any`	(Optional) Custom props to be passed to the `Screen` component.

Example

import StoryCarousel from 'react-native-story-carousel';

const screens = [
  {
    Screen: FirstScreen,
    duration: 2, // Display time in sec
    props: {/* Custom props for FirstScreen */}
  },
  {
    Screen: SecondScreen,
    // If duration not defined then no progress bar, wait for user action
    props: {/* Custom props for SecondScreen */}
  },
  // ... more screens
];

const style = {
  fillColor: '#3498db',
  unfillColor: '#ecf0f1',
  backgroundColor: '#2c3e50',
};

const App = () => {
  return (
    <StoryCarousel style={style} screens={screens} />
  );
};

export default App;

In this example, each screen component can access and utilize the provided props.

License

MIT