3
React native flash swiper
source link: https://reactnativeexample.com/react-native-flash-swiper/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
react-native-flash-swiper
Why would you want to use my package?
- You can swipe images and components
- It is easy and fast to use
- When you use it, you will not experince any shifts in the screen
Screenshot
Installation
Install react-native-flash-swiper with npm
npm install react-native-flash-swiper
Install react-native-flash-swiper with yarn
yarn add react-native-flash-swiper
Properties
Props | Default | Required | Type | Description |
---|---|---|---|---|
color | “” | Required | string |
Color of wrapper dot |
innerDotBackground | “” | Required | string |
Color of inner dot |
innerDotBorderColor | “” | Required | string |
Border color of inner dot |
components | [] | Required | Array[component: JSX, key: Number] |
You will swipe in the components that are inside the array |
Usage/Examples
import * as React from 'react'
import { SafeAreaView, View, StyleSheet } from 'react-native'
import { FlashSwiper } from 'react-native-flash-swiper'
import { Card } from '@components'
const App = () => {
const data = [
{component: <Card city='Istanbul' description="Istanbul is the largest city in Turkey, serving as the country's economic, cultural and historic hub.", image={require('./assets/1.jpg')} />, key: 1},
{component: <Card city='German' description="Germany's central and southern regions have forested hills and mountains cut through by the Danube, Main, and Rhine river valleys.", image={require('./assets/2.jpg')} />, key: 2},
{component: <Card city='France' description="France is one of the oldest nations on Earth and the most ethnically diverse country in Europe. ", image={require('./assets/3.jpg')} />, key: 3},
{component: <Card city='Italy' description="Italy is a boot-shaped peninsula that juts out of southern Europe into the Adriatic Sea, Tyrrhenian Sea, Mediterranean Sea, and other waters", image={require('./assets/4.jpg')} />, key: 4},
]
const { container } = styles;
return (
<SafeAreaView style={container}>
<View>
<FlashSwiper
components={data}
color='black'
innerDotBorderColor='white'
innerDotBackground='black'
/>
</View>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})
export default App
Upcoming Features
- Default Options
- Right and Left arrow
- Animation
- Page numbers
Authors
🔗 Links
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK