react-native-viewpager

Viewpager is a component that allows you to swipe horizontaly between the children componnents
It's a full typescript responsive component that uses reanimated 2.
The work is still in progress but you can use it and improve it if you want! PR are welcome.

Demo

Works on both iPhone and Android

Installation

Using yarn:

yarn add @grean/react-native-viewpager

Usage

You can control the viewpager value with the index prop.
When you manually change the value, onChanged callback will be called.
Navigation is made of SVG.

constcurrentItemIndex=1const[index,setIndex]=useState(currentItemIndex);constonChanged=(newIndex: number)=>{setIndex(newIndex)}//removed code for brevety<ViewPager{...{style: {flex: 1,},
index,navigationHeight: 0.075,
onChanged,}}><Viewstyle={styles.page}><Textstyle={styles.text}>Screen 1</Text></View><Viewstyle={styles.page}><Textstyle={styles.text}>Screen 2</Text></View><Viewstyle={styles.page}><Textstyle={styles.text}>Screen 3</Text></View></ViewPager>

Component props

interfaceViewPagerProps{children: React.ReactNode[]//All views that you want to swipeindex: number//0: Initial index at startupnavigation?: boolean//true: If you want to display the navigation barnavigationHeight?: number//0.1: Pourcentage of the viewpager container to define the height of the navigation baronChanged?: (index: number)=>void//Callback invocked when manually change the current child viewpointColor?: number[]//[255,255,255]: Color of the navigation point whith [R,G,B] valuespointRadius?: number//6: Value that divide the height of the navigation bar to define the radius of the dot that represent the current selected viewtickColor?: number[]//[255,255,255]: Color of the navigation ticks whith [R,G,B] valuestickRadius?: number//4: Value that divide the height of the navigation bar to define the radius of the ticks that represent each child viewstrokeWidth?: number//2: Value that define the strokeWidth svg prop of the tick componentstyle: ViewStyle//All RN view style props}

Testing

See Expo example app for testing with hot-reload, you can directly modify the code's component and see how your modifications looks like immediately.

git clone https://github.com/grean/react-native-viewpager.git
cd react-native-viewpager && yarn
cd example && yarn
yarn ios

About

If you want to eat well and healthy, i recommand you to check out our mobile app Dietethic.net

License

MIT