First, let's assemble the data. Say we have two sets of objects: Fruits and Vegetables.
const fruits = [
{
name: 'Apple',
color: 'Green'
},
{
name: 'Banana',
First, let's assemble the data. Say we have two sets of objects: Fruits and Vegetables.
const fruits = [
{
name: 'Apple',
color: 'Green'
},
{
name: 'Banana',
/Users/robinheinze/.npm/_npx/e31027f3785124a8/node_modules/gluegun/build/index.js:13 | |
throw up; | |
^ | |
npm WARN exec The following package was not found and will be installed: react-native-rename | |
npm WARN deprecated nomnom@1.8.1: Package no longer supported. Contact support@npmjs.com for more info. | |
mv: no such file or directory: /Users/robinheinze/Code/ir/MyApp/ios/MyApp | |
mv: no such file or directory: /Users/robinheinze/Code/ir/MyApp/ios/MyApp-tvOS | |
mv: no such file or directory: /Users/robinheinze/Code/ir/MyApp/ios/MyApp-tvOSTests | |
mv: no such file or directory: /Users/robinheinze/Code/ir/MyApp/ios/MyApp.xcodeproj | |
mv: no such file or directory: /Users/robinheinze/Code/ir/MyApp/ios/MyApp.xcodeproj/xcshareddata/xcschemes/MyApp-tvOS.xcscheme |
import React, { useEffect, useState } from "react" | |
import { observer } from "mobx-react-lite" | |
import { FlatList, TextStyle, View, ViewStyle } from "react-native" | |
import { Screen, Text } from "../../components" | |
import { color, spacing } from "../../theme" | |
import { useStores } from "../../models" | |
import { Question } from "../../models/question/question" | |
import { decodeHTMLEntities } from "../../utils/html-decode" | |
const ROOT: ViewStyle = { |
const CHECK_ANSWER: ViewStyle = { | |
paddingVertical: spacing.smaller, | |
backgroundColor: color.palette.angry, | |
marginTop: spacing.smaller, | |
} | |
export const QuestionScreen = observer(function QuestionScreen() { | |
... | |
const onPressAnswer = (question: Question, guess: string) => { | |
question.setGuess(guess) |
import React from "react" | |
import { observer } from "mobx-react-lite" | |
import { View, ViewStyle } from "react-native" | |
import { Screen, Text } from "../../components" | |
// import { useNavigation } from "@react-navigation/native" | |
// import { useStores } from "../../models" | |
import { color, spacing } from "../../theme" | |
const ROOT: ViewStyle = { | |
flex: 1, |
... | |
export const QuestionModel = types | |
... | |
.views((self) => ({ | |
get allAnswers() { | |
return shuffle(self.incorrectAnswers.concat([self.correctAnswer])) | |
} | |
)} | |
... |
import { useStores } from "../../models" | |
... | |
export const QuestionScreen = observer(function QuestionScreen() { | |
// Pull in one of our MST stores | |
const { questionStore } = useStores() | |
... |
import { Instance, SnapshotOut, types } from "mobx-state-tree" | |
import { QuestionStore, QuestionStoreModel } from "../question-store/question-store" | |
/** | |
* A RootStore model. | |
*/ | |
// prettier-ignore | |
export const RootStoreModel = types.model("RootStore").props({ | |
questionStore: types.optional(QuestionStoreModel, {} as QuestionStore) | |
}) |
export const DEFAULT_API_CONFIG: ApiConfig = { | |
url: env.API || "https://opentdb.com/api.php", | |
timeout: 10000, | |
} |