How to implement swipe gesture used in Word-Link Game using react-native

Question

I am trying to make a game similar to Word-Link. I want to swipe between multiple letters and create a word. How can i implement this in React-Native. One idea i had was to use the patter lock system but i am still posting this query to find if there is a better way to do it. Currently I am using ToucableOpacity to press the button and generate words. [1]: https://i.stack.imgur.com/z4iKW.jpg

            <TouchableOpacity
          onPress={() => {
            this.addLetters(alpha4[0])
            // Alert.alert("A")
            box1 = alpha4[0]

            this.setState({ box1: box1 })
          }}
        >
          <View style={{ width: 50, height: 50, backgroundColor: 'beige' }}>
        <Text style={{ fontSize: 30, fontWeight: 'bold', justifyContent: 'center', textAlignVertical: 'center', textAlign: 'center', borderWidth: 5 }}>{alpha4[0]}</Text>
          </View>
        </TouchableOpacity>

score 0 · Answer 1 · answered Sep 07 '20 at 05:36

0

This npm package provides functionality for detecting swipe gestures in react-native https://www.npmjs.com/package/react-native-swipe-gestures

answered Sep 07 '20 at 05:36

Apps Maven

1,314
1
4
17

How do i connect multiple components using this npm package? – Raiyan Khalil Shuvo Sep 07 '20 at 05:44

score 0 · Answer 2 · edited Dec 05 '20 at 09:26

0

onDrag, onDrop, onMouseMove. Which, for phone on react-native you need this. onStartShouldSetResponder, onResponderGrant, onResponderMove.

edited Dec 05 '20 at 09:26

Tyler2P

2,324
26
22
31

answered Dec 04 '20 at 08:57

Chirag Dave

786
6
5

How to implement swipe gesture used in Word-Link Game using react-native

2 Answers2