react-native-swipebox

A simple swipe box component. Allows to be fully customizable.

Installation

React Native >= 0.49

yarn add react-native-swipebox

Attributes

| 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.