import { NavigationContainer } from '@react-navigation/native'; import React, {useState,useEffect} from 'react'; import {View, Text, StyleSheet, Image, TouchableOpacity,FlatList} from 'react-native'; import { useDispatch } from 'react-redux'; import * as memoryActions from '../../../store/actions/memory' import { SCREEN2 } from '../../../memory/data/elementry-level'; let gameData = SCREEN2.sort((item)=>Math.random(item.id)-0.5); const GameScreenTwoAll = ({navigation}) => { const shuffle = () => { gameData = SCREEN2.sort((item)=>Math.random(item.id)-0.5); }; if(gameData.length == 0){ shuffle(); } const dispatch = useDispatch(); const [time, setTime] = useState(0); const [timerOn, setTimeOn] = useState(true); useEffect(()=>{ let interval = null; if(timerOn){ interval = setInterval(()=>{ setTime(prevTime=> prevTime + 20) },10) }else{ clearInterval(interval); } return () => clearInterval(interval); },[timerOn]); const renderImageItem = (itemData) => { return( <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('GameScreenThree')}}> <Image style={styles.image} source={itemData.item.source}/> </TouchableOpacity> ) } return( <View style={styles.screen}> <FlatList keyExtractor={(item, data)=>item.id} data={gameData} renderItem={renderImageItem} numColumns={2} /> </View> ); } const styles = StyleSheet.create({ screen: { flex: 1, padding: 10, alignItems: 'center', }, imageItem: { width: '48%', height: 165, margin: 5, borderWidth: 1, borderColor: 'black', borderRadius: 10, shadowColor: 'black', shadowOpacity: 0.26, shadowOffset: {width:0, height:2}, shadowRadius: 10, elevation: 8, overflow: 'hidden' }, imageContainer: { flexDirection: 'row', width: '100%' }, image: { width: '100%', height: '100%' } }); export default GameScreenTwoAll;