react-native-story-carousel v1.1.0
📱 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:
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