React Native Error

Asked

Viewed 69 times

0

Could someone help me I received the following feedback

Não esqueça de cancelar as notificações e agendar as notificações do dia seguinte quando o usuário terminar um quiz :thumbsup:. Você pode usar, por exemplo, o isQuestionAvaliable para testar. Se não existir mais questões disponíveis, significa que o usuário terminou o quiz, então você executa:

clearLocalNotification()
        .then(setNotification);

this is my code

import React from 'react';
import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
import { NavigationActions } from 'react-navigation'

export default class Quiz extends React.Component {

    state = {
        questionIndex: 0,
        correctAnswers: 0,
        shouldShowAnswer: false,
    };

    onCorrect = () => {
        const {questionIndex, correctAnswers} = this.state;
        this.setState({questionIndex: questionIndex + 1, correctAnswers: correctAnswers + 1, shouldShowAnswer: false});
    };

    startQuiz = () => {
        this.setState({questionIndex: 0, correctAnswers: 0, shouldShowAnswer: false});
    };

    backToDeck = () => {
        this.props.navigation.goBack();

    }

    onIncorrect = () => {
        this.setState({questionIndex: this.state.questionIndex + 1});
    };

    showAnswer = () => {
        this.setState({shouldShowAnswer: !this.state.shouldShowAnswer});
    };

    render() {
        const {questionIndex, correctAnswers, shouldShowAnswer} = this.state;
        const {questions} = this.props.navigation.state.params;
        const isQuestionAvailable = questionIndex < questions.length;
        const questionLeft = questions.length - questionIndex;

        return (
            <View style={{flex: 1}}>
                {isQuestionAvailable ?  (
                    <View style={styles.container}>

                        <View style={[styles.group, {justifyContent: 'flex-start', flex: 1}]}>
                            <View>
                                <Text>{questionLeft} / {questions.length}</Text>
                            </View>
                        </View>

                        <View style={[styles.group, {flex: 4}]}>
                            <View>
                                {shouldShowAnswer ? (
                                    <View style={{alignItems: 'center'}}>
                                        <Text style={{fontSize: 36}}>{questions[questionIndex].answer}</Text>

                                        <TouchableOpacity onPress={this.showAnswer}>
                                            <Text style={{fontSize: 18, color: '#70dd2f'}}>Question</Text>
                                        </TouchableOpacity>

                                    </View>) : (
                                    <View style={{alignItems: 'center'}}>
                                        <Text style={{fontSize: 36}}>{questions[questionIndex].question}</Text>

                                        <TouchableOpacity onPress={this.showAnswer}>
                                            <Text style={{fontSize: 18, color: '#ff463f'}}>Answer</Text>
                                        </TouchableOpacity>

                                    </View>
                                )}
                            </View>
                        </View>

                        <View style={{alignItems: 'center', justifyContent: 'space-around', flex: 2}}>
                            <View style={styles.container}>

                                <TouchableOpacity onPress={this.onCorrect}>
                                    <Text style={{
                                        backgroundColor: '#70dd2f',
                                        justifyContent: 'center',
                                        height: 30,
                                        textAlign: 'center',
                                        width: 200
                                    }}>Correct</Text>
                                </TouchableOpacity>
                                <TouchableOpacity onPress={this.onIncorrect}>
                                    <Text style={{
                                        backgroundColor: '#ff463f',
                                        justifyContent: 'center',
                                        height: 30,
                                        textAlign: 'center',
                                        width: 200,
                                        marginTop: 20
                                    }}>Incorrect</Text>
                                </TouchableOpacity>

                            </View>

                        </View>

                    </View>

                ) : (
                    <View style={styles.container}>
                        <Text>Score: {correctAnswers}</Text>

                        <View style={{alignItems: 'center', justifyContent: 'space-around', flex: 2}}>
                            <View style={styles.container}>

                                <TouchableOpacity onPress={this.startQuiz}>
                                    <Text style={{
                                        backgroundColor: '#70dd2f',
                                        justifyContent: 'center',
                                        height: 30,
                                        textAlign: 'center',
                                        width: 200
                                    }}>Start Quiz</Text>
                                </TouchableOpacity>
                                <TouchableOpacity onPress={this.backToDeck}>
                                    <Text style={{
                                        backgroundColor: '#ff463f',
                                        justifyContent: 'center',
                                        height: 30,
                                        textAlign: 'center',
                                        width: 200,
                                        marginTop: 20
                                    }}>Back to Deck</Text>
                                </TouchableOpacity>

                            </View>

                        </View>
                    </View>
                )}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 20,
    }
});

The question is where I put that clearLocalNotification() could help me solve this problem

  • The line {isQuestionAvailable ? ... inside render() is a condition, if true displays the question otherwise displays the score, then that’s the point you should place. Test.

  • I did not understand could explain me a little more detailed pf

  • The condition to check if you have questions available is isQuestionAvailable = questionIndex < questions.length .. on line 43 you are checking whether isQuestionAvailable is true if so, it will execute 44~103 line code. If so false is because the user has finished the quiz, then will run the code of the lines 105~135 and this is where you put clearLocalNotification().then(setNotification);

  • Then I’d look like this </View>&#xA;&#xA; ) : clearLocalNotification()&#xA; .then(setNotification)&#xA; (&#xA; &#xA; <View style={styles.container}>&#xA; <Text>Score: {correctAnswers}</Text>&#xA;&#xA; <View style={{alignItems: 'center', justifyContent: 'space-around', flex: 2}}>&#xA; <View style={styles.container}>

  • You should put below line 104

  • after the : correct I did this and the variable error

  • Referenceerror: Can'’t find variable clearLocalNotification

  • In order to be able to help properly, you will have to create a [mcve] in order to help solve it, we also need to know which libraries are using it alongside the React Native.

  • https://github.com/filipenickel/mobile-flashcards

Show 4 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.