ReactNativeDragAndDropTest

import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { DragAndDropProvider, Draggable, DropView } from '@jgoday/react-native-dragndrop';

const styles = StyleSheet.create({
  successMatch: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  failureMatch: {
    color: 'red',
  },
  card: {
    flex: 1,
    padding: 60,
  }
});

export default function Sample(props) {
    const [ numbers, setNumbers ] = React.useState([1, 2, 3, 4]);
    const [ currentStyle, setCurrentStyle ] = React.useState({});

    const onDrop = (currentNumber, selectedNumber) => {
        if (currentNumber == selectedNumber) {
            setCurrentStyle(styles.successMatch);
        }
        else {
            setCurrentStyle(styles.failureMatch);
        }
    }

    return (<View style={styles.container}>
        <DragAndDropProvider>
            {numbers.map((w, i) => <DropView key={i}
                onDrop={n => onDrop(n, w)}>
                <View style={styles.card}><Text>{w}</Text></View>
            </DropView>)}

            <Draggable data={2}>
              <View style={styles.card}>
                <Text style={currentStyle}>2</Text>
              </View>
            </Draggable>
        </DragAndDropProvider>
    </View>);
}