I'm doing a word search game with react native and I'm having trouble bringing the matrix information to save in a state,
I've tried with gesture-handling but I can only get the positions but I can't trigger an event when I drag my finger over the screen. could someone give me a tip
<GestureHandlerRootView>
<Animated.View style={{ paddingTop: 18 }}>
{result.structure.content.map((grid, index) => (
<S.Line key={index}>
{grid.map(row => {
const columnWidth = S.gridColumnWidth(grid.length);
return (
<Animated.View
key={row.id}
style={[
...styleGridSelect(row),
{
width: columnWidth,
height: columnWidth,
},
]}
>
<PanGestureHandler
onGestureEvent={() => onClickSelect(row)}
>
<Animated.Text
style={[
S.gridStyles.text,
{
textAlign: 'center',
fontSize:
columnWidth /
Platform.select({ ios: 1.3, android: 1.5 }),
},
]}
>
{row.letter}
</Animated.Text>
</PanGestureHandler>
</Animated.View>
);
})}
</S.Line>
))}
</Animated.View>
</GestureHandlerRootView>
the json template i am using is similar to this:
structure: {
limit_tips: 6,
nome: 'Fadas existem?',
description:
'Seres da Mitologia CELTA, fadas são CRIATURAS encantadas que foram popularizadas nos CONTOS infantis. A expressão FADA; vem do latim, fatum, que quer dizer DESTINO. Na literatura há fadas famosas, como a Sininho de PETER Pan; a Morgana, protetora do Rei Arthur; e Viviane, amante do MAGO Merlin.',
content: [
[
{ id: 1, column: 0, letter: 'S', line: 0 },
{ id: 2, column: 1, letter: 'A', line: 0 },
{ id: 3, column: 2, letter: 'R', line: 0 },
{ id: 4, column: 3, letter: 'U', line: 0 },
{ id: 5, column: 4, letter: 'T', line: 0 },
{ id: 6, column: 5, letter: 'A', line: 0 },
{ id: 7, column: 6, letter: 'I', line: 0 },
{ id: 8, column: 7, letter: 'R', line: 0 },
{ id: 9, column: 8, letter: 'C', line: 0 },
],
[
{ id: 10, column: 0, letter: 'P', line: 1 },
{ id: 11, column: 1, letter: 'F', line: 1 },
{ id: 12, column: 2, letter: 'I', line: 1 },
{ id: 13, column: 3, letter: 'M', line: 1 },
{ id: 14, column: 4, letter: 'A', line: 1 },
{ id: 15, column: 5, letter: 'G', line: 1 },
{ id: 16, column: 6, letter: 'O', line: 1 },
{ id: 17, column: 7, letter: 'Y', line: 1 },
{ id: 18, column: 8, letter: 'N', line: 1 },
],
[
{ id: 19, column: 0, letter: 'T', line: 2 },
{ id: 20, column: 1, letter: 'E', line: 2 },
{ id: 21, column: 2, letter: 'E', line: 2 },
{ id: 22, column: 3, letter: 'C', line: 2 },
{ id: 23, column: 4, letter: 'A', line: 2 },
{ id: 24, column: 5, letter: 'U', line: 2 },
{ id: 25, column: 6, letter: 'E', line: 2 },
{ id: 26, column: 7, letter: 'D', line: 2 },
{ id: 27, column: 8, letter: 'O', line: 2 },
],
[
{ id: 28, column: 0, letter: 'R', line: 3 },
{ id: 29, column: 1, letter: 'N', line: 3 },
{ id: 30, column: 2, letter: 'T', line: 3 },
{ id: 31, column: 3, letter: 'H', line: 3 },
{ id: 32, column: 4, letter: 'O', line: 3 },
{ id: 33, column: 5, letter: 'S', line: 3 },
{ id: 34, column: 6, letter: 'G', line: 3 },
{ id: 35, column: 7, letter: 'N', line: 3 },
{ id: 36, column: 8, letter: 'N', line: 3 },
],
[
{ id: 37, column: 0, letter: 'E', line: 4 },
{ id: 38, column: 1, letter: 'T', line: 4 },
{ id: 39, column: 2, letter: 'U', line: 4 },
{ id: 40, column: 3, letter: 'E', line: 4 },
{ id: 41, column: 4, letter: 'A', line: 4 },
{ id: 42, column: 5, letter: 'N', line: 4 },
{ id: 43, column: 6, letter: 'I', line: 4 },
{ id: 44, column: 7, letter: 'G', line: 4 },
{ id: 45, column: 8, letter: 'A', line: 4 },
],
[
{ id: 46, column: 0, letter: 'G', line: 5 },
{ id: 47, column: 1, letter: 'F', line: 5 },
{ id: 48, column: 2, letter: 'G', line: 5 },
{ id: 49, column: 3, letter: 'T', line: 5 },
{ id: 50, column: 4, letter: 'R', line: 5 },
{ id: 51, column: 5, letter: 'T', line: 5 },
{ id: 52, column: 6, letter: 'T', line: 5 },
{ id: 53, column: 7, letter: 'D', line: 5 },
{ id: 54, column: 8, letter: 'I', line: 5 },
],
[
{ id: 55, column: 0, letter: 'E', line: 6 },
{ id: 56, column: 1, letter: 'E', line: 6 },
{ id: 57, column: 2, letter: 'L', line: 6 },
{ id: 58, column: 3, letter: 'M', line: 6 },
{ id: 59, column: 4, letter: 'S', line: 6 },
{ id: 60, column: 5, letter: 'T', line: 6 },
{ id: 61, column: 6, letter: 'A', line: 6 },
{ id: 62, column: 7, letter: 'O', line: 6 },
{ id: 63, column: 8, letter: 'O', line: 6 },
],
[
{ id: 64, column: 0, letter: 'S', line: 7 },
{ id: 65, column: 1, letter: 'E', line: 7 },
{ id: 66, column: 2, letter: 'R', line: 7 },
{ id: 67, column: 3, letter: 'E', line: 7 },
{ id: 68, column: 4, letter: 'O', line: 7 },
{ id: 69, column: 5, letter: 'F', line: 7 },
{ id: 70, column: 6, letter: 'I', line: 7 },
{ id: 71, column: 7, letter: 'A', line: 7 },
{ id: 72, column: 8, letter: 'S', line: 7 },
],
[
{ id: 73, column: 0, letter: 'C', line: 8 },
{ id: 74, column: 1, letter: 'R', line: 8 },
{ id: 75, column: 2, letter: 'D', line: 8 },
{ id: 76, column: 3, letter: 'O', line: 8 },
{ id: 77, column: 4, letter: 'F', line: 8 },
{ id: 78, column: 5, letter: 'A', line: 8 },
{ id: 79, column: 6, letter: 'A', line: 8 },
{ id: 80, column: 7, letter: 'T', line: 8 },
{ id: 81, column: 8, letter: 'N', line: 8 },
],
],
suggestions: [
'CELTA',
'CONTOS',
'CRIATURAS',
'DESTINO',
'FADA',
'MAGO',
'PETER',
],
},
