robinheinze

def numbers_to_words(number, index = 0)
  ones_words = {1 => "one", 2 => "two", 3 => "three", 4 => "four", 5 => "five", 6 => "six", 7 => "seven", 8 => "eight", 9 => "nine", 10 => "ten", 11 => "eleven", 12 => "twelve", 13 => "thirteen", 14 => "fourteen", 15 => "fifteen", 16 => "sixteen", 70 => "seventeen", 18 => "eighteen", 19 => "nineteen", 0 => "\b"}
  decades = {0 => "\b", 20 => "twenty", 30 => "thirty", 40 => "forty", 50 => "fifty", 60 => "sixty", 70 => "seventy", 80 => "eighty", 90 => "ninety"}
  magnitudes = ["", "thousand", "million", "billion", "trillion"]
  result = []

  if number > 999
    result << numbers_to_words(number / 1000, index + 1) << numbers_to_words(number % 1000, index)
  elsif number > 99
    result << numbers_to_words(number / 100) << "hundred" << numbers_to_words(number % 100) << magnitudes[index]

robinheinze

First, let's assemble the data. Say we have two sets of objects: Fruits and Vegetables.

const fruits = [
  {
    name: 'Apple',
    color: 'Green'
  },
  {
    name: 'Banana',

robinheinze

import * as React from "react"
import { View, Dimensions } from 'react-native'

const STYLE = {
  width: Dimensions.get("window").width,
  height: Dimensions.get("window").height,
  backgroundColor: "yellow"
}

export class MyComponent extends React.Component {

robinheinze

export const QuestionModel = types
  .model("Question")
  .props({
    id: types.identifier,
    category: types.maybe(types.string),
    type: types.enumeration(["multiple", "boolean"]),
    difficulty: types.enumeration(["easy", "medium", "hard"]),
    question: types.maybe(types.string),
    correctAnswer: types.maybe(types.string),
    incorrectAnswers: types.optional(types.array(types.string), []),

robinheinze

export const DEFAULT_API_CONFIG: ApiConfig = {
  url: env.API || "https://opentdb.com/api.php",
  timeout: 10000,
}

robinheinze

export const QuestionStoreModel = types
  .model("QuestionStore")
  .props({
    questions: types.optional(types.array(QuestionModel), []),
  })
  .extend(withEnvironment)
  .views(self => ({})) // eslint-disable-line @typescript-eslint/no-unused-vars
  .actions(self => ({})) // eslint-disable-line @typescript-eslint/no-unused-vars

robinheinze

export const QuestionStoreModel = types
  .model("QuestionStore")
  .props({
    questions: types.optional(types.array(QuestionModel), []),
  })
  .extend(withEnvironment)
  .views(self => ({})) // eslint-disable-line @typescript-eslint/no-unused-vars
  .actions(self => ({
    saveQuestions: (questionSnapshots: QuestionSnapshot[]) => {
      const questionModels: Question[] = questionSnapshots.map(c => QuestionModel.create(c)) // create model instances from the plain objects

robinheinze

import { createStackNavigator } from "@react-navigation/stack"
import { QuestionScreen } from "../screens"

/**
 * This type allows TypeScript to know what routes are defined in this navigator
 * as well as what properties (if any) they might take when navigating to them.
 *
 * If no params are allowed, pass through `undefined`. Generally speaking, we
 * recommend using your MobX-State-Tree store(s) to keep application state
 * rather than passing state through navigation params.

robinheinze

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,

robinheinze

import { useStores } from "../../models"
...
export const QuestionScreen = observer(function QuestionScreen() {
  // Pull in one of our MST stores
  const { questionStore } = useStores()
...