📱 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