GameScreenFive.js 2.48 KB
import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import CountDown from 'react-native-countdown-component';
import Countdown from '../../../constants/Countdown';
import Tts from 'react-native-tts';

const GameScreenFive = ({navigation}) => {

    useEffect(()=>{
        Tts.speak('Fish', {
            androidParams: {
              KEY_PARAM_PAN: 0.6,
              KEY_PARAM_VOLUME: 0.6,
              KEY_PARAM_STREAM: 'STREAM_MUSIC',
            },
          });
    });
    
        return(
            <View style={styles.sreen}>
                <Text></Text>
                <View style={styles.imageContainer}>
                    <Image 
                        source={require('../../../memory/images/elementry/5/el-fish1-main.jpg')}
                        style={styles.image}
                    />
                </View>
                <Text style={styles.imageText}>Fish</Text>
                <CountDown
                    size={40}
                    until={Countdown.elementry}
                    // onFinish={() => alert('Finished')}
                    onFinish={() => navigation.navigate('GameScreenFiveAll')}
                    digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
                    digitTxtStyle={{color: '#1CC625'}}
                    timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
                    separatorStyle={{color: '#1CC625'}}
                    timeToShow={['S']}
                    timeLabels={{s: 'Seconds'}}
                    style={styles.counter}
                />
                
            </View>
        );
    }
    
    const styles = StyleSheet.create({
        sreen: {
            flex:1,
            padding: 10,
            alignItems: 'center',
        },
        imageContainer: {
            width: '80%',
            height: 300,
            borderColor: 'black',
            borderWidth: 2,
            overflow: 'hidden',
            marginTop: 30,
            borderRadius: 10,
            shadowColor: 'black',
            shadowOpacity: 0.26,
            shadowOffset: {width:0, height:2},
            shadowRadius: 10,
            elevation: 8
        },
        image: {
            width: '100%',
            height: '100%'
        },
        imageText: {
            fontSize: 36,
            fontWeight: 'bold',
            marginTop: 30
        },
        counter: {
            marginTop: 30
        }
    });
    
    export default GameScreenFive;