QuestionScreen updated 2

QuestionScreen.tsx

...
import { RadioGroup } from "react-native-radio-buttons-group"
...
export const QuestionScreen: FC<QuestionScreenProps> = observer(function QuestionScreen() {
  
  ...

  const onPressAnswer = (question: Question, guess: string) => {
    question.setGuess(guess)
  }

  const checkAnswer = (question: Question) => {
    if (question.isCorrect) {
      Alert.alert("Correct!")
    } else {
      Alert.alert(`Wrong! The correct answer is ${question.correctAnswer}`)
    }
  }

  const QuestionComponent = ({ question }: { question: Question }) => {
    return (
      <View style={$questionWrapper}>
        <Text style={$question} text={decodeHTMLEntities(question.question || "")} />
        <RadioGroup
          radioButtons={question.allAnswers.map((answer) => ({
            id: answer,
            label: answer,
            color: colors.text,
            labelStyle: $answer,
          }))}
          onPress={(guess) => onPressAnswer(question, guess)}
          selectedId={question.guess}
        />
        <Button style={$checkAnswer} onPress={() => checkAnswer(question)} text="Check Answer!" />
      </View>
    )
  }
  ...
})
          
...
          
const $answer: TextStyle = {
  fontSize: spacing.sm,
  color: colors.text,
  flex: 1,
}

const $checkAnswer: ViewStyle = {
  paddingVertical: spacing.xs,
  backgroundColor: colors.error,
  marginTop: spacing.sm,
  borderColor: colors.error,
}