search

5up-okamura / react-native-draggable-gridview

MIT License
13 stars 13 forks source link

readme

React Native Draggable GridView

A drag-and-drop-enabled GridView component for React Native.

demo

React Native Draggable GridView Demo

Install

npm install --save react-native-draggable-gridview

Props

Name Type Default
data any[]
numColumns? number 1
containerMargin? ContainerMargin {top:0, bottom:0, left:0, right:0}
width? number Dimensions.get('window').width
activeOpacity? number 0.5
delayLongPress? number 500
selectedStyle? ViewStyle {shadowColor:'#000', shadowRadius:8, shadowOpacity:0.2, elevation:10}
animationConfig? AnimationConfig {easing:Easing.ease, duration:300, useNativeDriver:true}
keyExtractor? (item: any) => string
renderItem (item: any, index?: number) => JSX.Element
renderLockedItem? (item: any, index?: number) => JSX.Element
locked? (item: any, index?: number) => boolean
onBeginDragging? () => void
onPressCell? (item: any, index?: number) => void
onReleaseCell? (data: any[]) => void
onEndAddAnimation? (item: any) => void
onEndDeleteAnimation? (item: any) => void

Usage

import GridView from 'react-native-draggable-gridview'
const [data, setData] = useState(['1', '2', '3', '4', '5', '6'])

<GridView
    data={data}
    numColumns={3}
    renderItem={(item) => (
        <View style={{ flex: 1, margin: 1, justifyContent: 'center', backgroundColor: 'gray' }}>
        <Text style={{ textAlign: 'center' }}>{item}</Text>
        </View>
    )}
    onReleaseCell={(items) => setData(items)}
/>

License

This project is licensed under the MIT License - see the LICENSE.md file for details.