0.0.5 • Published 6 years ago
react-native-swipebox v0.0.5
react-native-swipebox
A simple swipe box component. Allows to be fully customizable.
Installation
React Native >= 0.49
yarn add react-native-swipeboxAttributes
| Prop | Description | Default |
|---|---|---|
string backgroundColor | Specifies the background color of the component | #828186 |
string borderColor | Specifies the border color of the component | undefined |
number borderWidth | Specifies the border width of the component | undefined |
number borderRadius | Specifies the border radius of the component | 3 |
string textColor | The text color used when strings are rendered | #ffffff |
number fontSize | The font size of the text | auto |
string fontFamily | The font family of the text | undefined |
array/object tiles | An array or component object of the tiles to be rendered | required |
object style | A standard style object - will be applied to the main view | undefined |
number size | The size of each tile. Used when width and height are not specified. | 120 |
number width | The width of each tile | undefined |
number height | The height of each tile | undefined |
number selectedIndex | The initial selected tile | undefined |
Events
| Prop | Description |
|---|---|
onChange | Executed when the tile was changed. Passes the index in the tiles array and the actual value |
onSwipeDown | Executed when the user swipes down. |
onSwipeUp | Executed when the user swipes up. |
Examples
Import the component:
import SwipeBox from 'react-native-swipebox';Simple Example
<SwipeBox
tiles={[12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}
onChange={(index, value) => console.log(index, value)}
/>Images
<SwipeBox
tiles={[
<Image source={{url: 'ok.png'}} />,
<Image source={{url: 'cancel.png'}} />,
]}
onChange={(index, value) => console.log(index, value)}
/>Select tile
<SwipeBox
tiles={[12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}
selectedIndex={4}
onChange={(index, value) => console.log(index, value)}
/>Components
Other components that are using this component:
react-native-swipetimepicker - A elegant and simple time picker.