- A custom component of a viewpager in react native with left and right controls, touch scrolling and an animated tab indicator, in typescript.

- It comes with a built-in TypeScript typings and is compatible with all popular JavaScript frameworks. You can use it directly or leverage well-maintained wrapper packages that allow for a more native integration with your frameworks of choice.

Example:


How to use:

``
import ViewpagerTabIndicator from 'react-native-viewpager-with-indicator';

const data = [
{
index: 0,
uri: "https://d26oc3sg82pgk3.cloudfront.net/files/media/edit/image/49812/article_aligned%402x.jpg",
},
{
index: 1,
uri: "https://img.buzzfeed.com/buzzfeed-static/static/2021-10/29/16/asset/10f527de873a/sub-buzz-567-1635525987-2.png",
},
{
index: 2,
uri: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQCyBT9pqTvPyPf2OjItvLQ99GcVyS1fXV7A&s",
},
];


data={data}
dotStyle={{backgroundColor: "#FFF"}}
showControlls={false}
/>
``

DateInput Props -

| Name | Type | Default |
| -------------------- | ------------------------------ | ------- |
| data | {index: number; uri: string}[] |
| style? | ViewStyle |
| showGradiant? | boolean |
| dotStyle? | ViewStyle |
| dotWidthOutputRange? | number[] |
| indicatorStyle? | ViewStyle |
| buttonControlStyle? | ViewStyle |
| showControlls? | boolean |