Expo Instagram Reels
It provides a component that allows you to display a list of reels similar to the Instagram app.
Features
- List of videos
- Seekable videos
- Play/Pause option
- Fully customizable
✨ App Preview
Video Preview
Installation
Just run the below command in your project folder
Note:- This runs only in an Expo Managed and Bare(expo) project and not in React Native CLI project.
To install,
npm install --save expo-instagram-reels
Usage
import Reels from 'expo-instagram-reels';
...
// Pass the array of objects with _id and uri as props
<Reels videos={videos} />
Parameters
Required Parameters
| Parameter | required | Default | Description |
|---|---|---|---|
| videos | YES | [] |
List of videos for reels |
Container Parameters
| Parameter | required | Default | Description |
|---|---|---|---|
| backgroundColor | NO | black |
Background color of the whole container |
Header Parameters
| Parameter | required | Default | Description |
|---|---|---|---|
| headerTitle | NO | "Reels" |
Title to be shown on the top header bar |
| headerIconName | NO | arrowright |
iconName from AntDesign family |
| headerIconColor | NO | white |
icon color for the header bar |
| headerIconSize | NO | 24 |
icon size for the header bar |
| headerIcon | NO | null | Custom icon component to display |
| headerComponent | NO | null | custom component to show instead of header bar |
| onHeaderIconPress | NO | null | function to execute when user presses the back icon in the header Bar |
Button Options Parameters
| Parameter | required | Default | Description |
|---|---|---|---|
| optionsComponent | NO | null | A custom component to show instead of default options such as like, comment etc. |
| pauseOnOptionsShow | NO | true | Whether to pause the playback when user touches the scren or not |
| onSharePress | NO | null | Function to execute when user presses the share button. Gives _id in props |
| onCommentPress | NO | null | Function to execute when user presses the comment button. Gives _id in props |
| onLikePress | NO | null | Function to execute when user presses the like button. Gives _id in props |
| onDislikePress | NO | null | Function to execute when user presses the dislike button. Gives _id in props |
Video Player Parameters
| Parameter | required | Default | Description |
|---|---|---|---|
| onFinishPlaying | NO | null | Function to execute on every video finish |
Slider component Parameters
| Parameter | required | Default | Description |
|---|---|---|---|
| minimumTrackTintColor | NO | null | The color used for the track to the left of the button. |
| maximumTrackTintColor | NO | null | The color used for the track to the right of the button. |
| thumbTintColor | NO | null | Color of the foreground switch grip. |
Time display Parameters
| Parameter | required | Default | Description |
|---|---|---|---|
| timeElapsedColor | NO | "grey" |
Color of the timestamp which shows total time that has been elapsed since the video started playing |
| totalTimeColor | NO | "grey" |
Color of the timestamp which shows total duration of the clip |