Skip to content

Instantly share code, notes, and snippets.

@Jpoliachik
Created January 9, 2024 17:17
Show Gist options
  • Save Jpoliachik/d7eccea3232575375c33ddae292b582a to your computer and use it in GitHub Desktop.
Save Jpoliachik/d7eccea3232575375c33ddae292b582a to your computer and use it in GitHub Desktop.
QuestionScreen updated 2
...
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,
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment