A swipe-able box component for react native
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs
src
.gitignore
README.md
package.json

README.md

react-native-swipebox

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

alt text

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.