diff --git a/assets/js/c47fa949.02231d6d.js b/assets/js/c47fa949.02231d6d.js
new file mode 100644
index 00000000..10bfc3b5
--- /dev/null
+++ b/assets/js/c47fa949.02231d6d.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkignite_cookbook=self.webpackChunkignite_cookbook||[]).push([[5032],{8332:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>i,default:()=>p,frontMatter:()=>s,metadata:()=>a,toc:()=>l});var o=t(7624),r=t(2172);const s={title:"Expo Router",description:"How to convert Ignite v9 demo app to utilize `expo-router`",tags:["Expo","expo-router","react-navigation"],last_update:{author:"Frank Calise & Justin Poliachik"},publish_date:new Date("2024-01-25T00:00:00.000Z")},i="Expo Router",a={id:"recipes/ExpoRouter",title:"Expo Router",description:"How to convert Ignite v9 demo app to utilize `expo-router`",source:"@site/docs/recipes/ExpoRouter.md",sourceDirName:"recipes",slug:"/recipes/ExpoRouter",permalink:"/docs/recipes/ExpoRouter",draft:!1,unlisted:!1,tags:[{label:"Expo",permalink:"/docs/tags/expo"},{label:"expo-router",permalink:"/docs/tags/expo-router"},{label:"react-navigation",permalink:"/docs/tags/react-navigation"}],version:"current",lastUpdatedBy:"Frank Calise & Justin Poliachik",lastUpdatedAt:1710855888,formattedLastUpdatedAt:"Mar 19, 2024",frontMatter:{title:"Expo Router",description:"How to convert Ignite v9 demo app to utilize `expo-router`",tags:["Expo","expo-router","react-navigation"],last_update:{author:"Frank Calise & Justin Poliachik"},publish_date:"2024-01-25T00:00:00.000Z"},sidebar:"mainSidebar",previous:{title:"Environment Variables",permalink:"/docs/recipes/EnvironmentVariables"},next:{title:"Generator for Component Tests",permalink:"/docs/recipes/GeneratorComponentTests"}},c={},l=[{value:"Overview",id:"overview",level:2},{value:"Installation and Project Configuration",id:"installation-and-project-configuration",level:2},{value:"Reworking the Directory Structure",id:"reworking-the-directory-structure",level:2},{value:"Fix Imports",id:"fix-imports",level:3},{value:"Creating File-based Routes",id:"creating-file-based-routes",level:2},{value:"src/app/_layout.tsx",id:"srcapp_layouttsx",level:3},{value:"src/app/(app)/_layout.tsx",id:"srcappapp_layouttsx",level:3},{value:"src/app/log-in.tsx",id:"srcapplog-intsx",level:3},{value:"src/app/(app)/index.tsx",id:"srcappappindextsx",level:3},{value:"Checkpoint",id:"checkpoint",level:3},{value:"Adding Tab Navigation",id:"adding-tab-navigation",level:2},{value:"Creating Tab Screens",id:"creating-tab-screens",level:3},{value:"Showroom Screen",id:"showroom-screen",level:3},{value:"Code Cleanup",id:"code-cleanup",level:2},{value:"Summary",id:"summary",level:2},{value:"Additional Resources",id:"additional-resources",level:2}];function d(e){const n={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.M)(),...e.components},{Details:t}=n;return t||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"expo-router",children:"Expo Router"}),"\n",(0,o.jsx)(n.h2,{id:"overview",children:"Overview"}),"\n",(0,o.jsxs)(n.p,{children:["Expo Router brings file-based routing to React Native and web applications allowing you to easily create universal apps. Whenever a file is added to your ",(0,o.jsx)(n.code,{children:"src/app"})," directory, a new path is automatically added to your navigation."]}),"\n",(0,o.jsxs)(n.p,{children:["For the full documentation by ",(0,o.jsx)(n.a,{href:"https://expo.dev",children:"Expo"}),", head on over to the ",(0,o.jsx)(n.a,{href:"https://docs.expo.dev/routing/introduction/",children:"Introduction to Expo Router"}),"."]}),"\n",(0,o.jsxs)(n.p,{children:["Ignite v9 is fully equipped to utilize ",(0,o.jsx)(n.code,{children:"expo-router"})," after dependency installation and some directory structure updates! In this recipe, we'll convert the demo app's auth and tab navigators from ",(0,o.jsx)(n.code,{children:"react-navigation"})," to use ",(0,o.jsx)(n.code,{children:"expo-router"}),"."]}),"\n",(0,o.jsx)(n.admonition,{type:"tip",children:(0,o.jsxs)(n.p,{children:["This recipe is using Expo Router v3, which became available in Expo SDK 50. If you're using an older version of Expo, you can find more information about implementing it in your app in the ",(0,o.jsx)(n.a,{href:"https://docs.expo.dev/router/installation/",children:"Expo Router documentation"}),"."]})}),"\n",(0,o.jsx)(n.h2,{id:"installation-and-project-configuration",children:"Installation and Project Configuration"}),"\n",(0,o.jsx)(n.p,{children:"Bootstrap a new Ignite project:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-bash",children:"npx ignite-cli@next new pizza-router --yes\ncd pizza-router\n"})}),"\n",(0,o.jsxs)(n.p,{children:["Add the missing dependencies ",(0,o.jsx)(n.code,{children:"expo-router"})," needs:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-bash",children:"npx expo install expo-router expo-constants\n"})}),"\n",(0,o.jsxs)(n.p,{children:["Add ",(0,o.jsx)(n.code,{children:"expo-router"})," to ",(0,o.jsx)(n.code,{children:"app.json"})," plugins list if necessary:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-json",children:'"plugins": [\n ...\n "expo-font",\n // success-line\n "expo-router"\n],\n'})}),"\n",(0,o.jsxs)(n.p,{children:["Change the entry point that ",(0,o.jsx)(n.code,{children:"expo-router"})," expects in ",(0,o.jsx)(n.code,{children:"package.json"}),":"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-json",children:'// error-line\n"main": "node_modules/expo/AppEntry.js",\n// success-line\n"main": "expo-router/entry",\n'})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"expo-router"})," has great ",(0,o.jsx)(n.a,{href:"https://docs.expo.dev/router/reference/typed-routes/",children:"TypeScript support"}),", so let's enable that in ",(0,o.jsx)(n.code,{children:"app.json"})," under ",(0,o.jsx)(n.code,{children:"experiments"}),"."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-json",children:'{\n "expo": {\n "experiments": {\n "tsconfigPaths": true,\n // success-line\n "typedRoutes": true\n }\n }\n}\n'})}),"\n",(0,o.jsx)(n.h2,{id:"reworking-the-directory-structure",children:"Reworking the Directory Structure"}),"\n",(0,o.jsxs)(n.p,{children:["Expo Router requires route files to live in either ",(0,o.jsx)(n.code,{children:"app"})," or ",(0,o.jsx)(n.code,{children:"src/app"})," directories. But since our Ignite project is already using ",(0,o.jsx)(n.code,{children:"app"}),", we'll need to rename it to ",(0,o.jsx)(n.code,{children:"src"}),". We'll create ",(0,o.jsx)(n.code,{children:"src/app"})," to contain all the file-base routing files from here on out, and models, components and other shared files will be located in the ",(0,o.jsx)(n.code,{children:"src"})," directory now. We'll also remove ",(0,o.jsx)(n.code,{children:"App.tsx"})," as this is no longer the entry point of the application."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-bash",children:"rm App.tsx\nmv app src\nmkdir src/app\n"})}),"\n",(0,o.jsxs)(n.p,{children:["Let's update the TS alias and include paths over in ",(0,o.jsx)(n.code,{children:"tsconfig.json"})]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-json",children:'{\n "compilerOptions": {\n // ...\n "paths": {\n // error-line\n "app/*": ["./app/*"],\n // success-line\n "src/*": ["./src/*"],\n // ...\n },\n }\n // error-line-start\n "include": [\n "index.js",\n "App.tsx",\n "app",\n "types",\n "plugins",\n "app.config.ts",\n ".expo/types/**/*.ts",\n "expo-env.d.ts"\n ],\n // error-line-end\n // success-line\n "include": ["**/*.ts", "**/*.tsx"],\n // ...\n}\n'})}),"\n",(0,o.jsx)(n.h3,{id:"fix-imports",children:"Fix Imports"}),"\n",(0,o.jsxs)(n.p,{children:["We also need to fix up a few imports to use ",(0,o.jsx)(n.code,{children:"src/"})," instead of ",(0,o.jsx)(n.code,{children:"app/"}),".\nIgnite's Demo App only contains a few files we need to update, but an existing app could contain more."]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.code,{children:"package.json"})})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-json",children:'// error-line-start\n"format": "prettier --write \\"app/**/*.{js,jsx,json,md,ts,tsx}\\"",\n"lint": "eslint App.tsx app test --fix --ext .js,.ts,.tsx && npm run format",\n// error-line-end\n// success-line-start\n"format": "prettier --write \\"src/**/*.{js,jsx,json,md,ts,tsx}\\"",\n"lint": "eslint src test --fix --ext .js,.ts,.tsx && npm run format",\n// success-line-end\n'})}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.code,{children:"src/devtools/ReactotronConfig.ts"})})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:'// error-line-start\nimport { clear } from "app/utils/storage";\nimport { goBack, resetRoot, navigate } from "app/navigators/navigationUtilities";\n// error-line-end\n// success-line-start\nimport { clear } from "src/utils/storage";\nimport { goBack, resetRoot, navigate } from "src/navigators/navigationUtilities";\n// success-line-end\n'})}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.code,{children:"src/components/ListView.ts"})})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:'// error-line\nimport { isRTL } from "app/i18n";\n// success-line\nimport { isRTL } from "src/i18n";\n'})}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.code,{children:"src/components/Toggle.ts"})})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:'// error-line\nimport { isRTL } from "app/i18n";\n// success-line\nimport { isRTL } from "src/i18n";\n'})}),"\n",(0,o.jsxs)(t,{children:[(0,o.jsx)("summary",{children:"(optional) Additional files to update"}),(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.code,{children:"test/i18n.test.ts"})})}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:'// error-line\nimport en from "../app/i18n/en";\n// success-line\nimport en from "../src/i18n/en";\nimport { exec } from "child_process";\n'})}),(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.code,{children:"ignite/templates/component/NAME.tsx.ejs"})})}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'---\npatch:\n // error-line\n path: "app/components/index.ts"\n // success-line\n path: "src/components/index.ts"\n append: "export * from \\"./<%= props.subdirectory %><%= props.pascalCaseName %>\\"\\n"\n skip: <%= props.skipIndexFile %>\n---\nimport * as React from "react"\nimport { StyleProp, TextStyle, View, ViewStyle } from "react-native"\nimport { observer } from "mobx-react-lite"\n// error-line-start\nimport { colors, typography } from "app/theme"\nimport { Text } from "app/components/Text"\n// error-line-end\n// success-line-start\nimport { colors, typography } from "src/theme"\nimport { Text } from "src/components/Text"\n// success-line-end\n'})}),(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.code,{children:"ignite/templates/model/NAME.tsx.ejs"})})}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'---\npatches:\n// error-line\n- path: "app/models/RootStore.ts"\n// success-line\n- path: "src/models/RootStore.ts"\n after: "from \\"mobx-state-tree\\"\\n"\n insert: "import { <%= props.pascalCaseName %>Model } from \\"./<%= props.pascalCaseName %>\\"\\n"\n skip: <%= !props.pascalCaseName.endsWith(\'Store\') %>\n// error-line\n- path: "app/models/RootStore.ts"\n// success-line\n- path: "src/models/RootStore.ts"\n after: "types.model(\\"RootStore\\").props({\\n"\n insert: " <%= props.camelCaseName %>: types.optional(<%= props.pascalCaseName %>Model, {} as any),\\n"\n skip: <%= !props.pascalCaseName.endsWith(\'Store\') %>\n// error-line\n- path: "app/models/index.ts"\n// success-line\n- path: "src/models/index.ts"\n\n'})})]}),"\n",(0,o.jsx)(n.h2,{id:"creating-file-based-routes",children:"Creating File-based Routes"}),"\n",(0,o.jsx)(n.h3,{id:"srcapp_layouttsx",children:"src/app/_layout.tsx"}),"\n",(0,o.jsxs)(n.p,{children:["We're now ready to start setting up navigation for the app! If you're familiar with Ignite, ",(0,o.jsx)(n.code,{children:"app.tsx"})," is where our root navigator lives, however, with ",(0,o.jsx)(n.code,{children:"expo-router"}),", we'll use ",(0,o.jsx)(n.code,{children:"src/app/_layout.tsx"})," for that. We'll add the providers here that any route would need within the app."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'// app/_layout.tsx\nimport React from "react";\nimport { Slot, SplashScreen } from "expo-router";\nimport { useInitialRootStore } from "src/models";\n\nSplashScreen.preventAutoHideAsync();\n\nif (__DEV__) {\n // Load Reactotron configuration in development. We don\'t want to\n // include this in our production bundle, so we are using `if (__DEV__)`\n // to only execute this in development.\n require("src/devtools/ReactotronConfig.ts");\n}\n\nexport { ErrorBoundary } from "src/components/ErrorBoundary/ErrorBoundary";\n\nexport default function Root() {\n // Wait for stores to load and render our layout inside of it so we have access\n // to auth info etc\n const { rehydrated } = useInitialRootStore();\n if (!rehydrated) {\n return null;\n }\n\n return
;\n}\n'})}),"\n",(0,o.jsxs)(n.p,{children:["Move ",(0,o.jsx)(n.code,{children:"ErrorBoundary"})," out of ",(0,o.jsx)(n.code,{children:"screens/ErrorScreen"})," and into ",(0,o.jsx)(n.code,{children:"src/components/ErrorBoundary"}),":"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-bash",children:"mkdir src/components/ErrorBoundary\nmv src/screens/ErrorScreen/* src/components/ErrorBoundary\n"})}),"\n",(0,o.jsxs)(n.p,{children:["For starters, this sets up our error boundary for the app and handles waiting on our stores to rehydrate. ",(0,o.jsx)(n.code,{children:"
"})," comes from ",(0,o.jsx)(n.code,{children:"expo-router"}),", you can think of it like the ",(0,o.jsx)(n.code,{children:"children"})," prop in ",(0,o.jsx)(n.code,{children:"React"}),". This component can be wrapped with others to help create a layout."]}),"\n",(0,o.jsxs)(n.p,{children:["Next, we'll convert the conditional part of authentication from ",(0,o.jsx)(n.code,{children:"react-navigation"})," to ",(0,o.jsx)(n.code,{children:"expo-router"}),", deciding on whether or not to display the login form or get to the welcome screen experience."]}),"\n",(0,o.jsx)(n.h3,{id:"srcappapp_layouttsx",children:"src/app/(app)/_layout.tsx"}),"\n",(0,o.jsxs)(n.p,{children:["Create another ",(0,o.jsx)(n.code,{children:"_layout.tsx"})," but this time inside of a new directory, ",(0,o.jsx)(n.code,{children:"src/app/(app)"}),". This route wrapped in parentheses is called a ",(0,o.jsx)(n.a,{href:"https://docs.expo.dev/routing/layouts/#groups",children:"Group"}),". Groups can be used to add layouts and/or help organize sections of the app without adding additional segments to the URL. Remember, each directory is a route in this new mental model of file-based routing - but sometimes we don't want that, that's when you'll call upon groups."]}),"\n",(0,o.jsx)(n.p,{children:"In this layout is where we'll determine if the user is authenticated by checking our MST store. We'll also wait here while assets are loaded and then hide the splash screen when finished."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'import React from "react";\nimport { Redirect, SplashScreen, Stack } from "expo-router";\nimport { observer } from "mobx-react-lite";\nimport { useStores } from "src/models";\nimport { useFonts } from "expo-font";\nimport { customFontsToLoad } from "src/theme";\n\nexport default observer(function Layout() {\n const {\n authenticationStore: { isAuthenticated },\n } = useStores();\n\n const [fontsLoaded, fontError] = useFonts(customFontsToLoad);\n\n React.useEffect(() => {\n if (fontsLoaded || fontError) {\n // Hide the splash screen after the fonts have loaded and the UI is ready.\n SplashScreen.hideAsync();\n }\n }, [fontsLoaded, fontError]);\n\n if (!fontsLoaded && !fontError) {\n return null;\n }\n\n if (!isAuthenticated) {\n return
;\n }\n\n return
;\n});\n'})}),"\n",(0,o.jsxs)(n.p,{children:["As you can see, if the user is not authenticated we redirect them to the ",(0,o.jsx)(n.code,{children:"/log-in"})," route, otherwise we'll render a stack navigator. TypeScript is probably telling us that route doesn't exist yet, so let's fix that."]}),"\n",(0,o.jsx)(n.h3,{id:"srcapplog-intsx",children:"src/app/log-in.tsx"}),"\n",(0,o.jsxs)(n.p,{children:["To redirect the user to the login form, create ",(0,o.jsx)(n.code,{children:"src/app/log-in.tsx"}),". We'll copy over the contents from the original boilerplate ",(0,o.jsx)(n.code,{children:"src/screens/LoginScreen.tsx"})," to help the UI layout of this page."]}),"\n",(0,o.jsxs)(t,{children:[(0,o.jsx)("summary",{children:"src/app/log-in.tsx"}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'import { router } from "expo-router";\nimport { observer } from "mobx-react-lite";\nimport React, { ComponentType, useEffect, useMemo, useRef, useState } from "react";\nimport { TextInput, TextStyle, ViewStyle } from "react-native";\nimport { Button, Icon, Screen, Text, TextField, TextFieldAccessoryProps } from "src/components";\nimport { useStores } from "src/models";\nimport { colors, spacing } from "src/theme";\n\nexport default observer(function Login(_props) {\n const authPasswordInput = useRef
(null);\n\n const [authPassword, setAuthPassword] = useState("");\n const [isAuthPasswordHidden, setIsAuthPasswordHidden] = useState(true);\n const [isSubmitted, setIsSubmitted] = useState(false);\n const [attemptsCount, setAttemptsCount] = useState(0);\n const {\n authenticationStore: { authEmail, setAuthEmail, setAuthToken, validationError },\n } = useStores();\n\n useEffect(() => {\n // Here is where you could fetch credentials from keychain or storage\n // and pre-fill the form fields.\n setAuthEmail("ignite@infinite.red");\n setAuthPassword("ign1teIsAwes0m3");\n\n // Return a "cleanup" function that React will run when the component unmounts\n return () => {\n setAuthPassword("");\n setAuthEmail("");\n };\n }, []);\n\n const error = isSubmitted ? validationError : "";\n\n function login() {\n setIsSubmitted(true);\n setAttemptsCount(attemptsCount + 1);\n\n if (validationError) return;\n\n // Make a request to your server to get an authentication token.\n // If successful, reset the fields and set the token.\n setIsSubmitted(false);\n setAuthPassword("");\n setAuthEmail("");\n\n // We\'ll mock this with a fake token.\n setAuthToken(String(Date.now()));\n\n // navigate to the main screen\n router.replace("/");\n }\n\n const PasswordRightAccessory: ComponentType = useMemo(\n () =>\n function PasswordRightAccessory(props: TextFieldAccessoryProps) {\n return (\n setIsAuthPasswordHidden(!isAuthPasswordHidden)}\n />\n );\n },\n [isAuthPasswordHidden]\n );\n\n return (\n \n \n \n {attemptsCount > 2 && }\n\n authPasswordInput.current?.focus()}\n />\n\n \n\n \n \n );\n});\n\nconst $screenContentContainer: ViewStyle = {\n paddingVertical: spacing.xxl,\n paddingHorizontal: spacing.lg,\n};\n\nconst $signIn: TextStyle = {\n marginBottom: spacing.sm,\n};\n\nconst $enterDetails: TextStyle = {\n marginBottom: spacing.lg,\n};\n\nconst $hint: TextStyle = {\n color: colors.tint,\n marginBottom: spacing.md,\n};\n\nconst $textField: ViewStyle = {\n marginBottom: spacing.lg,\n};\n\nconst $tapButton: ViewStyle = {\n marginTop: spacing.xs,\n};\n'})})]}),"\n",(0,o.jsxs)(n.p,{children:["If you're familiar with the Ignite boilerplate, this is the same authentication screen you are used to - the only difference here is some of the imports now from from ",(0,o.jsx)(n.code,{children:"src/*"})," rather than the relative paths. So keep that in mind if you're upgrading an existing application."]}),"\n",(0,o.jsx)(n.h3,{id:"srcappappindextsx",children:"src/app/(app)/index.tsx"}),"\n",(0,o.jsx)(n.p,{children:"If the user is successfully authenticated, we'll show them the welcome screen. Can you guess what the route will be by looking at the directory structure?"}),"\n",(0,o.jsxs)(n.p,{children:["Just the root route! Think about it in terms of web URLs, if arriving at ",(0,o.jsx)(n.code,{children:"http://localhost:8081/"})," (in this case of local development), we'd expect to see the welcome screen. However, if we're not authenticated, we'll be redirected to ",(0,o.jsx)(n.code,{children:"/log-in"})," to ask the user to log in."]}),"\n",(0,o.jsxs)(n.p,{children:["This JSX will be the same exact contents from ",(0,o.jsx)(n.code,{children:"WelcomeScreen.tsx"})," in the original Ignite boilerplate with the exception of some import paths (using the TS aliases) and a simple update to ",(0,o.jsx)(n.code,{children:"goNext"}),"."]}),"\n",(0,o.jsxs)(n.p,{children:["Since we'll no longer use the ",(0,o.jsx)(n.code,{children:"navigation"})," prop, we utilize ",(0,o.jsx)(n.code,{children:"expo-router"}),"'s ",(0,o.jsx)(n.a,{href:"https://docs.expo.dev/routing/navigating-pages/#imperative-navigation",children:"Imperative navigation"})," to navigate to the component demo Showroom next. We're using ",(0,o.jsx)(n.code,{children:".replace"})," since we don't need to get back to this route. You can read more about ",(0,o.jsx)(n.a,{href:"https://docs.expo.dev/routing/navigating-pages/",children:"Navigating between pages"})," at Expo's documentation."]}),"\n",(0,o.jsxs)(t,{children:[(0,o.jsx)("summary",{children:"src/app/(app)/index.tsx"}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'import { router } from "expo-router";\nimport { observer } from "mobx-react-lite";\nimport React from "react";\nimport { Image, ImageStyle, TextStyle, View, ViewStyle } from "react-native";\nimport { Button, Text } from "src/components";\nimport { isRTL } from "src/i18n";\nimport { useStores } from "src/models";\nimport { colors, spacing } from "src/theme";\nimport { useHeader } from "src/utils/useHeader";\nimport { useSafeAreaInsetsStyle } from "src/utils/useSafeAreaInsetsStyle";\n\nconst welcomeLogo = require("assets/images/logo.png");\nconst welcomeFace = require("assets/images/welcome-face.png");\n\nexport default observer(function WelcomeScreen() {\n const {\n authenticationStore: { logout },\n } = useStores();\n\n function goNext() {\n router.replace("/showroom");\n }\n\n useHeader(\n {\n rightTx: "common.logOut",\n onRightPress: logout,\n },\n [logout]\n );\n\n const $bottomContainerInsets = useSafeAreaInsetsStyle(["bottom"]);\n\n return (\n \n \n \n \n \n \n \n\n \n \n \n \n \n );\n});\n\nconst $container: ViewStyle = {\n flex: 1,\n backgroundColor: colors.background,\n};\n\nconst $topContainer: ViewStyle = {\n flexShrink: 1,\n flexGrow: 1,\n flexBasis: "57%",\n justifyContent: "center",\n paddingHorizontal: spacing.lg,\n};\n\nconst $bottomContainer: ViewStyle = {\n flexShrink: 1,\n flexGrow: 0,\n flexBasis: "43%",\n backgroundColor: colors.palette.neutral100,\n borderTopLeftRadius: 16,\n borderTopRightRadius: 16,\n paddingHorizontal: spacing.lg,\n justifyContent: "space-around",\n};\nconst $welcomeLogo: ImageStyle = {\n height: 88,\n width: "100%",\n marginBottom: spacing.xxl,\n};\n\nconst $welcomeFace: ImageStyle = {\n height: 169,\n width: 269,\n position: "absolute",\n bottom: -47,\n right: -80,\n transform: [{ scaleX: isRTL ? -1 : 1 }],\n};\n\nconst $welcomeHeading: TextStyle = {\n marginBottom: spacing.md,\n};\n'})})]}),"\n",(0,o.jsx)(n.h3,{id:"checkpoint",children:"Checkpoint"}),"\n",(0,o.jsxs)(n.p,{children:["Build and run your app using ",(0,o.jsx)(n.code,{children:"yarn run ios"}),'. You should see the log-in route, be able to authenticate, and navigate to the main "welcome" screen. But we aren\'t done yet - we still need to add the remaining screens in a Tab Navigator.']}),"\n",(0,o.jsx)(n.h2,{id:"adding-tab-navigation",children:"Adding Tab Navigation"}),"\n",(0,o.jsx)(n.p,{children:"First, we'll create another route group to help contain where these routes live and set the layout for the tabs."}),"\n",(0,o.jsxs)(n.p,{children:["Create ",(0,o.jsx)(n.code,{children:"src/app/(app)/(tabs)/_layout.tsx"})," and we'll convert Ignite's previous ",(0,o.jsx)(n.code,{children:"app/navigators/DemoNavigator.tsx"})," to live here."]}),"\n",(0,o.jsxs)(t,{children:[(0,o.jsx)("summary",{children:"src/app/(app)/(tabs)/_layout.tsx"}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'import React from "react";\nimport { Tabs } from "expo-router/tabs";\nimport { observer } from "mobx-react-lite";\nimport { Icon } from "src/components";\nimport { translate } from "src/i18n";\nimport { colors, spacing, typography } from "src/theme";\nimport { TextStyle, ViewStyle } from "react-native";\nimport { useSafeAreaInsets } from "react-native-safe-area-context";\n\nexport default observer(function Layout() {\n const { bottom } = useSafeAreaInsets();\n\n return (\n \n ,\n }}\n />\n ,\n }}\n />\n ,\n }}\n />\n ,\n }}\n />\n \n );\n});\n\nconst $tabBar: ViewStyle = {\n backgroundColor: colors.background,\n borderTopColor: colors.transparent,\n};\n\nconst $tabBarItem: ViewStyle = {\n paddingTop: spacing.md,\n};\n\nconst $tabBarLabel: TextStyle = {\n fontSize: 12,\n fontFamily: typography.primary.medium,\n lineHeight: 16,\n flex: 1,\n};\n'})})]}),"\n",(0,o.jsx)(n.h3,{id:"creating-tab-screens",children:"Creating Tab Screens"}),"\n",(0,o.jsxs)(n.p,{children:["Now to create screens for each tabs, you simply just add ",(0,o.jsx)(n.code,{children:"[screen].tsx"})," under the ",(0,o.jsx)(n.code,{children:"(tabs)"})," group. Let's bring over the 3 simpler screens first - Community, Podcasts and Debug. Those will mostly be copy \ud83c\udf5d aside from changing the exports to default and import from our TS paths."]}),"\n",(0,o.jsxs)(t,{children:[(0,o.jsx)("summary",{children:"src/app/(app)/(tabs)/community.tsx"}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'import React from "react";\nimport { Image, ImageStyle, TextStyle, View, ViewStyle } from "react-native";\nimport { ListItem, Screen, Text } from "src/components";\nimport { spacing } from "src/theme";\nimport { openLinkInBrowser } from "src/utils/openLinkInBrowser";\nimport { isRTL } from "src/i18n";\n\nconst chainReactLogo = require("assets/images/demo/cr-logo.png");\nconst reactNativeLiveLogo = require("assets/images/demo/rnl-logo.png");\nconst reactNativeRadioLogo = require("assets/images/demo/rnr-logo.png");\nconst reactNativeNewsletterLogo = require("assets/images/demo/rnn-logo.png");\n\nexport default function DemoCommunityScreen() {\n return (\n \n \n \n\n \n \n openLinkInBrowser("https://community.infinite.red/")}\n />\n \n \n openLinkInBrowser("https://github.com/infinitered/ignite")}\n />\n\n \n \n \n \n \n }\n onPress={() => openLinkInBrowser("https://reactnativeradio.com/")}\n />\n \n \n \n }\n onPress={() => openLinkInBrowser("https://reactnativenewsletter.com/")}\n />\n \n \n \n }\n onPress={() => openLinkInBrowser("https://rn.live/")}\n />\n \n \n \n }\n onPress={() => openLinkInBrowser("https://cr.infinite.red/")}\n />\n \n \n openLinkInBrowser("https://infinite.red/contact")}\n />\n \n );\n}\n\nconst $container: ViewStyle = {\n paddingTop: spacing.lg + spacing.xl,\n paddingHorizontal: spacing.lg,\n};\n\nconst $title: TextStyle = {\n marginBottom: spacing.sm,\n};\n\nconst $tagline: TextStyle = {\n marginBottom: spacing.xxl,\n};\n\nconst $description: TextStyle = {\n marginBottom: spacing.lg,\n};\n\nconst $sectionTitle: TextStyle = {\n marginTop: spacing.xxl,\n};\n\nconst $logoContainer: ViewStyle = {\n marginEnd: spacing.md,\n flexDirection: "row",\n flexWrap: "wrap",\n alignContent: "center",\n};\n\nconst $logo: ImageStyle = {\n height: 38,\n width: 38,\n};\n'})})]}),"\n",(0,o.jsxs)(t,{children:[(0,o.jsx)("summary",{children:"src/app/(app)/(tabs)/podcasts.tsx"}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'import { observer } from "mobx-react-lite";\nimport React, { ComponentType, useEffect, useMemo } from "react";\nimport {\n AccessibilityProps,\n ActivityIndicator,\n Image,\n ImageSourcePropType,\n ImageStyle,\n Platform,\n StyleSheet,\n TextStyle,\n View,\n ViewStyle,\n} from "react-native";\nimport { type ContentStyle } from "@shopify/flash-list";\nimport Animated, {\n Extrapolate,\n interpolate,\n useAnimatedStyle,\n useSharedValue,\n withSpring,\n} from "react-native-reanimated";\nimport { Button, ButtonAccessoryProps, Card, EmptyState, Icon, ListView, Screen, Text, Toggle } from "src/components";\nimport { isRTL, translate } from "src/i18n";\nimport { useStores } from "src/models";\nimport { Episode } from "src/models/Episode";\nimport { colors, spacing } from "src/theme";\nimport { delay } from "src/utils/delay";\nimport { openLinkInBrowser } from "src/utils/openLinkInBrowser";\n\nconst ICON_SIZE = 14;\n\nconst rnrImage1 = require("assets/images/demo/rnr-image-1.png");\nconst rnrImage2 = require("assets/images/demo/rnr-image-2.png");\nconst rnrImage3 = require("assets/images/demo/rnr-image-3.png");\nconst rnrImages = [rnrImage1, rnrImage2, rnrImage3];\n\nexport default observer(function DemoPodcastListScreen(_props) {\n const { episodeStore } = useStores();\n\n const [refreshing, setRefreshing] = React.useState(false);\n const [isLoading, setIsLoading] = React.useState(false);\n\n // initially, kick off a background refresh without the refreshing UI\n useEffect(() => {\n (async function load() {\n setIsLoading(true);\n await episodeStore.fetchEpisodes();\n setIsLoading(false);\n })();\n }, [episodeStore]);\n\n // simulate a longer refresh, if the refresh is too fast for UX\n async function manualRefresh() {\n setRefreshing(true);\n await Promise.all([episodeStore.fetchEpisodes(), delay(750)]);\n setRefreshing(false);\n }\n\n return (\n \n \n contentContainerStyle={$listContentContainer}\n data={episodeStore.episodesForList.slice()}\n extraData={episodeStore.favorites.length + episodeStore.episodes.length}\n refreshing={refreshing}\n estimatedItemSize={177}\n onRefresh={manualRefresh}\n ListEmptyComponent={\n isLoading ? (\n \n ) : (\n \n )\n }\n ListHeaderComponent={\n \n \n {(episodeStore.favoritesOnly || episodeStore.episodesForList.length > 0) && (\n \n episodeStore.setProp("favoritesOnly", !episodeStore.favoritesOnly)}\n variant="switch"\n labelTx="demoPodcastListScreen.onlyFavorites"\n labelPosition="left"\n labelStyle={$labelStyle}\n accessibilityLabel={translate("demoPodcastListScreen.accessibility.switch")}\n />\n \n )}\n \n }\n renderItem={({ item }) => (\n episodeStore.toggleFavorite(item)}\n />\n )}\n />\n \n );\n});\n\nconst EpisodeCard = observer(function EpisodeCard({\n episode,\n isFavorite,\n onPressFavorite,\n}: {\n episode: Episode;\n onPressFavorite: () => void;\n isFavorite: boolean;\n}) {\n const liked = useSharedValue(isFavorite ? 1 : 0);\n\n const imageUri = useMemo(() => {\n return rnrImages[Math.floor(Math.random() * rnrImages.length)];\n }, []);\n\n // Grey heart\n const animatedLikeButtonStyles = useAnimatedStyle(() => {\n return {\n transform: [\n {\n scale: interpolate(liked.value, [0, 1], [1, 0], Extrapolate.EXTEND),\n },\n ],\n opacity: interpolate(liked.value, [0, 1], [1, 0], Extrapolate.CLAMP),\n };\n });\n\n // Pink heart\n const animatedUnlikeButtonStyles = useAnimatedStyle(() => {\n return {\n transform: [\n {\n scale: liked.value,\n },\n ],\n opacity: liked.value,\n };\n });\n\n /**\n * Android has a "longpress" accessibility action. iOS does not, so we just have to use a hint.\n * @see https://reactnative.dev/docs/accessibility#accessibilityactions\n */\n const accessibilityHintProps = useMemo(\n () =>\n Platform.select({\n ios: {\n accessibilityLabel: episode.title,\n accessibilityHint: translate("demoPodcastListScreen.accessibility.cardHint", {\n action: isFavorite ? "unfavorite" : "favorite",\n }),\n },\n android: {\n accessibilityLabel: episode.title,\n accessibilityActions: [\n {\n name: "longpress",\n label: translate("demoPodcastListScreen.accessibility.favoriteAction"),\n },\n ],\n onAccessibilityAction: ({ nativeEvent }) => {\n if (nativeEvent.actionName === "longpress") {\n handlePressFavorite();\n }\n },\n },\n }),\n [episode, isFavorite]\n );\n\n const handlePressFavorite = () => {\n onPressFavorite();\n liked.value = withSpring(liked.value ? 0 : 1);\n };\n\n const handlePressCard = () => {\n openLinkInBrowser(episode.enclosure.link);\n };\n\n const ButtonLeftAccessory: ComponentType = useMemo(\n () =>\n function ButtonLeftAccessory() {\n return (\n \n \n \n \n \n \n \n \n );\n },\n []\n );\n\n return (\n \n \n {episode.datePublished.textLabel}\n \n \n {episode.duration.textLabel}\n \n \n }\n content={`${episode.parsedTitleAndSubtitle.title} - ${episode.parsedTitleAndSubtitle.subtitle}`}\n {...accessibilityHintProps}\n RightComponent={}\n FooterComponent={\n \n \n \n }\n />\n );\n});\n\nconst $screenContentContainer: ViewStyle = {\n flex: 1,\n};\n\nconst $listContentContainer: ContentStyle = {\n paddingHorizontal: spacing.lg,\n paddingTop: spacing.lg + spacing.xl,\n paddingBottom: spacing.lg,\n};\n\nconst $heading: ViewStyle = {\n marginBottom: spacing.md,\n};\n\nconst $item: ViewStyle = {\n padding: spacing.md,\n marginTop: spacing.md,\n minHeight: 120,\n};\n\nconst $itemThumbnail: ImageStyle = {\n marginTop: spacing.sm,\n borderRadius: 50,\n alignSelf: "flex-start",\n};\n\nconst $toggle: ViewStyle = {\n marginTop: spacing.md,\n};\n\nconst $labelStyle: TextStyle = {\n textAlign: "left",\n};\n\nconst $iconContainer: ViewStyle = {\n height: ICON_SIZE,\n width: ICON_SIZE,\n flexDirection: "row",\n marginEnd: spacing.sm,\n};\n\nconst $metadata: TextStyle = {\n color: colors.textDim,\n marginTop: spacing.xs,\n flexDirection: "row",\n};\n\nconst $metadataText: TextStyle = {\n color: colors.textDim,\n marginEnd: spacing.md,\n marginBottom: spacing.xs,\n};\n\nconst $favoriteButton: ViewStyle = {\n borderRadius: 17,\n marginTop: spacing.md,\n justifyContent: "flex-start",\n backgroundColor: colors.palette.neutral300,\n borderColor: colors.palette.neutral300,\n paddingHorizontal: spacing.md,\n paddingTop: spacing.xxxs,\n paddingBottom: 0,\n minHeight: 32,\n alignSelf: "flex-start",\n};\n\nconst $unFavoriteButton: ViewStyle = {\n borderColor: colors.palette.primary100,\n backgroundColor: colors.palette.primary100,\n};\n\nconst $emptyState: ViewStyle = {\n marginTop: spacing.xxl,\n};\n\nconst $emptyStateImage: ImageStyle = {\n transform: [{ scaleX: isRTL ? -1 : 1 }],\n};\n'})})]}),"\n",(0,o.jsxs)(t,{children:[(0,o.jsx)("summary",{children:"src/app/(app)/(tabs)/debug.tsx"}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'import React from "react";\nimport * as Application from "expo-application";\nimport { Linking, Platform, TextStyle, View, ViewStyle } from "react-native";\nimport { Button, ListItem, Screen, Text } from "src/components";\nimport { colors, spacing } from "src/theme";\nimport { isRTL } from "src/i18n";\nimport { useStores } from "src/models";\n\nfunction openLinkInBrowser(url: string) {\n Linking.canOpenURL(url).then((canOpen) => canOpen && Linking.openURL(url));\n}\n\nexport default function DemoDebugScreen() {\n const {\n authenticationStore: { logout },\n } = useStores();\n\n const usingHermes = typeof HermesInternal === "object" && HermesInternal !== null;\n // @ts-expect-error\n const usingFabric = global.nativeFabricUIManager != null;\n\n const demoReactotron = React.useMemo(\n () => async () => {\n if (__DEV__) {\n console.tron.display({\n name: "DISPLAY",\n value: {\n appId: Application.applicationId,\n appName: Application.applicationName,\n appVersion: Application.nativeApplicationVersion,\n appBuildVersion: Application.nativeBuildVersion,\n hermesEnabled: usingHermes,\n },\n important: true,\n });\n }\n },\n []\n );\n\n return (\n \n openLinkInBrowser("https://github.com/infinitered/ignite/issues")}\n />\n \n \n \n App Id\n {Application.applicationId}\n \n }\n />\n \n App Name\n {Application.applicationName}\n \n }\n />\n \n App Version\n {Application.nativeApplicationVersion}\n \n }\n />\n \n App Build Version\n {Application.nativeBuildVersion}\n \n }\n />\n \n Hermes Enabled\n {String(usingHermes)}\n \n }\n />\n \n Fabric Enabled\n {String(usingFabric)}\n \n }\n />\n \n \n \n \n \n \n \n \n \n );\n}\n\nconst $container: ViewStyle = {\n paddingTop: spacing.lg + spacing.xl,\n paddingBottom: spacing.xxl,\n paddingHorizontal: spacing.lg,\n};\n\nconst $title: TextStyle = {\n marginBottom: spacing.xxl,\n};\n\nconst $reportBugsLink: TextStyle = {\n color: colors.tint,\n marginBottom: spacing.lg,\n alignSelf: isRTL ? "flex-start" : "flex-end",\n};\n\nconst $item: ViewStyle = {\n marginBottom: spacing.md,\n};\n\nconst $itemsContainer: ViewStyle = {\n marginBottom: spacing.xl,\n};\n\nconst $button: ViewStyle = {\n marginBottom: spacing.xs,\n};\n\nconst $buttonContainer: ViewStyle = {\n marginBottom: spacing.md,\n};\n\nconst $hint: TextStyle = {\n color: colors.palette.neutral600,\n fontSize: 12,\n lineHeight: 15,\n paddingBottom: spacing.lg,\n};\n'})})]}),"\n",(0,o.jsxs)(n.p,{children:["These will all be navigable by routing to ",(0,o.jsx)(n.code,{children:"/community"}),", ",(0,o.jsx)(n.code,{children:"/podcasts"})," or ",(0,o.jsx)(n.code,{children:"/debug"}),". Next we'll cover the Showroom which is a bit more involved, since we have to add some supporting components that only apply to that route."]}),"\n",(0,o.jsx)(n.h3,{id:"showroom-screen",children:"Showroom Screen"}),"\n",(0,o.jsxs)(n.p,{children:["The Showroom screen has some supporting components it needs that only applies to that route. Ignite used to colocate these next to the screen file itself, in the ",(0,o.jsx)(n.code,{children:"src/app/screens/DemoShowroomScreen"})," directory. However, ",(0,o.jsx)(n.code,{children:"expo-router"})," wants to keep the ",(0,o.jsx)(n.code,{children:"app"})," directory strictly for app routes."]}),"\n",(0,o.jsxs)(n.p,{children:["To adhere to this, we'll move the supporting components to ",(0,o.jsx)(n.code,{children:"src/components/Showroom"})," and import them from their in our ",(0,o.jsx)(n.code,{children:"src/app/(app)/(tabs)/showroom.tsx"}),"."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-bash",children:"mv src/screens/DemoShowroomScreen src/components/Showroom\nrm src/components/Showroom/DemoShowroomScreen.tsx\n"})}),"\n",(0,o.jsxs)(n.blockquote,{children:["\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.strong,{children:"Note"}),": There is a type that gets removed by the above command. Add the following to the top of ",(0,o.jsx)(n.code,{children:"src/components/Showroom/demos/index.ts"})]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'import { ReactElement } from "react";\n\nexport interface Demo {\n name: string;\n description: string;\n data: ReactElement[];\n}\n'})}),"\n",(0,o.jsxs)(n.p,{children:["You'll need to update the imports in the ",(0,o.jsx)(n.code,{children:"src/components/Showroom/demos/Demo*.ts"})," files.\nA project-wide search and replace should do the trick:"]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["Project-wide search for ",(0,o.jsx)(n.code,{children:'from "../DemoShowroomScreen"'})]}),"\n",(0,o.jsxs)(n.li,{children:["Replace with ",(0,o.jsx)(n.code,{children:'from "."'})]}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:["We've deleted the screen file because we'll make a few ",(0,o.jsx)(n.code,{children:"expo-router"})," specific changes to it over in the ",(0,o.jsx)(n.code,{children:"app"})," directory. One improvement we can make to the Showroom screen is that we can reduce the platform specific code with regards to the ",(0,o.jsx)(n.code,{children:"renderItem"})," of ",(0,o.jsx)(n.code,{children:"SectionList"}),"."]}),"\n",(0,o.jsx)(n.p,{children:"Before, we had an implementation for both web and mobile to help with some specific web routing for deep links:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'const WebListItem: FC = ({ item, sectionIndex }) => {\n const sectionSlug = item.name.toLowerCase();\n\n return (\n \n \n {item.name}\n \n {item.useCases.map((u) => {\n const itemSlug = slugify(u);\n\n return (\n \n {u}\n \n );\n })}\n \n );\n};\n\nconst NativeListItem: FC = ({ item, sectionIndex, handleScroll }) => (\n \n handleScroll?.(sectionIndex)} preset="bold" style={$menuContainer}>\n {item.name}\n \n {item.useCases.map((u, index) => (\n handleScroll?.(sectionIndex, index + 1)}\n text={u}\n rightIcon={isRTL ? "caretLeft" : "caretRight"}\n />\n ))}\n \n);\n\nconst ShowroomListItem = Platform.select({\n web: WebListItem,\n default: NativeListItem,\n});\n'})}),"\n",(0,o.jsx)(n.p,{children:"However, we don't have to worry about this anymore. We can implement this as follows:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'const ShowroomListItem: FC = ({ item, sectionIndex }) => {\n const sectionSlug = item.name.toLowerCase();\n\n return (\n \n \n {item.name}\n \n {item.useCases.map((u) => {\n const itemSlug = slugify(u);\n return (\n \n \n \n );\n })}\n \n );\n};\n'})}),"\n",(0,o.jsxs)(n.p,{children:["Note the ",(0,o.jsx)(n.code,{children:"Link"})," wrapper provided by ",(0,o.jsx)(n.code,{children:"expo-router"}),". We link to the ",(0,o.jsx)(n.code,{children:"/showroom"})," route and provide the extra search params for a section or specific component we want to navigate to. We can then extract (and type) these params using ",(0,o.jsx)(n.code,{children:"useLocalSearchParams"})]}),"\n",(0,o.jsx)(n.p,{children:"The snippet below contains the entire file for reference:"}),"\n",(0,o.jsxs)(t,{children:[(0,o.jsx)("summary",{children:"src/app/(app)/(tabs)/showroom.tsx"}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'import React, { FC, useEffect, useRef, useState } from "react";\nimport { Image, ImageStyle, SectionList, TextStyle, View, ViewStyle } from "react-native";\nimport { Drawer } from "react-native-drawer-layout";\nimport { type ContentStyle } from "@shopify/flash-list";\nimport { ListItem, ListView, ListViewRef, Screen, Text } from "src/components";\nimport { isRTL } from "src/i18n";\nimport { colors, spacing } from "src/theme";\nimport { useSafeAreaInsetsStyle } from "src/utils/useSafeAreaInsetsStyle";\nimport * as Demos from "src/components/Showroom/demos";\nimport { DrawerIconButton } from "src/components/Showroom/DrawerIconButton";\nimport { Link, useLocalSearchParams } from "expo-router";\n\nconst logo = require("assets/images/logo.png");\n\ninterface DemoListItem {\n item: { name: string; useCases: string[] };\n sectionIndex: number;\n handleScroll?: (sectionIndex: number, itemIndex?: number) => void;\n}\n\nconst slugify = (str: string) =>\n str\n .toLowerCase()\n .trim()\n .replace(/[^\\w\\s-]/g, "")\n .replace(/[\\s_-]+/g, "-")\n .replace(/^-+|-+$/g, "");\n\nconst ShowroomListItem: FC = ({ item, sectionIndex }) => {\n const sectionSlug = item.name.toLowerCase();\n\n return (\n \n \n {item.name}\n \n {item.useCases.map((u) => {\n const itemSlug = slugify(u);\n return (\n \n \n \n );\n })}\n \n );\n};\n\nexport default function DemoShowroomScreen() {\n const [open, setOpen] = useState(false);\n const timeout = useRef>();\n const listRef = useRef(null);\n const menuRef = useRef>(null);\n\n const params = useLocalSearchParams<{\n sectionSlug?: string;\n itemSlug?: string;\n }>();\n\n // handle scroll when section/item params change\n React.useEffect(() => {\n if (Object.keys(params).length > 0) {\n const demoValues = Object.values(Demos);\n const findSectionIndex = demoValues.findIndex((x) => x.name.toLowerCase() === params.sectionSlug);\n let findItemIndex = 0;\n if (params.itemSlug) {\n try {\n findItemIndex =\n demoValues[findSectionIndex].data.findIndex((u) => slugify(u.props.name) === params.itemSlug) + 1;\n } catch (err) {\n console.error(err);\n }\n }\n handleScroll(findSectionIndex, findItemIndex);\n }\n }, [params]);\n\n const toggleDrawer = () => {\n if (!open) {\n setOpen(true);\n } else {\n setOpen(false);\n }\n };\n\n const handleScroll = (sectionIndex: number, itemIndex = 0) => {\n listRef.current?.scrollToLocation({\n animated: true,\n itemIndex,\n sectionIndex,\n });\n toggleDrawer();\n };\n\n const scrollToIndexFailed = (info: {\n index: number;\n highestMeasuredFrameIndex: number;\n averageItemLength: number;\n }) => {\n listRef.current?.getScrollResponder()?.scrollToEnd();\n timeout.current = setTimeout(\n () =>\n listRef.current?.scrollToLocation({\n animated: true,\n itemIndex: info.index,\n sectionIndex: 0,\n }),\n 50\n );\n };\n\n useEffect(() => {\n return () => timeout.current && clearTimeout(timeout.current);\n }, []);\n\n const $drawerInsets = useSafeAreaInsetsStyle(["top"]);\n\n return (\n setOpen(true)}\n onClose={() => setOpen(false)}\n drawerType={"slide"}\n drawerPosition={isRTL ? "right" : "left"}\n renderDrawerContent={() => (\n \n \n \n \n\n \n ref={menuRef}\n contentContainerStyle={$listContentContainer}\n estimatedItemSize={250}\n data={Object.values(Demos).map((d) => ({\n name: d.name,\n useCases: d.data.map((u) => u.props.name as string),\n }))}\n keyExtractor={(item) => item.name}\n renderItem={({ item, index: sectionIndex }) => (\n \n )}\n />\n \n )}\n >\n \n \n\n item}\n renderSectionFooter={() => }\n ListHeaderComponent={\n \n \n \n }\n onScrollToIndexFailed={scrollToIndexFailed}\n renderSectionHeader={({ section }) => {\n return (\n \n \n {section.name}\n \n {section.description}\n \n );\n }}\n />\n \n \n );\n}\n\nconst $screenContainer: ViewStyle = {\n flex: 1,\n};\n\nconst $drawer: ViewStyle = {\n backgroundColor: colors.background,\n flex: 1,\n};\n\nconst $listContentContainer: ContentStyle = {\n paddingHorizontal: spacing.lg,\n};\n\nconst $sectionListContentContainer: ViewStyle = {\n paddingHorizontal: spacing.lg,\n};\n\nconst $heading: ViewStyle = {\n marginBottom: spacing.xxxl,\n};\n\nconst $logoImage: ImageStyle = {\n height: 42,\n width: 77,\n};\n\nconst $logoContainer: ViewStyle = {\n alignSelf: "flex-start",\n justifyContent: "center",\n height: 56,\n paddingHorizontal: spacing.lg,\n};\n\nconst $demoItemName: TextStyle = {\n fontSize: 24,\n marginBottom: spacing.md,\n};\n\nconst $demoItemDescription: TextStyle = {\n marginBottom: spacing.xxl,\n};\n\nconst $demoUseCasesSpacer: ViewStyle = {\n paddingBottom: spacing.xxl,\n};\n'})})]}),"\n",(0,o.jsxs)(n.p,{children:["If you head on over to the web app at ",(0,o.jsx)(n.code,{children:"http://localhost:8081/showroom?itemSlug=variants§ionSlug=toggle"}),", you'll see the Showroom screen will open and scroll down to the appropriate section."]}),"\n",(0,o.jsxs)(n.p,{children:["We can emulate ",(0,o.jsx)(n.a,{href:"https://docs.expo.dev/guides/linking/#testing-urls",children:"deep links in Expo Go"})," with the command:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-bash",children:"npx uri-scheme open exp://localhost:8081/--/showroom --ios\n"})}),"\n",(0,o.jsx)(n.p,{children:"Observe the simulator opens the mobile app and navigates to the Showroom screen."}),"\n",(0,o.jsxs)(n.p,{children:["We get that universal linking for free with ",(0,o.jsx)(n.code,{children:"expo-router"}),"!"]}),"\n",(0,o.jsx)(n.h2,{id:"code-cleanup",children:"Code Cleanup"}),"\n",(0,o.jsx)(n.p,{children:"Now that we have the boilerplate up and running again, let's clean some of the screen and navigation files that are no longer needed."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-bash",children:"rm src/app.tsx\nrm -rf src/screens\nrm -rf src/navigators\n"})}),"\n",(0,o.jsxs)(n.p,{children:["In doing so, we'll need to fix some ",(0,o.jsx)(n.code,{children:"Reactotron"})," code for custom commands. We'll drop the ",(0,o.jsx)(n.code,{children:"resetNavigation"})," one (logging out is really the same thing) and update the ",(0,o.jsx)(n.code,{children:"navigateTo"})," and ",(0,o.jsx)(n.code,{children:"goBack"}),". Open up ",(0,o.jsx)(n.code,{children:"src/devtools/ReactotronConfig.ts"})," to edit these."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:'// error-line\nimport { goBack, resetRoot, navigate } from "src/navigators/navigationUtilities";\n// success-line\nimport { router } from "expo-router";\n// ...\n// error-line-start\nreactotron.onCustomCommand({\n title: "Reset Navigation State",\n description: "Resets the navigation state",\n command: "resetNavigation",\n handler: () => {\n Reactotron.log("resetting navigation state");\n resetRoot({ index: 0, routes: [] });\n },\n});\n// error-line-end\n\nreactotron.onCustomCommand<[{ name: "route"; type: ArgType.String }]>({\n command: "navigateTo",\n handler: (args) => {\n const { route } = args ?? {};\n if (route) {\n Reactotron.log(`Navigating to: ${route}`);\n // error-line\n navigate(route as any); // this should be tied to the navigator, but since this is for debugging, we can navigate to illegal routes\n // success-line-start\n // @ts-ignore - bypass Expo Router Typed Routes\n router.push(route);\n // success-line-end\n } else {\n Reactotron.log("Could not navigate. No route provided.");\n }\n },\n title: "Navigate To Screen",\n description: "Navigates to a screen by name.",\n args: [{ name: "route", type: ArgType.String }],\n});\n\nreactotron.onCustomCommand({\n title: "Go Back",\n description: "Goes back",\n command: "goBack",\n handler: () => {\n Reactotron.log("Going back");\n // error-line\n goBack();\n // success-line\n router.back();\n },\n});\n'})}),"\n",(0,o.jsx)(n.p,{children:"When navigating to the showroom, you may notice an error in the console:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-terminal",children:"ERROR Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?\n"})}),"\n",(0,o.jsxs)(n.p,{children:["This is because the ",(0,o.jsx)(n.code,{children:"expo-router"}),"'s ",(0,o.jsx)(n.code,{children:""})," component passes a ref to it's children. To address this we can update our ",(0,o.jsx)(n.code,{children:"ListItem.tsx"})," to correctly handle the\nref passed to it."]}),"\n",(0,o.jsxs)(t,{children:[(0,o.jsx)("summary",{children:"src/components/ListItem.tsx"}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'/**\n * A styled row component that can be used in FlatList, SectionList, or by itself.\n * @see [Documentation and Examples]{@link https://docs.infinite.red/ignite-cli/boilerplate/components/ListItem/}\n * @param {ListItemProps} props - The props for the `ListItem` component.\n * @returns {JSX.Element} The rendered `ListItem` component.\n */\n// error-line\n export function ListItem(props: ListItemProps) {\n// success-line-start\n export const ListItem = React.forwardRef(function ListItem(\n props: ListItemProps,\n ref,\n) {\n// success-line-end\n const {\n bottomSeparator,\n children,\n height = 56,\n LeftComponent,\n leftIcon,\n leftIconColor,\n RightComponent,\n rightIcon,\n rightIconColor,\n style,\n text,\n TextProps,\n topSeparator,\n tx,\n txOptions,\n textStyle: $textStyleOverride,\n containerStyle: $containerStyleOverride,\n ...TouchableOpacityProps\n } = props\n\n const $textStyles = [$textStyle, $textStyleOverride, TextProps?.style]\n\n const $containerStyles = [\n topSeparator && $separatorTop,\n bottomSeparator && $separatorBottom,\n $containerStyleOverride,\n ]\n\n const $touchableStyles = [$touchableStyle, { minHeight: height }, style]\n\n return (\n // error-line\n \n // success-line\n \n \n \n\n \n {children}\n \n\n \n \n \n )\n //error-line\n}\n //success-line\n})\n\n'})})]}),"\n",(0,o.jsx)(n.h2,{id:"summary",children:"Summary"}),"\n",(0,o.jsx)(n.p,{children:"There you have it, a culinary masterpiece of Ignite and Expo Router, shipped in one pizza box. What we achieved here:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"Simplified navigation code"}),"\n",(0,o.jsx)(n.li,{children:"Typed routing"}),"\n",(0,o.jsxs)(n.li,{children:["Examples of many aspects of ",(0,o.jsx)(n.code,{children:"expo-router"}),", such as authentication, tab navigation, search params"]}),"\n",(0,o.jsxs)(n.li,{children:["Deep linking that Just Works",(0,o.jsx)("sup",{children:"TM"})," on both web and mobile"]}),"\n",(0,o.jsx)(n.li,{children:"Reduced Platform specific code"}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/Jpoliachik/ignite-expo-router",children:"Full Example Repo"})}),"\n",(0,o.jsx)(n.h2,{id:"additional-resources",children:"Additional Resources"}),"\n",(0,o.jsxs)(n.p,{children:["To go more in-depth on ",(0,o.jsx)(n.code,{children:"expo-router"}),", check out the official documentation at ",(0,o.jsx)(n.a,{href:"https://docs.expo.dev/routing/introduction/",children:"Expo.dev"}),"."]}),"\n",(0,o.jsxs)(n.p,{children:["You can also follow Evan Bacon, the author of Expo Router, on ",(0,o.jsx)(n.a,{href:"https://github.com/EvanBacon/expo-router-twitter/blob/main/app/_layout.tsx",children:"GitHub"})," and check out his applications or demos using the navigation library."]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.a,{href:"https://github.com/EvanBacon/pillar-valley/",children:"Pillar Valley"})," - a game built in Expo using `expo-router``"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.a,{href:"https://github.com/EvanBacon/expo-router-twitter/",children:"Twitter routing demo"})," - a demo of how an ",(0,o.jsx)(n.code,{children:"expo-router"})," application would look if rebuilding Twitter's routes"]}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:["Additionally, here is an Ignite repo with ",(0,o.jsx)(n.code,{children:"expo-router"})," added in for reference on my ",(0,o.jsx)(n.a,{href:"https://github.com/Jpoliachik/ignite-expo-router",children:"GitHub"})]})]})}function p(e={}){const{wrapper:n}={...(0,r.M)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},2172:(e,n,t)=>{t.d(n,{I:()=>a,M:()=>i});var o=t(1504);const r={},s=o.createContext(r);function i(e){const n=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),o.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/c47fa949.cc499952.js b/assets/js/c47fa949.cc499952.js
deleted file mode 100644
index 0aaeba80..00000000
--- a/assets/js/c47fa949.cc499952.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkignite_cookbook=self.webpackChunkignite_cookbook||[]).push([[5032],{8332:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>i,default:()=>p,frontMatter:()=>s,metadata:()=>a,toc:()=>l});var o=t(7624),r=t(2172);const s={title:"Expo Router",description:"How to convert Ignite v9 demo app to utilize `expo-router`",tags:["Expo","expo-router","react-navigation"],last_update:{author:"Frank Calise & Justin Poliachik"},publish_date:new Date("2024-01-25T00:00:00.000Z")},i="Expo Router",a={id:"recipes/ExpoRouter",title:"Expo Router",description:"How to convert Ignite v9 demo app to utilize `expo-router`",source:"@site/docs/recipes/ExpoRouter.md",sourceDirName:"recipes",slug:"/recipes/ExpoRouter",permalink:"/docs/recipes/ExpoRouter",draft:!1,unlisted:!1,tags:[{label:"Expo",permalink:"/docs/tags/expo"},{label:"expo-router",permalink:"/docs/tags/expo-router"},{label:"react-navigation",permalink:"/docs/tags/react-navigation"}],version:"current",lastUpdatedBy:"Frank Calise & Justin Poliachik",lastUpdatedAt:1709148773,formattedLastUpdatedAt:"Feb 28, 2024",frontMatter:{title:"Expo Router",description:"How to convert Ignite v9 demo app to utilize `expo-router`",tags:["Expo","expo-router","react-navigation"],last_update:{author:"Frank Calise & Justin Poliachik"},publish_date:"2024-01-25T00:00:00.000Z"},sidebar:"mainSidebar",previous:{title:"Environment Variables",permalink:"/docs/recipes/EnvironmentVariables"},next:{title:"Generator for Component Tests",permalink:"/docs/recipes/GeneratorComponentTests"}},c={},l=[{value:"Overview",id:"overview",level:2},{value:"Installation and Project Configuration",id:"installation-and-project-configuration",level:2},{value:"Reworking the Directory Structure",id:"reworking-the-directory-structure",level:2},{value:"Fix Imports",id:"fix-imports",level:3},{value:"Creating File-based Routes",id:"creating-file-based-routes",level:2},{value:"src/app/_layout.tsx",id:"srcapp_layouttsx",level:3},{value:"src/app/(app)/_layout.tsx",id:"srcappapp_layouttsx",level:3},{value:"src/app/log-in.tsx",id:"srcapplog-intsx",level:3},{value:"src/app/(app)/index.tsx",id:"srcappappindextsx",level:3},{value:"Checkpoint",id:"checkpoint",level:3},{value:"Adding Tab Navigation",id:"adding-tab-navigation",level:2},{value:"Creating Tab Screens",id:"creating-tab-screens",level:3},{value:"Showroom Screen",id:"showroom-screen",level:3},{value:"Code Cleanup",id:"code-cleanup",level:2},{value:"Summary",id:"summary",level:2},{value:"Additional Resources",id:"additional-resources",level:2}];function d(e){const n={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.M)(),...e.components},{Details:t}=n;return t||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"expo-router",children:"Expo Router"}),"\n",(0,o.jsx)(n.h2,{id:"overview",children:"Overview"}),"\n",(0,o.jsxs)(n.p,{children:["Expo Router brings file-based routing to React Native and web applications allowing you to easily create universal apps. Whenever a file is added to your ",(0,o.jsx)(n.code,{children:"src/app"})," directory, a new path is automatically added to your navigation."]}),"\n",(0,o.jsxs)(n.p,{children:["For the full documentation by ",(0,o.jsx)(n.a,{href:"https://expo.dev",children:"Expo"}),", head on over to the ",(0,o.jsx)(n.a,{href:"https://docs.expo.dev/routing/introduction/",children:"Introduction to Expo Router"}),"."]}),"\n",(0,o.jsxs)(n.p,{children:["Ignite v9 is fully equipped to utilize ",(0,o.jsx)(n.code,{children:"expo-router"})," after dependency installation and some directory structure updates! In this recipe, we'll convert the demo app's auth and tab navigators from ",(0,o.jsx)(n.code,{children:"react-navigation"})," to use ",(0,o.jsx)(n.code,{children:"expo-router"}),"."]}),"\n",(0,o.jsx)(n.admonition,{type:"tip",children:(0,o.jsxs)(n.p,{children:["This recipe is using Expo Router v3, which became available in Expo SDK 50. If you're using an older version of Expo, you can find more information about implementing it in your app in the ",(0,o.jsx)(n.a,{href:"https://docs.expo.dev/router/installation/",children:"Expo Router documentation"}),"."]})}),"\n",(0,o.jsx)(n.h2,{id:"installation-and-project-configuration",children:"Installation and Project Configuration"}),"\n",(0,o.jsx)(n.p,{children:"Bootstrap a new Ignite project:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-bash",children:"npx ignite-cli@next new pizza-router --yes\ncd pizza-router\n"})}),"\n",(0,o.jsxs)(n.p,{children:["Add the missing dependencies ",(0,o.jsx)(n.code,{children:"expo-router"})," needs:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-bash",children:"npx expo install expo-router expo-constants\n"})}),"\n",(0,o.jsxs)(n.p,{children:["Add ",(0,o.jsx)(n.code,{children:"expo-router"})," to ",(0,o.jsx)(n.code,{children:"app.json"})," plugins list if necessary:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-json",children:'"plugins": [\n ...\n "expo-font",\n // success-line\n "expo-router"\n],\n'})}),"\n",(0,o.jsxs)(n.p,{children:["Change the entry point that ",(0,o.jsx)(n.code,{children:"expo-router"})," expects in ",(0,o.jsx)(n.code,{children:"package.json"}),":"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-json",children:'// error-line\n"main": "node_modules/expo/AppEntry.js",\n// success-line\n"main": "expo-router/entry",\n'})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"expo-router"})," has great ",(0,o.jsx)(n.a,{href:"https://docs.expo.dev/router/reference/typed-routes/",children:"TypeScript support"}),", so let's enable that in ",(0,o.jsx)(n.code,{children:"app.json"})," under ",(0,o.jsx)(n.code,{children:"experiments"}),"."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-json",children:'{\n "expo": {\n "experiments": {\n "tsconfigPaths": true,\n // success-line\n "typedRoutes": true\n }\n }\n}\n'})}),"\n",(0,o.jsx)(n.h2,{id:"reworking-the-directory-structure",children:"Reworking the Directory Structure"}),"\n",(0,o.jsxs)(n.p,{children:["Expo Router requires route files to live in either ",(0,o.jsx)(n.code,{children:"app"})," or ",(0,o.jsx)(n.code,{children:"src/app"})," directories. But since our Ignite project is already using ",(0,o.jsx)(n.code,{children:"app"}),", we'll need to rename it to ",(0,o.jsx)(n.code,{children:"src"}),". We'll create ",(0,o.jsx)(n.code,{children:"src/app"})," to contain all the file-base routing files from here on out, and models, components and other shared files will be located in the ",(0,o.jsx)(n.code,{children:"src"})," directory now. We'll also remove ",(0,o.jsx)(n.code,{children:"App.tsx"})," as this is no longer the entry point of the application."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-bash",children:"rm App.tsx\nmv app src\nmkdir src/app\n"})}),"\n",(0,o.jsxs)(n.p,{children:["Let's update the TS alias and include paths over in ",(0,o.jsx)(n.code,{children:"tsconfig.json"})]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-json",children:'{\n "compilerOptions": {\n // ...\n "paths": {\n // error-line\n "app/*": ["./app/*"],\n // success-line\n "src/*": ["./src/*"],\n // ...\n },\n }\n // error-line-start\n "include": [\n "index.js",\n "App.tsx",\n "app",\n "types",\n "plugins",\n "app.config.ts",\n ".expo/types/**/*.ts",\n "expo-env.d.ts"\n ],\n // error-line-end\n // success-line\n "include": ["**/*.ts", "**/*.tsx"],\n // ...\n}\n'})}),"\n",(0,o.jsx)(n.h3,{id:"fix-imports",children:"Fix Imports"}),"\n",(0,o.jsxs)(n.p,{children:["We also need to fix up a few imports to use ",(0,o.jsx)(n.code,{children:"src/"})," instead of ",(0,o.jsx)(n.code,{children:"app/"}),".\nIgnite's Demo App only contains a few files we need to update, but an existing app could contain more."]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.code,{children:"package.json"})})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-json",children:'// error-line-start\n"format": "prettier --write \\"app/**/*.{js,jsx,json,md,ts,tsx}\\"",\n"lint": "eslint App.tsx app test --fix --ext .js,.ts,.tsx && npm run format",\n// error-line-end\n// success-line-start\n"format": "prettier --write \\"src/**/*.{js,jsx,json,md,ts,tsx}\\"",\n"lint": "eslint src test --fix --ext .js,.ts,.tsx && npm run format",\n// success-line-end\n'})}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.code,{children:"src/devtools/ReactotronConfig.ts"})})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:'// error-line-start\nimport { clear } from "app/utils/storage";\nimport { goBack, resetRoot, navigate } from "app/navigators/navigationUtilities";\n// error-line-end\n// success-line-start\nimport { clear } from "src/utils/storage";\nimport { goBack, resetRoot, navigate } from "src/navigators/navigationUtilities";\n// success-line-end\n'})}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.code,{children:"src/components/ListView.ts"})})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:'// error-line\nimport { isRTL } from "app/i18n";\n// success-line\nimport { isRTL } from "src/i18n";\n'})}),"\n",(0,o.jsxs)(t,{children:[(0,o.jsx)("summary",{children:"(optional) Additional files to update"}),(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.code,{children:"test/i18n.test.ts"})})}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:'// error-line\nimport en from "../app/i18n/en";\n// success-line\nimport en from "../src/i18n/en";\nimport { exec } from "child_process";\n'})}),(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.code,{children:"ignite/templates/component/NAME.tsx.ejs"})})}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'---\npatch:\n // error-line\n path: "app/components/index.ts"\n // success-line\n path: "src/components/index.ts"\n append: "export * from \\"./<%= props.subdirectory %><%= props.pascalCaseName %>\\"\\n"\n skip: <%= props.skipIndexFile %>\n---\nimport * as React from "react"\nimport { StyleProp, TextStyle, View, ViewStyle } from "react-native"\nimport { observer } from "mobx-react-lite"\n// error-line-start\nimport { colors, typography } from "app/theme"\nimport { Text } from "app/components/Text"\n// error-line-end\n// success-line-start\nimport { colors, typography } from "src/theme"\nimport { Text } from "src/components/Text"\n// success-line-end\n'})}),(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.code,{children:"ignite/templates/model/NAME.tsx.ejs"})})}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'---\npatches:\n// error-line\n- path: "app/models/RootStore.ts"\n// success-line\n- path: "src/models/RootStore.ts"\n after: "from \\"mobx-state-tree\\"\\n"\n insert: "import { <%= props.pascalCaseName %>Model } from \\"./<%= props.pascalCaseName %>\\"\\n"\n skip: <%= !props.pascalCaseName.endsWith(\'Store\') %>\n// error-line\n- path: "app/models/RootStore.ts"\n// success-line\n- path: "src/models/RootStore.ts"\n after: "types.model(\\"RootStore\\").props({\\n"\n insert: " <%= props.camelCaseName %>: types.optional(<%= props.pascalCaseName %>Model, {} as any),\\n"\n skip: <%= !props.pascalCaseName.endsWith(\'Store\') %>\n// error-line\n- path: "app/models/index.ts"\n// success-line\n- path: "src/models/index.ts"\n\n'})})]}),"\n",(0,o.jsx)(n.h2,{id:"creating-file-based-routes",children:"Creating File-based Routes"}),"\n",(0,o.jsx)(n.h3,{id:"srcapp_layouttsx",children:"src/app/_layout.tsx"}),"\n",(0,o.jsxs)(n.p,{children:["We're now ready to start setting up navigation for the app! If you're familiar with Ignite, ",(0,o.jsx)(n.code,{children:"app.tsx"})," is where our root navigator lives, however, with ",(0,o.jsx)(n.code,{children:"expo-router"}),", we'll use ",(0,o.jsx)(n.code,{children:"src/app/_layout.tsx"})," for that. We'll add the providers here that any route would need within the app."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'// app/_layout.tsx\nimport React from "react";\nimport { Slot, SplashScreen } from "expo-router";\nimport { useInitialRootStore } from "src/models";\n\nSplashScreen.preventAutoHideAsync();\n\nif (__DEV__) {\n // Load Reactotron configuration in development. We don\'t want to\n // include this in our production bundle, so we are using `if (__DEV__)`\n // to only execute this in development.\n require("src/devtools/ReactotronConfig.ts");\n}\n\nexport { ErrorBoundary } from "src/components/ErrorBoundary/ErrorBoundary";\n\nexport default function Root() {\n // Wait for stores to load and render our layout inside of it so we have access\n // to auth info etc\n const { rehydrated } = useInitialRootStore();\n if (!rehydrated) {\n return null;\n }\n\n return ;\n}\n'})}),"\n",(0,o.jsxs)(n.p,{children:["Move ",(0,o.jsx)(n.code,{children:"ErrorBoundary"})," out of ",(0,o.jsx)(n.code,{children:"screens/ErrorScreen"})," and into ",(0,o.jsx)(n.code,{children:"src/components/ErrorBoundary"}),":"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-bash",children:"mkdir src/components/ErrorBoundary\nmv src/screens/ErrorScreen/* src/components/ErrorBoundary\n"})}),"\n",(0,o.jsxs)(n.p,{children:["For starters, this sets up our error boundary for the app and handles waiting on our stores to rehydrate. ",(0,o.jsx)(n.code,{children:""})," comes from ",(0,o.jsx)(n.code,{children:"expo-router"}),", you can think of it like the ",(0,o.jsx)(n.code,{children:"children"})," prop in ",(0,o.jsx)(n.code,{children:"React"}),". This component can be wrapped with others to help create a layout."]}),"\n",(0,o.jsxs)(n.p,{children:["Next, we'll convert the conditional part of authentication from ",(0,o.jsx)(n.code,{children:"react-navigation"})," to ",(0,o.jsx)(n.code,{children:"expo-router"}),", deciding on whether or not to display the login form or get to the welcome screen experience."]}),"\n",(0,o.jsx)(n.h3,{id:"srcappapp_layouttsx",children:"src/app/(app)/_layout.tsx"}),"\n",(0,o.jsxs)(n.p,{children:["Create another ",(0,o.jsx)(n.code,{children:"_layout.tsx"})," but this time inside of a new directory, ",(0,o.jsx)(n.code,{children:"src/app/(app)"}),". This route wrapped in parentheses is called a ",(0,o.jsx)(n.a,{href:"https://docs.expo.dev/routing/layouts/#groups",children:"Group"}),". Groups can be used to add layouts and/or help organize sections of the app without adding additional segments to the URL. Remember, each directory is a route in this new mental model of file-based routing - but sometimes we don't want that, that's when you'll call upon groups."]}),"\n",(0,o.jsx)(n.p,{children:"In this layout is where we'll determine if the user is authenticated by checking our MST store. We'll also wait here while assets are loaded and then hide the splash screen when finished."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'import React from "react";\nimport { Redirect, SplashScreen, Stack } from "expo-router";\nimport { observer } from "mobx-react-lite";\nimport { useStores } from "src/models";\nimport { useFonts } from "expo-font";\nimport { customFontsToLoad } from "src/theme";\n\nexport default observer(function Layout() {\n const {\n authenticationStore: { isAuthenticated },\n } = useStores();\n\n const [fontsLoaded, fontError] = useFonts(customFontsToLoad);\n\n React.useEffect(() => {\n if (fontsLoaded || fontError) {\n // Hide the splash screen after the fonts have loaded and the UI is ready.\n SplashScreen.hideAsync();\n }\n }, [fontsLoaded, fontError]);\n\n if (!fontsLoaded && !fontError) {\n return null;\n }\n\n if (!isAuthenticated) {\n return ;\n }\n\n return ;\n});\n'})}),"\n",(0,o.jsxs)(n.p,{children:["As you can see, if the user is not authenticated we redirect them to the ",(0,o.jsx)(n.code,{children:"/log-in"})," route, otherwise we'll render a stack navigator. TypeScript is probably telling us that route doesn't exist yet, so let's fix that."]}),"\n",(0,o.jsx)(n.h3,{id:"srcapplog-intsx",children:"src/app/log-in.tsx"}),"\n",(0,o.jsxs)(n.p,{children:["To redirect the user to the login form, create ",(0,o.jsx)(n.code,{children:"src/app/log-in.tsx"}),". We'll copy over the contents from the original boilerplate ",(0,o.jsx)(n.code,{children:"src/screens/LoginScreen.tsx"})," to help the UI layout of this page."]}),"\n",(0,o.jsxs)(t,{children:[(0,o.jsx)("summary",{children:"src/app/log-in.tsx"}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'import { router } from "expo-router";\nimport { observer } from "mobx-react-lite";\nimport React, { ComponentType, useEffect, useMemo, useRef, useState } from "react";\nimport { TextInput, TextStyle, ViewStyle } from "react-native";\nimport { Button, Icon, Screen, Text, TextField, TextFieldAccessoryProps } from "src/components";\nimport { useStores } from "src/models";\nimport { colors, spacing } from "src/theme";\n\nexport default observer(function Login(_props) {\n const authPasswordInput = useRef(null);\n\n const [authPassword, setAuthPassword] = useState("");\n const [isAuthPasswordHidden, setIsAuthPasswordHidden] = useState(true);\n const [isSubmitted, setIsSubmitted] = useState(false);\n const [attemptsCount, setAttemptsCount] = useState(0);\n const {\n authenticationStore: { authEmail, setAuthEmail, setAuthToken, validationError },\n } = useStores();\n\n useEffect(() => {\n // Here is where you could fetch credentials from keychain or storage\n // and pre-fill the form fields.\n setAuthEmail("ignite@infinite.red");\n setAuthPassword("ign1teIsAwes0m3");\n\n // Return a "cleanup" function that React will run when the component unmounts\n return () => {\n setAuthPassword("");\n setAuthEmail("");\n };\n }, []);\n\n const error = isSubmitted ? validationError : "";\n\n function login() {\n setIsSubmitted(true);\n setAttemptsCount(attemptsCount + 1);\n\n if (validationError) return;\n\n // Make a request to your server to get an authentication token.\n // If successful, reset the fields and set the token.\n setIsSubmitted(false);\n setAuthPassword("");\n setAuthEmail("");\n\n // We\'ll mock this with a fake token.\n setAuthToken(String(Date.now()));\n\n // navigate to the main screen\n router.replace("/");\n }\n\n const PasswordRightAccessory: ComponentType = useMemo(\n () =>\n function PasswordRightAccessory(props: TextFieldAccessoryProps) {\n return (\n setIsAuthPasswordHidden(!isAuthPasswordHidden)}\n />\n );\n },\n [isAuthPasswordHidden]\n );\n\n return (\n \n \n \n {attemptsCount > 2 && }\n\n authPasswordInput.current?.focus()}\n />\n\n \n\n \n \n );\n});\n\nconst $screenContentContainer: ViewStyle = {\n paddingVertical: spacing.xxl,\n paddingHorizontal: spacing.lg,\n};\n\nconst $signIn: TextStyle = {\n marginBottom: spacing.sm,\n};\n\nconst $enterDetails: TextStyle = {\n marginBottom: spacing.lg,\n};\n\nconst $hint: TextStyle = {\n color: colors.tint,\n marginBottom: spacing.md,\n};\n\nconst $textField: ViewStyle = {\n marginBottom: spacing.lg,\n};\n\nconst $tapButton: ViewStyle = {\n marginTop: spacing.xs,\n};\n'})})]}),"\n",(0,o.jsxs)(n.p,{children:["If you're familiar with the Ignite boilerplate, this is the same authentication screen you are used to - the only difference here is some of the imports now from from ",(0,o.jsx)(n.code,{children:"src/*"})," rather than the relative paths. So keep that in mind if you're upgrading an existing application."]}),"\n",(0,o.jsx)(n.h3,{id:"srcappappindextsx",children:"src/app/(app)/index.tsx"}),"\n",(0,o.jsx)(n.p,{children:"If the user is successfully authenticated, we'll show them the welcome screen. Can you guess what the route will be by looking at the directory structure?"}),"\n",(0,o.jsxs)(n.p,{children:["Just the root route! Think about it in terms of web URLs, if arriving at ",(0,o.jsx)(n.code,{children:"http://localhost:8081/"})," (in this case of local development), we'd expect to see the welcome screen. However, if we're not authenticated, we'll be redirected to ",(0,o.jsx)(n.code,{children:"/log-in"})," to ask the user to log in."]}),"\n",(0,o.jsxs)(n.p,{children:["This JSX will be the same exact contents from ",(0,o.jsx)(n.code,{children:"WelcomeScreen.tsx"})," in the original Ignite boilerplate with the exception of some import paths (using the TS aliases) and a simple update to ",(0,o.jsx)(n.code,{children:"goNext"}),"."]}),"\n",(0,o.jsxs)(n.p,{children:["Since we'll no longer use the ",(0,o.jsx)(n.code,{children:"navigation"})," prop, we utilize ",(0,o.jsx)(n.code,{children:"expo-router"}),"'s ",(0,o.jsx)(n.a,{href:"https://docs.expo.dev/routing/navigating-pages/#imperative-navigation",children:"Imperative navigation"})," to navigate to the component demo Showroom next. We're using ",(0,o.jsx)(n.code,{children:".replace"})," since we don't need to get back to this route. You can read more about ",(0,o.jsx)(n.a,{href:"https://docs.expo.dev/routing/navigating-pages/",children:"Navigating between pages"})," at Expo's documentation."]}),"\n",(0,o.jsxs)(t,{children:[(0,o.jsx)("summary",{children:"src/app/(app)/index.tsx"}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'import { router } from "expo-router";\nimport { observer } from "mobx-react-lite";\nimport React from "react";\nimport { Image, ImageStyle, TextStyle, View, ViewStyle } from "react-native";\nimport { Button, Text } from "src/components";\nimport { isRTL } from "src/i18n";\nimport { useStores } from "src/models";\nimport { colors, spacing } from "src/theme";\nimport { useHeader } from "src/utils/useHeader";\nimport { useSafeAreaInsetsStyle } from "src/utils/useSafeAreaInsetsStyle";\n\nconst welcomeLogo = require("assets/images/logo.png");\nconst welcomeFace = require("assets/images/welcome-face.png");\n\nexport default observer(function WelcomeScreen() {\n const {\n authenticationStore: { logout },\n } = useStores();\n\n function goNext() {\n router.replace("/showroom");\n }\n\n useHeader(\n {\n rightTx: "common.logOut",\n onRightPress: logout,\n },\n [logout]\n );\n\n const $bottomContainerInsets = useSafeAreaInsetsStyle(["bottom"]);\n\n return (\n \n \n \n \n \n \n \n\n \n \n \n \n \n );\n});\n\nconst $container: ViewStyle = {\n flex: 1,\n backgroundColor: colors.background,\n};\n\nconst $topContainer: ViewStyle = {\n flexShrink: 1,\n flexGrow: 1,\n flexBasis: "57%",\n justifyContent: "center",\n paddingHorizontal: spacing.lg,\n};\n\nconst $bottomContainer: ViewStyle = {\n flexShrink: 1,\n flexGrow: 0,\n flexBasis: "43%",\n backgroundColor: colors.palette.neutral100,\n borderTopLeftRadius: 16,\n borderTopRightRadius: 16,\n paddingHorizontal: spacing.lg,\n justifyContent: "space-around",\n};\nconst $welcomeLogo: ImageStyle = {\n height: 88,\n width: "100%",\n marginBottom: spacing.xxl,\n};\n\nconst $welcomeFace: ImageStyle = {\n height: 169,\n width: 269,\n position: "absolute",\n bottom: -47,\n right: -80,\n transform: [{ scaleX: isRTL ? -1 : 1 }],\n};\n\nconst $welcomeHeading: TextStyle = {\n marginBottom: spacing.md,\n};\n'})})]}),"\n",(0,o.jsx)(n.h3,{id:"checkpoint",children:"Checkpoint"}),"\n",(0,o.jsxs)(n.p,{children:["Build and run your app using ",(0,o.jsx)(n.code,{children:"yarn run ios"}),'. You should see the log-in route, be able to authenticate, and navigate to the main "welcome" screen. But we aren\'t done yet - we still need to add the remaining screens in a Tab Navigator.']}),"\n",(0,o.jsx)(n.h2,{id:"adding-tab-navigation",children:"Adding Tab Navigation"}),"\n",(0,o.jsx)(n.p,{children:"First, we'll create another route group to help contain where these routes live and set the layout for the tabs."}),"\n",(0,o.jsxs)(n.p,{children:["Create ",(0,o.jsx)(n.code,{children:"src/app/(app)/(tabs)/_layout.tsx"})," and we'll convert Ignite's previous ",(0,o.jsx)(n.code,{children:"app/navigators/DemoNavigator.tsx"})," to live here."]}),"\n",(0,o.jsxs)(t,{children:[(0,o.jsx)("summary",{children:"src/app/(app)/(tabs)/_layout.tsx"}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'import React from "react";\nimport { Tabs } from "expo-router/tabs";\nimport { observer } from "mobx-react-lite";\nimport { Icon } from "src/components";\nimport { translate } from "src/i18n";\nimport { colors, spacing, typography } from "src/theme";\nimport { TextStyle, ViewStyle } from "react-native";\nimport { useSafeAreaInsets } from "react-native-safe-area-context";\n\nexport default observer(function Layout() {\n const { bottom } = useSafeAreaInsets();\n\n return (\n \n ,\n }}\n />\n ,\n }}\n />\n ,\n }}\n />\n ,\n }}\n />\n \n );\n});\n\nconst $tabBar: ViewStyle = {\n backgroundColor: colors.background,\n borderTopColor: colors.transparent,\n};\n\nconst $tabBarItem: ViewStyle = {\n paddingTop: spacing.md,\n};\n\nconst $tabBarLabel: TextStyle = {\n fontSize: 12,\n fontFamily: typography.primary.medium,\n lineHeight: 16,\n flex: 1,\n};\n'})})]}),"\n",(0,o.jsx)(n.h3,{id:"creating-tab-screens",children:"Creating Tab Screens"}),"\n",(0,o.jsxs)(n.p,{children:["Now to create screens for each tabs, you simply just add ",(0,o.jsx)(n.code,{children:"[screen].tsx"})," under the ",(0,o.jsx)(n.code,{children:"(tabs)"})," group. Let's bring over the 3 simpler screens first - Community, Podcasts and Debug. Those will mostly be copy \ud83c\udf5d aside from changing the exports to default and import from our TS paths."]}),"\n",(0,o.jsxs)(t,{children:[(0,o.jsx)("summary",{children:"src/app/(app)/(tabs)/community.tsx"}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'import React from "react";\nimport { Image, ImageStyle, TextStyle, View, ViewStyle } from "react-native";\nimport { ListItem, Screen, Text } from "src/components";\nimport { spacing } from "src/theme";\nimport { openLinkInBrowser } from "src/utils/openLinkInBrowser";\nimport { isRTL } from "src/i18n";\n\nconst chainReactLogo = require("assets/images/demo/cr-logo.png");\nconst reactNativeLiveLogo = require("assets/images/demo/rnl-logo.png");\nconst reactNativeRadioLogo = require("assets/images/demo/rnr-logo.png");\nconst reactNativeNewsletterLogo = require("assets/images/demo/rnn-logo.png");\n\nexport default function DemoCommunityScreen() {\n return (\n \n \n \n\n \n \n openLinkInBrowser("https://community.infinite.red/")}\n />\n \n \n openLinkInBrowser("https://github.com/infinitered/ignite")}\n />\n\n \n \n \n \n \n }\n onPress={() => openLinkInBrowser("https://reactnativeradio.com/")}\n />\n \n \n \n }\n onPress={() => openLinkInBrowser("https://reactnativenewsletter.com/")}\n />\n \n \n \n }\n onPress={() => openLinkInBrowser("https://rn.live/")}\n />\n \n \n \n }\n onPress={() => openLinkInBrowser("https://cr.infinite.red/")}\n />\n \n \n openLinkInBrowser("https://infinite.red/contact")}\n />\n \n );\n}\n\nconst $container: ViewStyle = {\n paddingTop: spacing.lg + spacing.xl,\n paddingHorizontal: spacing.lg,\n};\n\nconst $title: TextStyle = {\n marginBottom: spacing.sm,\n};\n\nconst $tagline: TextStyle = {\n marginBottom: spacing.xxl,\n};\n\nconst $description: TextStyle = {\n marginBottom: spacing.lg,\n};\n\nconst $sectionTitle: TextStyle = {\n marginTop: spacing.xxl,\n};\n\nconst $logoContainer: ViewStyle = {\n marginEnd: spacing.md,\n flexDirection: "row",\n flexWrap: "wrap",\n alignContent: "center",\n};\n\nconst $logo: ImageStyle = {\n height: 38,\n width: 38,\n};\n'})})]}),"\n",(0,o.jsxs)(t,{children:[(0,o.jsx)("summary",{children:"src/app/(app)/(tabs)/podcasts.tsx"}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'import { observer } from "mobx-react-lite";\nimport React, { ComponentType, useEffect, useMemo } from "react";\nimport {\n AccessibilityProps,\n ActivityIndicator,\n Image,\n ImageSourcePropType,\n ImageStyle,\n Platform,\n StyleSheet,\n TextStyle,\n View,\n ViewStyle,\n} from "react-native";\nimport { type ContentStyle } from "@shopify/flash-list";\nimport Animated, {\n Extrapolate,\n interpolate,\n useAnimatedStyle,\n useSharedValue,\n withSpring,\n} from "react-native-reanimated";\nimport { Button, ButtonAccessoryProps, Card, EmptyState, Icon, ListView, Screen, Text, Toggle } from "src/components";\nimport { isRTL, translate } from "src/i18n";\nimport { useStores } from "src/models";\nimport { Episode } from "src/models/Episode";\nimport { colors, spacing } from "src/theme";\nimport { delay } from "src/utils/delay";\nimport { openLinkInBrowser } from "src/utils/openLinkInBrowser";\n\nconst ICON_SIZE = 14;\n\nconst rnrImage1 = require("assets/images/demo/rnr-image-1.png");\nconst rnrImage2 = require("assets/images/demo/rnr-image-2.png");\nconst rnrImage3 = require("assets/images/demo/rnr-image-3.png");\nconst rnrImages = [rnrImage1, rnrImage2, rnrImage3];\n\nexport default observer(function DemoPodcastListScreen(_props) {\n const { episodeStore } = useStores();\n\n const [refreshing, setRefreshing] = React.useState(false);\n const [isLoading, setIsLoading] = React.useState(false);\n\n // initially, kick off a background refresh without the refreshing UI\n useEffect(() => {\n (async function load() {\n setIsLoading(true);\n await episodeStore.fetchEpisodes();\n setIsLoading(false);\n })();\n }, [episodeStore]);\n\n // simulate a longer refresh, if the refresh is too fast for UX\n async function manualRefresh() {\n setRefreshing(true);\n await Promise.all([episodeStore.fetchEpisodes(), delay(750)]);\n setRefreshing(false);\n }\n\n return (\n \n \n contentContainerStyle={$listContentContainer}\n data={episodeStore.episodesForList.slice()}\n extraData={episodeStore.favorites.length + episodeStore.episodes.length}\n refreshing={refreshing}\n estimatedItemSize={177}\n onRefresh={manualRefresh}\n ListEmptyComponent={\n isLoading ? (\n \n ) : (\n \n )\n }\n ListHeaderComponent={\n \n \n {(episodeStore.favoritesOnly || episodeStore.episodesForList.length > 0) && (\n \n episodeStore.setProp("favoritesOnly", !episodeStore.favoritesOnly)}\n variant="switch"\n labelTx="demoPodcastListScreen.onlyFavorites"\n labelPosition="left"\n labelStyle={$labelStyle}\n accessibilityLabel={translate("demoPodcastListScreen.accessibility.switch")}\n />\n \n )}\n \n }\n renderItem={({ item }) => (\n episodeStore.toggleFavorite(item)}\n />\n )}\n />\n \n );\n});\n\nconst EpisodeCard = observer(function EpisodeCard({\n episode,\n isFavorite,\n onPressFavorite,\n}: {\n episode: Episode;\n onPressFavorite: () => void;\n isFavorite: boolean;\n}) {\n const liked = useSharedValue(isFavorite ? 1 : 0);\n\n const imageUri = useMemo(() => {\n return rnrImages[Math.floor(Math.random() * rnrImages.length)];\n }, []);\n\n // Grey heart\n const animatedLikeButtonStyles = useAnimatedStyle(() => {\n return {\n transform: [\n {\n scale: interpolate(liked.value, [0, 1], [1, 0], Extrapolate.EXTEND),\n },\n ],\n opacity: interpolate(liked.value, [0, 1], [1, 0], Extrapolate.CLAMP),\n };\n });\n\n // Pink heart\n const animatedUnlikeButtonStyles = useAnimatedStyle(() => {\n return {\n transform: [\n {\n scale: liked.value,\n },\n ],\n opacity: liked.value,\n };\n });\n\n /**\n * Android has a "longpress" accessibility action. iOS does not, so we just have to use a hint.\n * @see https://reactnative.dev/docs/accessibility#accessibilityactions\n */\n const accessibilityHintProps = useMemo(\n () =>\n Platform.select({\n ios: {\n accessibilityLabel: episode.title,\n accessibilityHint: translate("demoPodcastListScreen.accessibility.cardHint", {\n action: isFavorite ? "unfavorite" : "favorite",\n }),\n },\n android: {\n accessibilityLabel: episode.title,\n accessibilityActions: [\n {\n name: "longpress",\n label: translate("demoPodcastListScreen.accessibility.favoriteAction"),\n },\n ],\n onAccessibilityAction: ({ nativeEvent }) => {\n if (nativeEvent.actionName === "longpress") {\n handlePressFavorite();\n }\n },\n },\n }),\n [episode, isFavorite]\n );\n\n const handlePressFavorite = () => {\n onPressFavorite();\n liked.value = withSpring(liked.value ? 0 : 1);\n };\n\n const handlePressCard = () => {\n openLinkInBrowser(episode.enclosure.link);\n };\n\n const ButtonLeftAccessory: ComponentType = useMemo(\n () =>\n function ButtonLeftAccessory() {\n return (\n \n \n \n \n \n \n \n \n );\n },\n []\n );\n\n return (\n \n \n {episode.datePublished.textLabel}\n \n \n {episode.duration.textLabel}\n \n \n }\n content={`${episode.parsedTitleAndSubtitle.title} - ${episode.parsedTitleAndSubtitle.subtitle}`}\n {...accessibilityHintProps}\n RightComponent={}\n FooterComponent={\n \n \n \n }\n />\n );\n});\n\nconst $screenContentContainer: ViewStyle = {\n flex: 1,\n};\n\nconst $listContentContainer: ContentStyle = {\n paddingHorizontal: spacing.lg,\n paddingTop: spacing.lg + spacing.xl,\n paddingBottom: spacing.lg,\n};\n\nconst $heading: ViewStyle = {\n marginBottom: spacing.md,\n};\n\nconst $item: ViewStyle = {\n padding: spacing.md,\n marginTop: spacing.md,\n minHeight: 120,\n};\n\nconst $itemThumbnail: ImageStyle = {\n marginTop: spacing.sm,\n borderRadius: 50,\n alignSelf: "flex-start",\n};\n\nconst $toggle: ViewStyle = {\n marginTop: spacing.md,\n};\n\nconst $labelStyle: TextStyle = {\n textAlign: "left",\n};\n\nconst $iconContainer: ViewStyle = {\n height: ICON_SIZE,\n width: ICON_SIZE,\n flexDirection: "row",\n marginEnd: spacing.sm,\n};\n\nconst $metadata: TextStyle = {\n color: colors.textDim,\n marginTop: spacing.xs,\n flexDirection: "row",\n};\n\nconst $metadataText: TextStyle = {\n color: colors.textDim,\n marginEnd: spacing.md,\n marginBottom: spacing.xs,\n};\n\nconst $favoriteButton: ViewStyle = {\n borderRadius: 17,\n marginTop: spacing.md,\n justifyContent: "flex-start",\n backgroundColor: colors.palette.neutral300,\n borderColor: colors.palette.neutral300,\n paddingHorizontal: spacing.md,\n paddingTop: spacing.xxxs,\n paddingBottom: 0,\n minHeight: 32,\n alignSelf: "flex-start",\n};\n\nconst $unFavoriteButton: ViewStyle = {\n borderColor: colors.palette.primary100,\n backgroundColor: colors.palette.primary100,\n};\n\nconst $emptyState: ViewStyle = {\n marginTop: spacing.xxl,\n};\n\nconst $emptyStateImage: ImageStyle = {\n transform: [{ scaleX: isRTL ? -1 : 1 }],\n};\n'})})]}),"\n",(0,o.jsxs)(t,{children:[(0,o.jsx)("summary",{children:"src/app/(app)/(tabs)/debug.tsx"}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'import React from "react";\nimport * as Application from "expo-application";\nimport { Linking, Platform, TextStyle, View, ViewStyle } from "react-native";\nimport { Button, ListItem, Screen, Text } from "src/components";\nimport { colors, spacing } from "src/theme";\nimport { isRTL } from "src/i18n";\nimport { useStores } from "src/models";\n\nfunction openLinkInBrowser(url: string) {\n Linking.canOpenURL(url).then((canOpen) => canOpen && Linking.openURL(url));\n}\n\nexport default function DemoDebugScreen() {\n const {\n authenticationStore: { logout },\n } = useStores();\n\n const usingHermes = typeof HermesInternal === "object" && HermesInternal !== null;\n // @ts-expect-error\n const usingFabric = global.nativeFabricUIManager != null;\n\n const demoReactotron = React.useMemo(\n () => async () => {\n if (__DEV__) {\n console.tron.display({\n name: "DISPLAY",\n value: {\n appId: Application.applicationId,\n appName: Application.applicationName,\n appVersion: Application.nativeApplicationVersion,\n appBuildVersion: Application.nativeBuildVersion,\n hermesEnabled: usingHermes,\n },\n important: true,\n });\n }\n },\n []\n );\n\n return (\n \n openLinkInBrowser("https://github.com/infinitered/ignite/issues")}\n />\n \n \n \n App Id\n {Application.applicationId}\n \n }\n />\n \n App Name\n {Application.applicationName}\n \n }\n />\n \n App Version\n {Application.nativeApplicationVersion}\n \n }\n />\n \n App Build Version\n {Application.nativeBuildVersion}\n \n }\n />\n \n Hermes Enabled\n {String(usingHermes)}\n \n }\n />\n \n Fabric Enabled\n {String(usingFabric)}\n \n }\n />\n \n \n \n \n \n \n \n \n \n );\n}\n\nconst $container: ViewStyle = {\n paddingTop: spacing.lg + spacing.xl,\n paddingBottom: spacing.xxl,\n paddingHorizontal: spacing.lg,\n};\n\nconst $title: TextStyle = {\n marginBottom: spacing.xxl,\n};\n\nconst $reportBugsLink: TextStyle = {\n color: colors.tint,\n marginBottom: spacing.lg,\n alignSelf: isRTL ? "flex-start" : "flex-end",\n};\n\nconst $item: ViewStyle = {\n marginBottom: spacing.md,\n};\n\nconst $itemsContainer: ViewStyle = {\n marginBottom: spacing.xl,\n};\n\nconst $button: ViewStyle = {\n marginBottom: spacing.xs,\n};\n\nconst $buttonContainer: ViewStyle = {\n marginBottom: spacing.md,\n};\n\nconst $hint: TextStyle = {\n color: colors.palette.neutral600,\n fontSize: 12,\n lineHeight: 15,\n paddingBottom: spacing.lg,\n};\n'})})]}),"\n",(0,o.jsxs)(n.p,{children:["These will all be navigable by routing to ",(0,o.jsx)(n.code,{children:"/community"}),", ",(0,o.jsx)(n.code,{children:"/podcasts"})," or ",(0,o.jsx)(n.code,{children:"/debug"}),". Next we'll cover the Showroom which is a bit more involved, since we have to add some supporting components that only apply to that route."]}),"\n",(0,o.jsx)(n.h3,{id:"showroom-screen",children:"Showroom Screen"}),"\n",(0,o.jsxs)(n.p,{children:["The Showroom screen has some supporting components it needs that only applies to that route. Ignite used to colocate these next to the screen file itself, in the ",(0,o.jsx)(n.code,{children:"src/app/screens/DemoShowroomScreen"})," directory. However, ",(0,o.jsx)(n.code,{children:"expo-router"})," wants to keep the ",(0,o.jsx)(n.code,{children:"app"})," directory strictly for app routes."]}),"\n",(0,o.jsxs)(n.p,{children:["To adhere to this, we'll move the supporting components to ",(0,o.jsx)(n.code,{children:"src/components/Showroom"})," and import them from their in our ",(0,o.jsx)(n.code,{children:"src/app/(app)/(tabs)/showroom.tsx"}),"."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-bash",children:"mv src/screens/DemoShowroomScreen src/components/Showroom\nrm src/components/Showroom/DemoShowroomScreen.tsx\n"})}),"\n",(0,o.jsxs)(n.blockquote,{children:["\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.strong,{children:"Note"}),": There is a type that gets removed by the above command. Add the following to the top of ",(0,o.jsx)(n.code,{children:"src/components/Showroom/demos/index.ts"})]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'import { ReactElement } from "react";\n\nexport interface Demo {\n name: string;\n description: string;\n data: ReactElement[];\n}\n'})}),"\n",(0,o.jsxs)(n.p,{children:["You'll need to update the imports in the ",(0,o.jsx)(n.code,{children:"src/components/Showroom/demos/Demo*.ts"})," files.\nA project-wide search and replace should do the trick:"]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["Project-wide search for ",(0,o.jsx)(n.code,{children:'from "../DemoShowroomScreen"'})]}),"\n",(0,o.jsxs)(n.li,{children:["Replace with ",(0,o.jsx)(n.code,{children:'from "."'})]}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:["We've deleted the screen file because we'll make a few ",(0,o.jsx)(n.code,{children:"expo-router"})," specific changes to it over in the ",(0,o.jsx)(n.code,{children:"app"})," directory. One improvement we can make to the Showroom screen is that we can reduce the platform specific code with regards to the ",(0,o.jsx)(n.code,{children:"renderItem"})," of ",(0,o.jsx)(n.code,{children:"SectionList"}),"."]}),"\n",(0,o.jsx)(n.p,{children:"Before, we had an implementation for both web and mobile to help with some specific web routing for deep links:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'const WebListItem: FC = ({ item, sectionIndex }) => {\n const sectionSlug = item.name.toLowerCase();\n\n return (\n \n \n {item.name}\n \n {item.useCases.map((u) => {\n const itemSlug = slugify(u);\n\n return (\n \n {u}\n \n );\n })}\n \n );\n};\n\nconst NativeListItem: FC = ({ item, sectionIndex, handleScroll }) => (\n \n handleScroll?.(sectionIndex)} preset="bold" style={$menuContainer}>\n {item.name}\n \n {item.useCases.map((u, index) => (\n handleScroll?.(sectionIndex, index + 1)}\n text={u}\n rightIcon={isRTL ? "caretLeft" : "caretRight"}\n />\n ))}\n \n);\n\nconst ShowroomListItem = Platform.select({\n web: WebListItem,\n default: NativeListItem,\n});\n'})}),"\n",(0,o.jsx)(n.p,{children:"However, we don't have to worry about this anymore. We can implement this as follows:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'const ShowroomListItem: FC = ({ item, sectionIndex }) => {\n const sectionSlug = item.name.toLowerCase();\n\n return (\n \n \n {item.name}\n \n {item.useCases.map((u) => {\n const itemSlug = slugify(u);\n return (\n \n \n \n );\n })}\n \n );\n};\n'})}),"\n",(0,o.jsxs)(n.p,{children:["Note the ",(0,o.jsx)(n.code,{children:"Link"})," wrapper provided by ",(0,o.jsx)(n.code,{children:"expo-router"}),". We link to the ",(0,o.jsx)(n.code,{children:"/showroom"})," route and provide the extra search params for a section or specific component we want to navigate to. We can then extract (and type) these params using ",(0,o.jsx)(n.code,{children:"useLocalSearchParams"})]}),"\n",(0,o.jsx)(n.p,{children:"The snippet below contains the entire file for reference:"}),"\n",(0,o.jsxs)(t,{children:[(0,o.jsx)("summary",{children:"src/app/(app)/(tabs)/showroom.tsx"}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'import React, { FC, useEffect, useRef, useState } from "react";\nimport { Image, ImageStyle, SectionList, TextStyle, View, ViewStyle } from "react-native";\nimport { Drawer } from "react-native-drawer-layout";\nimport { type ContentStyle } from "@shopify/flash-list";\nimport { ListItem, ListView, ListViewRef, Screen, Text } from "src/components";\nimport { isRTL } from "src/i18n";\nimport { colors, spacing } from "src/theme";\nimport { useSafeAreaInsetsStyle } from "src/utils/useSafeAreaInsetsStyle";\nimport * as Demos from "src/components/Showroom/demos";\nimport { DrawerIconButton } from "src/components/Showroom/DrawerIconButton";\nimport { Link, useLocalSearchParams } from "expo-router";\n\nconst logo = require("assets/images/logo.png");\n\ninterface DemoListItem {\n item: { name: string; useCases: string[] };\n sectionIndex: number;\n handleScroll?: (sectionIndex: number, itemIndex?: number) => void;\n}\n\nconst slugify = (str: string) =>\n str\n .toLowerCase()\n .trim()\n .replace(/[^\\w\\s-]/g, "")\n .replace(/[\\s_-]+/g, "-")\n .replace(/^-+|-+$/g, "");\n\nconst ShowroomListItem: FC = ({ item, sectionIndex }) => {\n const sectionSlug = item.name.toLowerCase();\n\n return (\n \n \n {item.name}\n \n {item.useCases.map((u) => {\n const itemSlug = slugify(u);\n return (\n \n \n \n );\n })}\n \n );\n};\n\nexport default function DemoShowroomScreen() {\n const [open, setOpen] = useState(false);\n const timeout = useRef>();\n const listRef = useRef(null);\n const menuRef = useRef>(null);\n\n const params = useLocalSearchParams<{\n sectionSlug?: string;\n itemSlug?: string;\n }>();\n\n // handle scroll when section/item params change\n React.useEffect(() => {\n if (Object.keys(params).length > 0) {\n const demoValues = Object.values(Demos);\n const findSectionIndex = demoValues.findIndex((x) => x.name.toLowerCase() === params.sectionSlug);\n let findItemIndex = 0;\n if (params.itemSlug) {\n try {\n findItemIndex =\n demoValues[findSectionIndex].data.findIndex((u) => slugify(u.props.name) === params.itemSlug) + 1;\n } catch (err) {\n console.error(err);\n }\n }\n handleScroll(findSectionIndex, findItemIndex);\n }\n }, [params]);\n\n const toggleDrawer = () => {\n if (!open) {\n setOpen(true);\n } else {\n setOpen(false);\n }\n };\n\n const handleScroll = (sectionIndex: number, itemIndex = 0) => {\n listRef.current?.scrollToLocation({\n animated: true,\n itemIndex,\n sectionIndex,\n });\n toggleDrawer();\n };\n\n const scrollToIndexFailed = (info: {\n index: number;\n highestMeasuredFrameIndex: number;\n averageItemLength: number;\n }) => {\n listRef.current?.getScrollResponder()?.scrollToEnd();\n timeout.current = setTimeout(\n () =>\n listRef.current?.scrollToLocation({\n animated: true,\n itemIndex: info.index,\n sectionIndex: 0,\n }),\n 50\n );\n };\n\n useEffect(() => {\n return () => timeout.current && clearTimeout(timeout.current);\n }, []);\n\n const $drawerInsets = useSafeAreaInsetsStyle(["top"]);\n\n return (\n setOpen(true)}\n onClose={() => setOpen(false)}\n drawerType={"slide"}\n drawerPosition={isRTL ? "right" : "left"}\n renderDrawerContent={() => (\n \n \n \n \n\n \n ref={menuRef}\n contentContainerStyle={$listContentContainer}\n estimatedItemSize={250}\n data={Object.values(Demos).map((d) => ({\n name: d.name,\n useCases: d.data.map((u) => u.props.name as string),\n }))}\n keyExtractor={(item) => item.name}\n renderItem={({ item, index: sectionIndex }) => (\n \n )}\n />\n \n )}\n >\n \n \n\n item}\n renderSectionFooter={() => }\n ListHeaderComponent={\n \n \n \n }\n onScrollToIndexFailed={scrollToIndexFailed}\n renderSectionHeader={({ section }) => {\n return (\n \n \n {section.name}\n \n {section.description}\n \n );\n }}\n />\n \n \n );\n}\n\nconst $screenContainer: ViewStyle = {\n flex: 1,\n};\n\nconst $drawer: ViewStyle = {\n backgroundColor: colors.background,\n flex: 1,\n};\n\nconst $listContentContainer: ContentStyle = {\n paddingHorizontal: spacing.lg,\n};\n\nconst $sectionListContentContainer: ViewStyle = {\n paddingHorizontal: spacing.lg,\n};\n\nconst $heading: ViewStyle = {\n marginBottom: spacing.xxxl,\n};\n\nconst $logoImage: ImageStyle = {\n height: 42,\n width: 77,\n};\n\nconst $logoContainer: ViewStyle = {\n alignSelf: "flex-start",\n justifyContent: "center",\n height: 56,\n paddingHorizontal: spacing.lg,\n};\n\nconst $demoItemName: TextStyle = {\n fontSize: 24,\n marginBottom: spacing.md,\n};\n\nconst $demoItemDescription: TextStyle = {\n marginBottom: spacing.xxl,\n};\n\nconst $demoUseCasesSpacer: ViewStyle = {\n paddingBottom: spacing.xxl,\n};\n'})})]}),"\n",(0,o.jsxs)(n.p,{children:["If you head on over to the web app at ",(0,o.jsx)(n.code,{children:"http://localhost:8081/showroom?itemSlug=variants§ionSlug=toggle"}),", you'll see the Showroom screen will open and scroll down to the appropriate section."]}),"\n",(0,o.jsxs)(n.p,{children:["We can emulate ",(0,o.jsx)(n.a,{href:"https://docs.expo.dev/guides/linking/#testing-urls",children:"deep links in Expo Go"})," with the command:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-bash",children:"npx uri-scheme open exp://localhost:8081/--/showroom --ios\n"})}),"\n",(0,o.jsx)(n.p,{children:"Observe the simulator opens the mobile app and navigates to the Showroom screen."}),"\n",(0,o.jsxs)(n.p,{children:["We get that universal linking for free with ",(0,o.jsx)(n.code,{children:"expo-router"}),"!"]}),"\n",(0,o.jsx)(n.h2,{id:"code-cleanup",children:"Code Cleanup"}),"\n",(0,o.jsx)(n.p,{children:"Now that we have the boilerplate up and running again, let's clean some of the screen and navigation files that are no longer needed."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-bash",children:"rm src/app.tsx\nrm -rf src/screens\nrm -rf src/navigators\n"})}),"\n",(0,o.jsxs)(n.p,{children:["In doing so, we'll need to fix some ",(0,o.jsx)(n.code,{children:"Reactotron"})," code for custom commands. We'll drop the ",(0,o.jsx)(n.code,{children:"resetNavigation"})," one (logging out is really the same thing) and update the ",(0,o.jsx)(n.code,{children:"navigateTo"})," and ",(0,o.jsx)(n.code,{children:"goBack"}),". Open up ",(0,o.jsx)(n.code,{children:"src/devtools/ReactotronConfig.ts"})," to edit these."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:'// error-line\nimport { goBack, resetRoot, navigate } from "src/navigators/navigationUtilities";\n// success-line\nimport { router } from "expo-router";\n// ...\n// error-line-start\nreactotron.onCustomCommand({\n title: "Reset Navigation State",\n description: "Resets the navigation state",\n command: "resetNavigation",\n handler: () => {\n Reactotron.log("resetting navigation state");\n resetRoot({ index: 0, routes: [] });\n },\n});\n// error-line-end\n\nreactotron.onCustomCommand<[{ name: "route"; type: ArgType.String }]>({\n command: "navigateTo",\n handler: (args) => {\n const { route } = args ?? {};\n if (route) {\n Reactotron.log(`Navigating to: ${route}`);\n // error-line\n navigate(route as any); // this should be tied to the navigator, but since this is for debugging, we can navigate to illegal routes\n // success-line-start\n // @ts-ignore - bypass Expo Router Typed Routes\n router.push(route);\n // success-line-end\n } else {\n Reactotron.log("Could not navigate. No route provided.");\n }\n },\n title: "Navigate To Screen",\n description: "Navigates to a screen by name.",\n args: [{ name: "route", type: ArgType.String }],\n});\n\nreactotron.onCustomCommand({\n title: "Go Back",\n description: "Goes back",\n command: "goBack",\n handler: () => {\n Reactotron.log("Going back");\n // error-line\n goBack();\n // success-line\n router.back();\n },\n});\n'})}),"\n",(0,o.jsx)(n.p,{children:"When navigating to the showroom, you may notice an error in the console:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-terminal",children:"ERROR Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?\n"})}),"\n",(0,o.jsxs)(n.p,{children:["This is because the ",(0,o.jsx)(n.code,{children:"expo-router"}),"'s ",(0,o.jsx)(n.code,{children:""})," component passes a ref to it's children. To address this we can update our ",(0,o.jsx)(n.code,{children:"ListItem.tsx"})," to correctly handle the\nref passed to it."]}),"\n",(0,o.jsxs)(t,{children:[(0,o.jsx)("summary",{children:"src/components/ListItem.tsx"}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'/**\n * A styled row component that can be used in FlatList, SectionList, or by itself.\n * @see [Documentation and Examples]{@link https://docs.infinite.red/ignite-cli/boilerplate/components/ListItem/}\n * @param {ListItemProps} props - The props for the `ListItem` component.\n * @returns {JSX.Element} The rendered `ListItem` component.\n */\n// error-line\n export function ListItem(props: ListItemProps) {\n// success-line-start\n export const ListItem = React.forwardRef(function ListItem(\n props: ListItemProps,\n ref,\n) {\n// success-line-end\n const {\n bottomSeparator,\n children,\n height = 56,\n LeftComponent,\n leftIcon,\n leftIconColor,\n RightComponent,\n rightIcon,\n rightIconColor,\n style,\n text,\n TextProps,\n topSeparator,\n tx,\n txOptions,\n textStyle: $textStyleOverride,\n containerStyle: $containerStyleOverride,\n ...TouchableOpacityProps\n } = props\n\n const $textStyles = [$textStyle, $textStyleOverride, TextProps?.style]\n\n const $containerStyles = [\n topSeparator && $separatorTop,\n bottomSeparator && $separatorBottom,\n $containerStyleOverride,\n ]\n\n const $touchableStyles = [$touchableStyle, { minHeight: height }, style]\n\n return (\n // error-line\n \n // success-line\n \n \n \n\n \n {children}\n \n\n \n \n \n )\n //error-line\n}\n //success-line\n})\n\n'})})]}),"\n",(0,o.jsx)(n.h2,{id:"summary",children:"Summary"}),"\n",(0,o.jsx)(n.p,{children:"There you have it, a culinary masterpiece of Ignite and Expo Router, shipped in one pizza box. What we achieved here:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"Simplified navigation code"}),"\n",(0,o.jsx)(n.li,{children:"Typed routing"}),"\n",(0,o.jsxs)(n.li,{children:["Examples of many aspects of ",(0,o.jsx)(n.code,{children:"expo-router"}),", such as authentication, tab navigation, search params"]}),"\n",(0,o.jsxs)(n.li,{children:["Deep linking that Just Works",(0,o.jsx)("sup",{children:"TM"})," on both web and mobile"]}),"\n",(0,o.jsx)(n.li,{children:"Reduced Platform specific code"}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/Jpoliachik/ignite-expo-router",children:"Full Example Repo"})}),"\n",(0,o.jsx)(n.h2,{id:"additional-resources",children:"Additional Resources"}),"\n",(0,o.jsxs)(n.p,{children:["To go more in-depth on ",(0,o.jsx)(n.code,{children:"expo-router"}),", check out the official documentation at ",(0,o.jsx)(n.a,{href:"https://docs.expo.dev/routing/introduction/",children:"Expo.dev"}),"."]}),"\n",(0,o.jsxs)(n.p,{children:["You can also follow Evan Bacon, the author of Expo Router, on ",(0,o.jsx)(n.a,{href:"https://github.com/EvanBacon/expo-router-twitter/blob/main/app/_layout.tsx",children:"GitHub"})," and check out his applications or demos using the navigation library."]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.a,{href:"https://github.com/EvanBacon/pillar-valley/",children:"Pillar Valley"})," - a game built in Expo using `expo-router``"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.a,{href:"https://github.com/EvanBacon/expo-router-twitter/",children:"Twitter routing demo"})," - a demo of how an ",(0,o.jsx)(n.code,{children:"expo-router"})," application would look if rebuilding Twitter's routes"]}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:["Additionally, here is an Ignite repo with ",(0,o.jsx)(n.code,{children:"expo-router"})," added in for reference on my ",(0,o.jsx)(n.a,{href:"https://github.com/Jpoliachik/ignite-expo-router",children:"GitHub"})]})]})}function p(e={}){const{wrapper:n}={...(0,r.M)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},2172:(e,n,t)=>{t.d(n,{I:()=>a,M:()=>i});var o=t(1504);const r={},s=o.createContext(r);function i(e){const n=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),o.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/main.389a2d66.js b/assets/js/main.389a2d66.js
new file mode 100644
index 00000000..0662b412
--- /dev/null
+++ b/assets/js/main.389a2d66.js
@@ -0,0 +1,2 @@
+/*! For license information please see main.389a2d66.js.LICENSE.txt */
+(self.webpackChunkignite_cookbook=self.webpackChunkignite_cookbook||[]).push([[1590],{5052:(e,t,n)=>{"use strict";n.d(t,{I:()=>o});var r=n(1504);function o(){return r.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},r.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}},628:(e,t,n)=>{"use strict";n.d(t,{c:()=>p});n(1504);var r=n(8852),o=n.n(r),a=n(4504);const i={"03224537":[()=>n.e(5284).then(n.bind(n,4024)),"@site/docs/recipes/DetoxIntro.md",4024],"08a54ed9":[()=>n.e(5156).then(n.t.bind(n,1128,19)),"~docs/default/tag-docs-tags-expo-updates-8e6.json",1128],"0e384e19":[()=>n.e(6328).then(n.bind(n,9404)),"@site/docs/intro.md",9404],"145425bc":[()=>n.e(16).then(n.bind(n,9856)),"@site/docs/recipes/AccessibilityFontSizes.md",9856],17896441:[()=>Promise.all([n.e(2176),n.e(4912),n.e(6752)]).then(n.bind(n,4276)),"@theme/DocItem",4276],"18d888f3":[()=>n.e(5640).then(n.t.bind(n,9584,19)),"~docs/default/tag-docs-tags-state-management-fd9.json",9584],"19d620af":[()=>n.e(3966).then(n.t.bind(n,5568,19)),"~docs/default/tag-docs-tags-ui-22c.json",5568],"1a4e3797":[()=>Promise.all([n.e(2176),n.e(9648)]).then(n.bind(n,3416)),"@theme/SearchPage",3416],"1ab29606":[()=>n.e(6928).then(n.t.bind(n,7704,19)),"~docs/default/tag-docs-tags-apisauce-8de.json",7704],"1c9ea255":[()=>n.e(8636).then(n.bind(n,620)),"@site/docs/recipes/TypeScriptBaseURL.md",620],"1df93b7f":[()=>Promise.all([n.e(2176),n.e(2096),n.e(8552)]).then(n.bind(n,9184)),"@site/src/pages/index.tsx",9184],"24a07a83":[()=>n.e(4424).then(n.t.bind(n,4136,19)),"~docs/default/tag-docs-tags-generator-e43.json",4136],"24c3776a":[()=>n.e(9828).then(n.bind(n,176)),"@site/docs/recipes/DistributingAuthTokenToAPI.md",176],"3192f89a":[()=>n.e(4992).then(n.t.bind(n,590,19)),"/home/runner/work/ignite-cookbook/ignite-cookbook/.docusaurus/docusaurus-plugin-content-pages/default/plugin-route-context-module-100.json",590],"31ac2bc7":[()=>n.e(9632).then(n.t.bind(n,9010,19)),"~docs/default/tag-docs-tags-cng-585.json",9010],"33f24359":[()=>n.e(222).then(n.t.bind(n,1592,19)),"~docs/default/tag-docs-tags-eas-update-bce.json",1592],"3720c009":[()=>Promise.all([n.e(2176),n.e(4492)]).then(n.bind(n,2808)),"@theme/DocTagsListPage",2808],"3bb7a4af":[()=>n.e(2008).then(n.t.bind(n,7264,19)),"~docs/default/tag-docs-tags-i-os-d44.json",7264],"47a03c7f":[()=>n.e(3336).then(n.t.bind(n,7536,19)),"~docs/default/tag-docs-tags-testing-194.json",7536],"4a4fb967":[()=>n.e(6756).then(n.t.bind(n,9056,19)),"~docs/default/tag-docs-tags-accessibility-83c.json",9056],"4e09609f":[()=>n.e(3128).then(n.bind(n,8220)),"@site/docs/recipes/SampleYAMLCircleCI.md",8220],"51658ad1":[()=>n.e(9576).then(n.t.bind(n,5752,19)),"~docs/default/tag-docs-tags-intro-ce4.json",5752],"51e76fb5":[()=>n.e(5064).then(n.bind(n,4488)),"@site/docs/recipes/MaestroSetup.md",4488],"51ea30c5":[()=>n.e(2324).then(n.t.bind(n,162,19)),"~docs/default/tag-docs-tags-mob-x-748.json",162],"54a9c7e8":[()=>n.e(8576).then(n.bind(n,2716)),"@site/docs/recipes/PrepForEASBuild.md",2716],"55960ee5":[()=>n.e(4296).then(n.t.bind(n,2416,19)),"~docs/default/tags-list-current-prop-15a.json",2416],"569bff92":[()=>n.e(5320).then(n.t.bind(n,2968,19)),"~docs/default/tag-docs-tags-hardware-92c.json",2968],"5e95c892":[()=>n.e(4304).then(n.bind(n,3564)),"@theme/DocsRoot",3564],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,7768)),"@generated/docusaurus.config",7768],63181745:[()=>n.e(5548).then(n.bind(n,9108)),"@site/docs/recipes/UsingScreenReaders.md",9108],"657027a7":[()=>n.e(3180).then(n.bind(n,8232)),"@site/docs/recipes/MigratingToMMKV.md",8232],"6728e797":[()=>n.e(8616).then(n.t.bind(n,6824,19)),"~docs/default/tag-docs-tags-android-593.json",6824],"69dd30cd":[()=>n.e(4e3).then(n.t.bind(n,7672,19)),"~docs/default/tag-docs-tags-prettier-367.json",7672],"6fd287af":[()=>n.e(4264).then(n.bind(n,9700)),"@site/docs/recipes/UpdatingIgnite.md",9700],"72dfd944":[()=>n.e(40).then(n.t.bind(n,8466,19)),"~docs/default/tag-docs-tags-text-field-8cc.json",8466],"78a0b2f7":[()=>n.e(4224).then(n.bind(n,4068)),"@site/docs/recipes/SwitchBetweenExpoGoCNG.md",4068],"7acb6f50":[()=>n.e(56).then(n.t.bind(n,9200,19)),"~docs/default/tag-docs-tags-yarn-9bd.json",9200],"7b45617e":[()=>n.e(8436).then(n.bind(n,9368)),"@site/docs/recipes/GeneratorComponentTests.md",9368],82139467:[()=>n.e(7820).then(n.t.bind(n,5688,19)),"~docs/default/tag-docs-tags-react-native-vision-camera-af5.json",5688],"8b0d950b":[()=>n.e(3960).then(n.t.bind(n,4832,19)),"~docs/default/tag-docs-tags-dependencies-d4f.json",4832],"935f2afb":[()=>n.e(5696).then(n.t.bind(n,5988,19)),"~docs/default/version-current-metadata-prop-751.json",5988],"94ee064e":[()=>n.e(7300).then(n.t.bind(n,5683,19)),"~docs/default/tag-docs-tags-react-navigation-23c.json",5683],"954f316d":[()=>n.e(6044).then(n.t.bind(n,9272,19)),"~docs/default/tag-docs-tags-zustand-18e.json",9272],"985027d8":[()=>n.e(2160).then(n.t.bind(n,6843,19)),"~docs/default/tag-docs-tags-archive-6cf.json",6843],"99d16955":[()=>n.e(622).then(n.t.bind(n,5004,19)),"~docs/default/tag-docs-tags-eas-228.json",5004],"9dc0f37b":[()=>n.e(6704).then(n.t.bind(n,6154,19)),"~docs/default/tag-docs-tags-section-list-198.json",6154],"9fc76e3d":[()=>n.e(900).then(n.bind(n,8468)),"@site/docs/recipes/EASUpdate.md",8468],a0d6a633:[()=>n.e(7732).then(n.t.bind(n,1284,19)),"~docs/default/tag-docs-tags-expo-dev-client-4bf.json",1284],a2f5d017:[()=>n.e(916).then(n.bind(n,3884)),"@site/docs/recipes/Redux.md",3884],a7bd4aaa:[()=>n.e(6500).then(n.bind(n,2e3)),"@theme/DocVersionRoot",2e3],a8646ade:[()=>n.e(3008).then(n.t.bind(n,1492,19)),"~docs/default/tag-docs-tags-mmkv-046.json",1492],a8f9d519:[()=>n.e(6216).then(n.t.bind(n,606,19)),"~docs/default/tag-docs-tags-scroll-to-8d4.json",606],a94703ab:[()=>Promise.all([n.e(2176),n.e(4666)]).then(n.bind(n,996)),"@theme/DocRoot",996],a951c726:[()=>n.e(8200).then(n.t.bind(n,7976,19)),"~docs/default/tag-docs-tags-ci-cd-ed9.json",7976],abaad534:[()=>n.e(2464).then(n.t.bind(n,4684,19)),"/home/runner/work/ignite-cookbook/ignite-cookbook/.docusaurus/docusaurus-theme-search-algolia/default/plugin-route-context-module-100.json",4684],b33180cb:[()=>n.e(1528).then(n.bind(n,7160)),"@site/docs/archive/PristineExpoProject.md",7160],b3d1732c:[()=>n.e(95).then(n.t.bind(n,2464,19)),"~docs/default/tag-docs-tags-babel-ecc.json",2464],b832b2ff:[()=>n.e(4822).then(n.t.bind(n,2962,19)),"~docs/default/tag-docs-tags-imports-63f.json",2962],b8c37621:[()=>n.e(2372).then(n.t.bind(n,4328,19)),"~docs/default/tag-docs-tags-guide-a32.json",4328],c3e2f4d4:[()=>n.e(1264).then(n.bind(n,5800)),"@site/docs/recipes/UnrenderedItemInScrollView.md",5800],c47fa949:[()=>n.e(5032).then(n.bind(n,8332)),"@site/docs/recipes/ExpoRouter.md",8332],c5abe9fe:[()=>n.e(9607).then(n.t.bind(n,1344,19)),"~docs/default/tag-docs-tags-vision-camera-2ad.json",1344],c5ca3bf3:[()=>n.e(8872).then(n.t.bind(n,872,19)),"~docs/default/tag-docs-tags-expo-router-e61.json",872],c75b21fd:[()=>n.e(1412).then(n.bind(n,6188)),"@site/docs/recipes/RemoveMobxStateTree.md",6188],cc1d3934:[()=>n.e(8500).then(n.bind(n,5220)),"@site/docs/recipes/ReactNativeVisionCamera.md",5220],ccf3150e:[()=>n.e(7600).then(n.t.bind(n,3030,19)),"~docs/default/tag-docs-tags-ui-required-device-capabilities-7ff.json",3030],ce17b301:[()=>n.e(1388).then(n.t.bind(n,1540,19)),"~docs/default/tag-docs-tags-expo-4de.json",1540],cecd52bc:[()=>n.e(8).then(n.bind(n,6040)),"@site/docs/recipes/RequiringHardwareFeaturesWithExpo.md",6040],d01c4de2:[()=>n.e(7224).then(n.t.bind(n,488,19)),"~docs/default/tag-docs-tags-async-storage-da0.json",488],d0e08e4a:[()=>n.e(9016).then(n.bind(n,2980)),"@site/docs/recipes/PatchingBuildingAndroid.md",2980],d63d2b89:[()=>Promise.all([n.e(6432),n.e(5276)]).then(n.bind(n,6960)),"@site/docs/recipes/SelectFieldWithBottomSheet.mdx",6960],d699663a:[()=>n.e(1784).then(n.t.bind(n,5820,19)),"~docs/default/tag-docs-tags-uses-feature-818.json",5820],d6ab422f:[()=>n.e(8762).then(n.bind(n,7748)),"@site/docs/recipes/EnvironmentVariables.md",7748],d7af48b9:[()=>n.e(6264).then(n.bind(n,2508)),"@site/docs/recipes/EnforcingImportOrder.md",2508],da9277bc:[()=>n.e(5856).then(n.bind(n,1188)),"@site/docs/recipes/UpdatingDependencies.md",1188],dce6faa4:[()=>n.e(2596).then(n.t.bind(n,5892,19)),"~docs/default/tag-docs-tags-select-field-e86.json",5892],dd3340a6:[()=>n.e(7572).then(n.bind(n,8508)),"@site/docs/archive/index.md",8508],dec1aed8:[()=>n.e(9144).then(n.t.bind(n,4986,19)),"~docs/default/tag-docs-tags-maestro-a0f.json",4986],df203c0f:[()=>Promise.all([n.e(2176),n.e(3400)]).then(n.bind(n,8614)),"@theme/DocTagDocListPage",8614],e0854532:[()=>n.e(2288).then(n.t.bind(n,2456,19)),"~docs/default/tag-docs-tags-flat-list-bca.json",2456],e1b6b0a8:[()=>n.e(328).then(n.t.bind(n,2984,19)),"~docs/default/tag-docs-tags-debug-69b.json",2984],e2041b9b:[()=>n.e(7164).then(n.t.bind(n,9680,19)),"~docs/default/tag-docs-tags-redux-49b.json",9680],e33e793e:[()=>n.e(5708).then(n.bind(n,3356)),"@site/docs/recipes/Zustand.md",3356],e7928ab4:[()=>n.e(6460).then(n.t.bind(n,2080,19)),"/home/runner/work/ignite-cookbook/ignite-cookbook/.docusaurus/docusaurus-plugin-content-docs/default/plugin-route-context-module-100.json",2080],ecce3b64:[()=>n.e(3324).then(n.t.bind(n,4640,19)),"~docs/default/tag-docs-tags-authentication-9a3.json",4640],f50f3884:[()=>n.e(1236).then(n.t.bind(n,9720,19)),"~docs/default/tag-docs-tags-prebuild-64b.json",9720],f523b160:[()=>n.e(3504).then(n.bind(n,2232)),"@site/docs/recipes/CreatingGreateExperienceForScreenReaders.md",2232],fd1937a7:[()=>n.e(4116).then(n.t.bind(n,7472,19)),"~docs/default/tag-docs-tags-environment-variables-3be.json",7472],fe9b09bf:[()=>n.e(140).then(n.bind(n,1204)),"@site/docs/recipes/CircleCIRNSetup.md",1204],ff2c7cca:[()=>n.e(6252).then(n.t.bind(n,2248,19)),"~docs/default/tag-docs-tags-type-script-6e5.json",2248]};var s=n(7624);function l(e){let{error:t,retry:n,pastDelay:r}=e;return t?(0,s.jsxs)("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"},children:[(0,s.jsx)("p",{children:String(t)}),(0,s.jsx)("div",{children:(0,s.jsx)("button",{type:"button",onClick:n,children:"Retry"})})]}):r?(0,s.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,s.jsx)("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb",children:(0,s.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,s.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,s.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,s.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,s.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,s.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,s.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var c=n(8120),u=n(5548);function d(e,t){if("*"===e)return o()({loading:l,loader:()=>n.e(4552).then(n.bind(n,4552)),modules:["@theme/NotFound"],webpack:()=>[4552],render(e,t){const n=e.default;return(0,s.jsx)(u.Y,{value:{plugin:{name:"native",id:"default"}},children:(0,s.jsx)(n,{...t})})}});const r=a[`${e}-${t}`],d={},p=[],f=[],m=(0,c.c)(r);return Object.entries(m).forEach((e=>{let[t,n]=e;const r=i[n];r&&(d[t]=r[0],p.push(r[1]),f.push(r[2]))})),o().Map({loading:l,loader:d,modules:p,webpack:()=>f,render(t,n){const o=JSON.parse(JSON.stringify(r));Object.entries(t).forEach((t=>{let[n,r]=t;const a=r.default;if(!a)throw new Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);"object"!=typeof a&&"function"!=typeof a||Object.keys(r).filter((e=>"default"!==e)).forEach((e=>{a[e]=r[e]}));let i=o;const s=n.split(".");s.slice(0,-1).forEach((e=>{i=i[e]})),i[s[s.length-1]]=a}));const a=o.__comp;delete o.__comp;const i=o.__context;return delete o.__context,(0,s.jsx)(u.Y,{value:i,children:(0,s.jsx)(a,{...o,...n})})}})}const p=[{path:"/search",component:d("/search","437"),exact:!0},{path:"/docs",component:d("/docs","d53"),routes:[{path:"/docs",component:d("/docs","195"),routes:[{path:"/docs/tags",component:d("/docs/tags","0cc"),exact:!0},{path:"/docs/tags/accessibility",component:d("/docs/tags/accessibility","8aa"),exact:!0},{path:"/docs/tags/android",component:d("/docs/tags/android","e3a"),exact:!0},{path:"/docs/tags/apisauce",component:d("/docs/tags/apisauce","143"),exact:!0},{path:"/docs/tags/archive",component:d("/docs/tags/archive","51b"),exact:!0},{path:"/docs/tags/async-storage",component:d("/docs/tags/async-storage","afc"),exact:!0},{path:"/docs/tags/authentication",component:d("/docs/tags/authentication","587"),exact:!0},{path:"/docs/tags/babel",component:d("/docs/tags/babel","e90"),exact:!0},{path:"/docs/tags/ci-cd",component:d("/docs/tags/ci-cd","56c"),exact:!0},{path:"/docs/tags/cng",component:d("/docs/tags/cng","581"),exact:!0},{path:"/docs/tags/debug",component:d("/docs/tags/debug","888"),exact:!0},{path:"/docs/tags/dependencies",component:d("/docs/tags/dependencies","c34"),exact:!0},{path:"/docs/tags/eas",component:d("/docs/tags/eas","17a"),exact:!0},{path:"/docs/tags/eas-update",component:d("/docs/tags/eas-update","632"),exact:!0},{path:"/docs/tags/environment-variables",component:d("/docs/tags/environment-variables","0f3"),exact:!0},{path:"/docs/tags/expo",component:d("/docs/tags/expo","a41"),exact:!0},{path:"/docs/tags/expo-dev-client",component:d("/docs/tags/expo-dev-client","0df"),exact:!0},{path:"/docs/tags/expo-router",component:d("/docs/tags/expo-router","257"),exact:!0},{path:"/docs/tags/expo-updates",component:d("/docs/tags/expo-updates","807"),exact:!0},{path:"/docs/tags/flat-list",component:d("/docs/tags/flat-list","5a7"),exact:!0},{path:"/docs/tags/generator",component:d("/docs/tags/generator","80e"),exact:!0},{path:"/docs/tags/guide",component:d("/docs/tags/guide","cea"),exact:!0},{path:"/docs/tags/hardware",component:d("/docs/tags/hardware","303"),exact:!0},{path:"/docs/tags/i-os",component:d("/docs/tags/i-os","96e"),exact:!0},{path:"/docs/tags/imports",component:d("/docs/tags/imports","887"),exact:!0},{path:"/docs/tags/intro",component:d("/docs/tags/intro","b42"),exact:!0},{path:"/docs/tags/maestro",component:d("/docs/tags/maestro","034"),exact:!0},{path:"/docs/tags/mmkv",component:d("/docs/tags/mmkv","f7e"),exact:!0},{path:"/docs/tags/mob-x",component:d("/docs/tags/mob-x","a01"),exact:!0},{path:"/docs/tags/prebuild",component:d("/docs/tags/prebuild","83d"),exact:!0},{path:"/docs/tags/prettier",component:d("/docs/tags/prettier","db7"),exact:!0},{path:"/docs/tags/react-native-vision-camera",component:d("/docs/tags/react-native-vision-camera","ea0"),exact:!0},{path:"/docs/tags/react-navigation",component:d("/docs/tags/react-navigation","0ad"),exact:!0},{path:"/docs/tags/redux",component:d("/docs/tags/redux","c5e"),exact:!0},{path:"/docs/tags/scroll-to",component:d("/docs/tags/scroll-to","f32"),exact:!0},{path:"/docs/tags/section-list",component:d("/docs/tags/section-list","8de"),exact:!0},{path:"/docs/tags/select-field",component:d("/docs/tags/select-field","5f4"),exact:!0},{path:"/docs/tags/state-management",component:d("/docs/tags/state-management","181"),exact:!0},{path:"/docs/tags/testing",component:d("/docs/tags/testing","b53"),exact:!0},{path:"/docs/tags/text-field",component:d("/docs/tags/text-field","782"),exact:!0},{path:"/docs/tags/type-script",component:d("/docs/tags/type-script","825"),exact:!0},{path:"/docs/tags/ui",component:d("/docs/tags/ui","020"),exact:!0},{path:"/docs/tags/ui-required-device-capabilities",component:d("/docs/tags/ui-required-device-capabilities","73a"),exact:!0},{path:"/docs/tags/uses-feature",component:d("/docs/tags/uses-feature","f1a"),exact:!0},{path:"/docs/tags/vision-camera",component:d("/docs/tags/vision-camera","e9b"),exact:!0},{path:"/docs/tags/yarn",component:d("/docs/tags/yarn","e4e"),exact:!0},{path:"/docs/tags/zustand",component:d("/docs/tags/zustand","24d"),exact:!0},{path:"/docs",component:d("/docs","05b"),routes:[{path:"/docs/archive/",component:d("/docs/archive/","ab8"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/archive/PristineExpoProject",component:d("/docs/archive/PristineExpoProject","afa"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/intro",component:d("/docs/intro","194"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/AccessibilityFontSizes",component:d("/docs/recipes/AccessibilityFontSizes","872"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/CircleCIRNSetup",component:d("/docs/recipes/CircleCIRNSetup","ce2"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/CreatingGreateExperienceForScreenReaders",component:d("/docs/recipes/CreatingGreateExperienceForScreenReaders","752"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/DetoxIntro",component:d("/docs/recipes/DetoxIntro","700"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/DistributingAuthTokenToAPI",component:d("/docs/recipes/DistributingAuthTokenToAPI","298"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/EASUpdate",component:d("/docs/recipes/EASUpdate","938"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/EnforcingImportOrder",component:d("/docs/recipes/EnforcingImportOrder","713"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/EnvironmentVariables",component:d("/docs/recipes/EnvironmentVariables","92b"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/ExpoRouter",component:d("/docs/recipes/ExpoRouter","0b5"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/GeneratorComponentTests",component:d("/docs/recipes/GeneratorComponentTests","e55"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/MaestroSetup",component:d("/docs/recipes/MaestroSetup","237"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/MigratingToMMKV",component:d("/docs/recipes/MigratingToMMKV","9d0"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/PatchingBuildingAndroid",component:d("/docs/recipes/PatchingBuildingAndroid","ac8"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/PrepForEASBuild",component:d("/docs/recipes/PrepForEASBuild","64a"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/ReactNativeVisionCamera",component:d("/docs/recipes/ReactNativeVisionCamera","e2e"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/Redux",component:d("/docs/recipes/Redux","0f8"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/RemoveMobxStateTree",component:d("/docs/recipes/RemoveMobxStateTree","50f"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/RequiringHardwareFeaturesWithExpo",component:d("/docs/recipes/RequiringHardwareFeaturesWithExpo","2fd"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/SampleYAMLCircleCI",component:d("/docs/recipes/SampleYAMLCircleCI","30a"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/SelectFieldWithBottomSheet",component:d("/docs/recipes/SelectFieldWithBottomSheet","ca3"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/SwitchBetweenExpoGoCNG",component:d("/docs/recipes/SwitchBetweenExpoGoCNG","695"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/TypeScriptBaseURL",component:d("/docs/recipes/TypeScriptBaseURL","986"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/UnrenderedItemInScrollView",component:d("/docs/recipes/UnrenderedItemInScrollView","c15"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/UpdatingDependencies",component:d("/docs/recipes/UpdatingDependencies","21c"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/UpdatingIgnite",component:d("/docs/recipes/UpdatingIgnite","f0c"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/UsingScreenReaders",component:d("/docs/recipes/UsingScreenReaders","324"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/Zustand",component:d("/docs/recipes/Zustand","0e1"),exact:!0,sidebar:"mainSidebar"}]}]}]},{path:"/",component:d("/","703"),exact:!0},{path:"*",component:d("*")}]},240:(e,t,n)=>{"use strict";n.d(t,{e:()=>a,g:()=>i});var r=n(1504),o=n(7624);const a=r.createContext(!1);function i(e){let{children:t}=e;const[n,i]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{i(!0)}),[]),(0,o.jsx)(a.Provider,{value:n,children:t})}},8808:(e,t,n)=>{"use strict";var r=n(1504),o=n(8352),a=n(440),i=n(2160),s=n(8684);const l=[n(7483),n(1462),n(5396),n(1976),n(9115)];var c=n(628),u=n(5592),d=n(5464),p=n(7624);function f(e){let{children:t}=e;return(0,p.jsx)(p.Fragment,{children:t})}var m=n(6952),g=n(8264),h=n(964),y=n(1824),b=n(5008),v=n(1616),S=n(204),w=n(4456),x=n(5684),k=n(8712);function E(){const{i18n:{currentLocale:e,defaultLocale:t,localeConfigs:n}}=(0,g.c)(),r=(0,v.D)(),o=n[e].htmlLang,a=e=>e.replace("-","_");return(0,p.jsxs)(m.c,{children:[Object.entries(n).map((e=>{let[t,{htmlLang:n}]=e;return(0,p.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:n},t)})),(0,p.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:"x-default"}),(0,p.jsx)("meta",{property:"og:locale",content:a(o)}),Object.values(n).filter((e=>o!==e.htmlLang)).map((e=>(0,p.jsx)("meta",{property:"og:locale:alternate",content:a(e.htmlLang)},`meta-og-${e.htmlLang}`)))]})}function T(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,g.c)(),r=function(){const{siteConfig:{url:e,baseUrl:t,trailingSlash:n}}=(0,g.c)(),{pathname:r}=(0,u.IT)();return e+(0,x.applyTrailingSlash)((0,h.c)(r),{trailingSlash:n,baseUrl:t})}(),o=t?`${n}${t}`:r;return(0,p.jsxs)(m.c,{children:[(0,p.jsx)("meta",{property:"og:url",content:o}),(0,p.jsx)("link",{rel:"canonical",href:o})]})}function C(){const{i18n:{currentLocale:e}}=(0,g.c)(),{metadata:t,image:n}=(0,y.y)();return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsxs)(m.c,{children:[(0,p.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,p.jsx)("body",{className:S.m})]}),n&&(0,p.jsx)(b.U7,{image:n}),(0,p.jsx)(T,{}),(0,p.jsx)(E,{}),(0,p.jsx)(k.c,{tag:w.e6,locale:e}),(0,p.jsx)(m.c,{children:t.map(((e,t)=>(0,p.jsx)("meta",{...e},t)))})]})}const _=new Map;function A(e){if(_.has(e.pathname))return{...e,pathname:_.get(e.pathname)};if((0,d.C)(c.c,e.pathname).some((e=>{let{route:t}=e;return!0===t.exact})))return _.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return _.set(e.pathname,t),{...e,pathname:t}}var I=n(240),R=n(136),P=n(5288);function L(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r{const r=t.default?.[e]??t[e];return r?.(...n)}));return()=>o.forEach((e=>e?.()))}const N=function(e){let{children:t,location:n,previousLocation:r}=e;return(0,P.c)((()=>{r!==n&&(!function(e){let{location:t,previousLocation:n}=e;if(!n)return;const r=t.pathname===n.pathname,o=t.hash===n.hash,a=t.search===n.search;if(r&&o&&!a)return;const{hash:i}=t;if(i){const e=decodeURIComponent(i.substring(1)),t=document.getElementById(e);t?.scrollIntoView()}else window.scrollTo(0,0)}({location:n,previousLocation:r}),L("onRouteDidUpdate",{previousLocation:r,location:n}))}),[r,n]),t};function F(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,d.C)(c.c,e))).flat();return Promise.all(t.map((e=>e.route.component.preload?.())))}class O extends r.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=s.c.canUseDOM?L("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=L("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),F(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return(0,p.jsx)(N,{previousLocation:this.previousLocation,location:t,children:(0,p.jsx)(u.kX,{location:t,render:()=>e})})}}const j=O,M="__docusaurus-base-url-issue-banner-container",D="__docusaurus-base-url-issue-banner",B="__docusaurus-base-url-issue-banner-suggestion-container";function $(e){return`\ndocument.addEventListener('DOMContentLoaded', function maybeInsertBanner() {\n var shouldInsert = typeof window['docusaurus'] === 'undefined';\n shouldInsert && insertBanner();\n});\n\nfunction insertBanner() {\n var bannerContainer = document.createElement('div');\n bannerContainer.id = '${M}';\n var bannerHtml = ${JSON.stringify(function(e){return`\n\n
Your Docusaurus site did not load properly.
\n
A very common reason is a wrong site baseUrl configuration.
\n
Current configured baseUrl = ${e} ${"/"===e?" (default value)":""}
\n
We suggest trying baseUrl =
\n
Recipes
'},{position:"right",html:'Ignite Boilerplate
',to:"https://github.com/infinitered/ignite"},{position:"right",html:'Infinite Red
',to:"https://infinite.red"},{style:{marginRight:"0px"},type:"dropdown",html:' \n Community\n
\n
\n
\n Slack community\n
\n
\n
\n
Join a growing React Native community with 2,000 developers and counting.
\n
\n
\n
\n Submit an idea\n
\n
\n
\n
Have an recipe idea for the cookbook? Contribute your ideas on GitHub!
\n
\n
',style:"dark",links:[{title:"Community",items:[{html:''},{html:''},{html:''}]},{title:"Resources",items:[{html:''},{html:''},{html:''},{html:''},{html:''}]},{title:"Infinite Red",items:[{html:''},{html:''},{html:''}]}]},prism:{theme:{plain:{color:"#393A34",backgroundColor:"#f6f8fa"},styles:[{types:["comment","prolog","doctype","cdata"],style:{color:"#999988",fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}},{types:["string","attr-value"],style:{color:"#e3116c"}},{types:["punctuation","operator"],style:{color:"#393A34"}},{types:["entity","url","symbol","number","boolean","variable","constant","property","regex","inserted"],style:{color:"#36acaa"}},{types:["atrule","keyword","attr-name","selector"],style:{color:"#00a4db"}},{types:["function","deleted","tag"],style:{color:"#d73a49"}},{types:["function-variable"],style:{color:"#6f42c1"}},{types:["tag","selector","keyword"],style:{color:"#00009f"}}]},darkTheme:{plain:{color:"#F8F8F2",backgroundColor:"#282A36"},styles:[{types:["prolog","constant","builtin"],style:{color:"rgb(189, 147, 249)"}},{types:["inserted","function"],style:{color:"rgb(80, 250, 123)"}},{types:["deleted"],style:{color:"rgb(255, 85, 85)"}},{types:["changed"],style:{color:"rgb(255, 184, 108)"}},{types:["punctuation","symbol"],style:{color:"rgb(248, 248, 242)"}},{types:["string","char","tag","selector"],style:{color:"rgb(255, 121, 198)"}},{types:["keyword","variable"],style:{color:"rgb(189, 147, 249)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(98, 114, 164)"}},{types:["attr-name"],style:{color:"rgb(241, 250, 140)"}}]},additionalLanguages:["bash","ruby","json","ejs","diff","markup-templating"],magicComments:[{className:"theme-code-block-highlighted-line",line:"highlight-next-line",block:{start:"highlight-start",end:"highlight-end"}},{className:"code-block-error-line",line:"error-line",block:{start:"error-line-start",end:"error-line-end"}},{className:"code-block-success-line",line:"success-line",block:{start:"success-line-start",end:"success-line-end"}}]},algolia:{appId:"MFHD60DIB5",apiKey:"4e924e740d603ec90f106067754ccf50",indexName:"ignite-cookbook",searchParameters:{},searchPagePath:"search",contextualSearch:!0},docs:{versionPersistence:"localStorage",sidebar:{hideable:!1,autoCollapseCategories:!1}},metadata:[],tableOfContents:{minHeadingLevel:2,maxHeadingLevel:3}},baseUrlIssueBanner:!0,onBrokenAnchors:"warn",onDuplicateRoutes:"warn",staticDirectories:["static"],customFields:{},themes:[],scripts:[],headTags:[],stylesheets:[],clientModules:[],titleDelimiter:"|",noIndex:!1,markdown:{format:"mdx",mermaid:!1,mdx1Compat:{comments:!0,admonitions:!0,headingIds:!0}}}},6404:(e,t,n)=>{"use strict";function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;tr})},9948:(e,t,n)=>{"use strict";function r(e,t){return r=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},r(e,t)}function o(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,r(e,t)}n.d(t,{c:()=>o})},4384:(e,t,n)=>{"use strict";function r(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}n.d(t,{c:()=>r})},5456:(e,t,n)=>{"use strict";function r(e){var t,n,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e)){var a=e.length;for(t=0;to});const o=function(){for(var e,t,n=0,o="",a=arguments.length;n{"use strict";n.d(t,{gl:()=>ee,sp:()=>_});var r,o,a,i,s,l,c,u=n(1504),d=n(5456),p=Object.create,f=Object.defineProperty,m=Object.defineProperties,g=Object.getOwnPropertyDescriptor,h=Object.getOwnPropertyDescriptors,y=Object.getOwnPropertyNames,b=Object.getOwnPropertySymbols,v=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable,x=(e,t,n)=>t in e?f(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,k=(e,t)=>{for(var n in t||(t={}))S.call(t,n)&&x(e,n,t[n]);if(b)for(var n of b(t))w.call(t,n)&&x(e,n,t[n]);return e},E=(e,t)=>m(e,h(t)),T=(e,t)=>{var n={};for(var r in e)S.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&b)for(var r of b(e))t.indexOf(r)<0&&w.call(e,r)&&(n[r]=e[r]);return n},C=(r={"../../node_modules/.pnpm/prismjs@1.29.0_patch_hash=vrxx3pzkik6jpmgpayxfjunetu/node_modules/prismjs/prism.js"(e,t){var n=function(){var e=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,n={},r={util:{encode:function e(t){return t instanceof o?new o(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&").replace(/=d.reach);k+=x.value.length,x=x.next){var E=x.value;if(t.length>e.length)return;if(!(E instanceof o)){var T,C=1;if(b){if(!(T=a(w,k,e,y))||T.index>=e.length)break;var _=T.index,A=T.index+T[0].length,I=k;for(I+=x.value.length;_>=I;)I+=(x=x.next).value.length;if(k=I-=x.value.length,x.value instanceof o)continue;for(var R=x;R!==t.tail&&(Id.reach&&(d.reach=F);var O=x.prev;if(L&&(O=l(t,O,L),k+=L.length),c(t,O,C),x=l(t,O,new o(p,h?r.tokenize(P,h):P,v,P)),N&&l(t,x,N),C>1){var j={cause:p+","+m,reach:F};i(e,t,n,x.prev,k,j),d&&j.reach>d.reach&&(d.reach=j.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function l(e,t,n){var r=t.next,o={value:n,prev:t,next:r};return t.next=o,r.prev=o,e.length++,o}function c(e,t,n){for(var r=t.next,o=0;o"+a.content+""},r}();t.exports=n,n.default=n}},function(){return o||(0,r[y(r)[0]])((o={exports:{}}).exports,o),o.exports}),_=((e,t,n)=>(n=null!=e?p(v(e)):{},((e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let o of y(t))S.call(e,o)||o===n||f(e,o,{get:()=>t[o],enumerable:!(r=g(t,o))||r.enumerable});return e})(!t&&e&&e.__esModule?n:f(n,"default",{value:e,enumerable:!0}),e)))(C());_.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},_.languages.markup.tag.inside["attr-value"].inside.entity=_.languages.markup.entity,_.languages.markup.doctype.inside["internal-subset"].inside=_.languages.markup,_.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))})),Object.defineProperty(_.languages.markup.tag,"addInlined",{value:function(e,t){var n;(t=((n=((n={})["language-"+t]={pattern:/(^$)/i,lookbehind:!0,inside:_.languages[t]},n.cdata=/^$/i,{"included-cdata":{pattern://i,inside:n}}))["language-"+t]={pattern:/[\s\S]+/,inside:_.languages[t]},{}))[e]={pattern:RegExp(/(<__[^>]*>)(?:))*\]\]>|(?!)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:n},_.languages.insertBefore("markup","cdata",t)}}),Object.defineProperty(_.languages.markup.tag,"addAttribute",{value:function(e,t){_.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[t,"language-"+t],inside:_.languages[t]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),_.languages.html=_.languages.markup,_.languages.mathml=_.languages.markup,_.languages.svg=_.languages.markup,_.languages.xml=_.languages.extend("markup",{}),_.languages.ssml=_.languages.xml,_.languages.atom=_.languages.xml,_.languages.rss=_.languages.xml,a=_,i={pattern:/\\[\\(){}[\]^$+*?|.]/,alias:"escape"},l="(?:[^\\\\-]|"+(s=/\\(?:x[\da-fA-F]{2}|u[\da-fA-F]{4}|u\{[\da-fA-F]+\}|0[0-7]{0,2}|[123][0-7]{2}|c[a-zA-Z]|.)/).source+")",l=RegExp(l+"-"+l),c={pattern:/(<|')[^<>']+(?=[>']$)/,lookbehind:!0,alias:"variable"},a.languages.regex={"char-class":{pattern:/((?:^|[^\\])(?:\\\\)*)\[(?:[^\\\]]|\\[\s\S])*\]/,lookbehind:!0,inside:{"char-class-negation":{pattern:/(^\[)\^/,lookbehind:!0,alias:"operator"},"char-class-punctuation":{pattern:/^\[|\]$/,alias:"punctuation"},range:{pattern:l,inside:{escape:s,"range-punctuation":{pattern:/-/,alias:"operator"}}},"special-escape":i,"char-set":{pattern:/\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},escape:s}},"special-escape":i,"char-set":{pattern:/\.|\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},backreference:[{pattern:/\\(?![123][0-7]{2})[1-9]/,alias:"keyword"},{pattern:/\\k<[^<>']+>/,alias:"keyword",inside:{"group-name":c}}],anchor:{pattern:/[$^]|\\[ABbGZz]/,alias:"function"},escape:s,group:[{pattern:/\((?:\?(?:<[^<>']+>|'[^<>']+'|[>:]|]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},_.languages.javascript=_.languages.extend("clike",{"class-name":[_.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|"+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),_.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,_.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp(/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)/.source+/\//.source+"(?:"+/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}/.source+"|"+/(?:\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.)*\])*\])*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}v[dgimyus]{0,7}/.source+")"+/(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/.source),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:_.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:_.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:_.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:_.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:_.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),_.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:_.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),_.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),_.languages.markup&&(_.languages.markup.tag.addInlined("script","javascript"),_.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),_.languages.js=_.languages.javascript,_.languages.actionscript=_.languages.extend("javascript",{keyword:/\b(?:as|break|case|catch|class|const|default|delete|do|dynamic|each|else|extends|final|finally|for|function|get|if|implements|import|in|include|instanceof|interface|internal|is|namespace|native|new|null|override|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|use|var|void|while|with)\b/,operator:/\+\+|--|(?:[+\-*\/%^]|&&?|\|\|?|<>?>?|[!=]=?)=?|[~?@]/}),_.languages.actionscript["class-name"].alias="function",delete _.languages.actionscript.parameter,delete _.languages.actionscript["literal-property"],_.languages.markup&&_.languages.insertBefore("actionscript","string",{xml:{pattern:/(^|[^.])<\/?\w+(?:\s+[^\s>\/=]+=("|')(?:\\[\s\S]|(?!\2)[^\\])*\2)*\s*\/?>/,lookbehind:!0,inside:_.languages.markup}}),function(e){var t=/#(?!\{).+/,n={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:t,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:n}}],keyword:/\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,"class-member":{pattern:/@(?!\d)\w+/,alias:"variable"}}),e.languages.insertBefore("coffeescript","comment",{"multiline-comment":{pattern:/###[\s\S]+?###/,alias:"comment"},"block-regex":{pattern:/\/{3}[\s\S]*?\/{3}/,alias:"regex",inside:{comment:t,interpolation:n}}}),e.languages.insertBefore("coffeescript","string",{"inline-javascript":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,inside:{delimiter:{pattern:/^`|`$/,alias:"punctuation"},script:{pattern:/[\s\S]+/,alias:"language-javascript",inside:e.languages.javascript}}},"multiline-string":[{pattern:/'''[\s\S]*?'''/,greedy:!0,alias:"string"},{pattern:/"""[\s\S]*?"""/,greedy:!0,alias:"string",inside:{interpolation:n}}]}),e.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete e.languages.coffeescript["template-string"],e.languages.coffee=e.languages.coffeescript}(_),function(e){var t=e.languages.javadoclike={parameter:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*@(?:arg|arguments|param)\s+)\w+/m,lookbehind:!0},keyword:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*|\{)@[a-z][a-zA-Z-]+\b/m,lookbehind:!0},punctuation:/[{}]/};Object.defineProperty(t,"addSupport",{value:function(t,n){(t="string"==typeof t?[t]:t).forEach((function(t){var r=function(e){e.inside||(e.inside={}),e.inside.rest=n},o="doc-comment";if(a=e.languages[t]){var a,i=a[o];if((i=i||(a=e.languages.insertBefore(t,"comment",{"doc-comment":{pattern:/(^|[^\\])\/\*\*[^/][\s\S]*?(?:\*\/|$)/,lookbehind:!0,alias:"comment"}}))[o])instanceof RegExp&&(i=a[o]={pattern:i}),Array.isArray(i))for(var s=0,l=i.length;s|\+|~|\|\|/,punctuation:/[(),]/}},e.languages.css.atrule.inside["selector-function-argument"].inside=t,e.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*/i,lookbehind:!0}}),{pattern:/(\b\d+)(?:%|[a-z]+(?![\w-]))/,lookbehind:!0}),{pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0});e.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:{pattern:/\B#[\da-f]{3,8}\b/i,alias:"color"},color:[{pattern:/(^|[^\w-])(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|RebeccaPurple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)(?![\w-])/i,lookbehind:!0},{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:t,number:n,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:t,number:n})}(_),function(e){var t=/[*&][^\s[\]{},]+/,n=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,r="(?:"+n.source+"(?:[ \t]+"+t.source+")?|"+t.source+"(?:[ \t]+"+n.source+")?)",o=/(?:[^\s\x00-\x08\x0e-\x1f!"#%&'*,\-:>?@[\]`{|}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]|[?:-])(?:[ \t]*(?:(?![#:])|:))*/.source.replace(//g,(function(){return/[^\s\x00-\x08\x0e-\x1f,[\]{}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]/.source})),a=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function i(e,t){t=(t||"").replace(/m/g,"")+"m";var n=/([:\-,[{]\s*(?:\s<>[ \t]+)?)(?:<>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<>/g,(function(){return r})).replace(/<>/g,(function(){return e}));return RegExp(n,t)}e.languages.yaml={scalar:{pattern:RegExp(/([\-:]\s*(?:\s<>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\S[^\r\n]*(?:\2[^\r\n]+)*)/.source.replace(/<>/g,(function(){return r}))),lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:RegExp(/((?:^|[:\-,[{\r\n?])[ \t]*(?:<>[ \t]+)?)<>(?=\s*:\s)/.source.replace(/<>/g,(function(){return r})).replace(/<>/g,(function(){return"(?:"+o+"|"+a+")"}))),lookbehind:!0,greedy:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:i(/\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/.source),lookbehind:!0,alias:"number"},boolean:{pattern:i(/false|true/.source,"i"),lookbehind:!0,alias:"important"},null:{pattern:i(/null|~/.source,"i"),lookbehind:!0,alias:"important"},string:{pattern:i(a),lookbehind:!0,greedy:!0},number:{pattern:i(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source,"i"),lookbehind:!0},tag:n,important:t,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(_),function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function n(e){return e=e.replace(//g,(function(){return t})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var r=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,o=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return r})),a=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source,i=(e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"front-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+o+a+"(?:"+o+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+o+a+")(?:"+o+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(r),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+o+")"+a+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+o+"$"),inside:{"table-header":{pattern:RegExp(r),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/\b__(?:(?!_)|_(?:(?!_))+_)+__\b|\*\*(?:(?!\*)|\*(?:(?!\*))+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/\b_(?:(?!_)|__(?:(?!_))+__)+_\b|\*(?:(?!\*)|\*\*(?:(?!\*))+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~))+\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},"code-snippet":{pattern:/(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,lookbehind:!0,greedy:!0,alias:["code","keyword"]},url:{pattern:n(/!?\[(?:(?!\]))+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\]))+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach((function(t){["url","bold","italic","strike","code-snippet"].forEach((function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var n=0,r=t.length;n",quot:'"'},l=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(_),_.languages.graphql={comment:/#.*/,description:{pattern:/(?:"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*")(?=\s*[a-z_])/i,greedy:!0,alias:"string",inside:{"language-markdown":{pattern:/(^"(?:"")?)(?!\1)[\s\S]+(?=\1$)/,lookbehind:!0,inside:_.languages.markdown}}},string:{pattern:/"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*"/,greedy:!0},number:/(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,boolean:/\b(?:false|true)\b/,variable:/\$[a-z_]\w*/i,directive:{pattern:/@[a-z_]\w*/i,alias:"function"},"attr-name":{pattern:/\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,greedy:!0},"atom-input":{pattern:/\b[A-Z]\w*Input\b/,alias:"class-name"},scalar:/\b(?:Boolean|Float|ID|Int|String)\b/,constant:/\b[A-Z][A-Z_\d]*\b/,"class-name":{pattern:/(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*|:\s*|\[)[A-Z_]\w*/,lookbehind:!0},fragment:{pattern:/(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-mutation":{pattern:/(\bmutation\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-query":{pattern:/(\bquery\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},keyword:/\b(?:directive|enum|extend|fragment|implements|input|interface|mutation|on|query|repeatable|scalar|schema|subscription|type|union)\b/,operator:/[!=|&]|\.{3}/,"property-query":/\w+(?=\s*\()/,object:/\w+(?=\s*\{)/,punctuation:/[!(){}\[\]:=,]/,property:/\w+/},_.hooks.add("after-tokenize",(function(e){if("graphql"===e.language)for(var t=e.tokens.filter((function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type})),n=0;n?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var t=e.languages.javascript["template-string"],n=t.pattern.source,r=t.inside.interpolation,o=r.inside["interpolation-punctuation"],a=r.pattern.source;function i(t,r){if(e.languages[t])return{pattern:RegExp("((?:"+r+")\\s*)"+n),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:t}}}}function s(t,n,r){return t={code:t,grammar:n,language:r},e.hooks.run("before-tokenize",t),t.tokens=e.tokenize(t.code,t.grammar),e.hooks.run("after-tokenize",t),t.tokens}function l(t,n,i){var l=e.tokenize(t,{interpolation:{pattern:RegExp(a),lookbehind:!0}}),c=0,u={},d=(l=s(l.map((function(e){if("string"==typeof e)return e;var n,r;for(e=e.content;-1!==t.indexOf((r=c++,n="___"+i.toUpperCase()+"_"+r+"___")););return u[n]=e,n})).join(""),n,i),Object.keys(u));return c=0,function t(n){for(var a=0;a=d.length)return;var i,l,p,f,m,g,h,y=n[a];"string"==typeof y||"string"==typeof y.content?(i=d[c],-1!==(h=(g="string"==typeof y?y:y.content).indexOf(i))&&(++c,l=g.substring(0,h),m=u[i],p=void 0,(f={})["interpolation-punctuation"]=o,3===(f=e.tokenize(m,f)).length&&((p=[1,1]).push.apply(p,s(f[1],e.languages.javascript,"javascript")),f.splice.apply(f,p)),p=new e.Token("interpolation",f,r.alias,m),f=g.substring(h+i.length),m=[],l&&m.push(l),m.push(p),f&&(t(g=[f]),m.push.apply(m,g)),"string"==typeof y?(n.splice.apply(n,[a,1].concat(m)),a+=m.length-1):y.content=m)):(h=y.content,Array.isArray(h)?t(h):t([h]))}}(l),new e.Token(i,l,"language-"+i,t)}e.languages.javascript["template-string"]=[i("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),i("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),i("svg",/\bsvg/.source),i("markdown",/\b(?:markdown|md)/.source),i("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),i("sql",/\bsql/.source),t].filter(Boolean);var c={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};function u(e){return"string"==typeof e?e:Array.isArray(e)?e.map(u).join(""):u(e.content)}e.hooks.add("after-tokenize",(function(t){t.language in c&&function t(n){for(var r=0,o=n.length;r]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var t=e.languages.extend("typescript",{});delete t["class-name"],e.languages.typescript["class-name"].inside=t,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:t}}}}),e.languages.ts=e.languages.typescript}(_),function(e){var t=e.languages.javascript,n=/\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})+\}/.source,r="(@(?:arg|argument|param|property)\\s+(?:"+n+"\\s+)?)";e.languages.jsdoc=e.languages.extend("javadoclike",{parameter:{pattern:RegExp(r+/(?:(?!\s)[$\w\xA0-\uFFFF.])+(?=\s|$)/.source),lookbehind:!0,inside:{punctuation:/\./}}}),e.languages.insertBefore("jsdoc","keyword",{"optional-parameter":{pattern:RegExp(r+/\[(?:(?!\s)[$\w\xA0-\uFFFF.])+(?:=[^[\]]+)?\](?=\s|$)/.source),lookbehind:!0,inside:{parameter:{pattern:/(^\[)[$\w\xA0-\uFFFF\.]+/,lookbehind:!0,inside:{punctuation:/\./}},code:{pattern:/(=)[\s\S]*(?=\]$)/,lookbehind:!0,inside:t,alias:"language-javascript"},punctuation:/[=[\]]/}},"class-name":[{pattern:RegExp(/(@(?:augments|class|extends|interface|memberof!?|template|this|typedef)\s+(?:\s+)?)[A-Z]\w*(?:\.[A-Z]\w*)*/.source.replace(//g,(function(){return n}))),lookbehind:!0,inside:{punctuation:/\./}},{pattern:RegExp("(@[a-z]+\\s+)"+n),lookbehind:!0,inside:{string:t.string,number:t.number,boolean:t.boolean,keyword:e.languages.typescript.keyword,operator:/=>|\.\.\.|[&|?:*]/,punctuation:/[.,;=<>{}()[\]]/}}],example:{pattern:/(@example\s+(?!\s))(?:[^@\s]|\s+(?!\s))+?(?=\s*(?:\*\s*)?(?:@\w|\*\/))/,lookbehind:!0,inside:{code:{pattern:/^([\t ]*(?:\*\s*)?)\S.*$/m,lookbehind:!0,inside:t,alias:"language-javascript"}}}}),e.languages.javadoclike.addSupport("javascript",e.languages.jsdoc)}(_),function(e){e.languages.flow=e.languages.extend("javascript",{}),e.languages.insertBefore("flow","keyword",{type:[{pattern:/\b(?:[Bb]oolean|Function|[Nn]umber|[Ss]tring|[Ss]ymbol|any|mixed|null|void)\b/,alias:"class-name"}]}),e.languages.flow["function-variable"].pattern=/(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=\s*(?:function\b|(?:\([^()]*\)(?:\s*:\s*\w+)?|(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/i,delete e.languages.flow.parameter,e.languages.insertBefore("flow","operator",{"flow-punctuation":{pattern:/\{\||\|\}/,alias:"punctuation"}}),Array.isArray(e.languages.flow.keyword)||(e.languages.flow.keyword=[e.languages.flow.keyword]),e.languages.flow.keyword.unshift({pattern:/(^|[^$]\b)(?:Class|declare|opaque|type)\b(?!\$)/,lookbehind:!0},{pattern:/(^|[^$]\B)\$(?:Diff|Enum|Exact|Keys|ObjMap|PropertyType|Record|Shape|Subtype|Supertype|await)\b(?!\$)/,lookbehind:!0})}(_),_.languages.n4js=_.languages.extend("javascript",{keyword:/\b(?:Array|any|boolean|break|case|catch|class|const|constructor|continue|debugger|declare|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|module|new|null|number|package|private|protected|public|return|set|static|string|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/}),_.languages.insertBefore("n4js","constant",{annotation:{pattern:/@+\w+/,alias:"operator"}}),_.languages.n4jsd=_.languages.n4js,function(e){function t(e,t){return RegExp(e.replace(//g,(function(){return/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source})),t)}e.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+e.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),e.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+e.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),e.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),e.languages.insertBefore("javascript","keyword",{imports:{pattern:t(/(\bimport\b\s*)(?:(?:\s*,\s*(?:\*\s*as\s+|\{[^{}]*\}))?|\*\s*as\s+|\{[^{}]*\})(?=\s*\bfrom\b)/.source),lookbehind:!0,inside:e.languages.javascript},exports:{pattern:t(/(\bexport\b\s*)(?:\*(?:\s*as\s+)?(?=\s*\bfrom\b)|\{[^{}]*\})/.source),lookbehind:!0,inside:e.languages.javascript}}),e.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,alias:"control-flow"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),e.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),e.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:t(/(\.\s*)#?/.source),lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var n=["function","function-variable","method","method-variable","property-access"],r=0;r*\.{3}(?:[^{}]|)*\})/.source;function a(e,t){return e=e.replace(//g,(function(){return n})).replace(//g,(function(){return r})).replace(//g,(function(){return o})),RegExp(e,t)}function i(t){for(var n=[],r=0;r"!==o.content[o.content.length-1].content&&n.push({tagName:s(o.content[0].content[1]),openedBraces:0}):0+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|))?|))**\/?)?>/.source),e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.jsx.tag.inside.comment=t.comment,e.languages.insertBefore("inside","attr-name",{spread:{pattern:a(//.source),inside:e.languages.jsx}},e.languages.jsx.tag),e.languages.insertBefore("inside","special-attr",{script:{pattern:a(/=/.source),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:e.languages.jsx}}},e.languages.jsx.tag);var s=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(s).join(""):""};e.hooks.add("after-tokenize",(function(e){"jsx"!==e.language&&"tsx"!==e.language||i(e.tokens)}))}(_),function(e){var t=e.util.clone(e.languages.typescript);(t=(e.languages.tsx=e.languages.extend("jsx",t),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"],e.languages.tsx.tag)).pattern=RegExp(/(^|[^\w$]|(?=<\/))/.source+"(?:"+t.pattern.source+")",t.pattern.flags),t.lookbehind=!0}(_),_.languages.swift={comment:{pattern:/(^|[^\\:])(?:\/\/.*|\/\*(?:[^/*]|\/(?!\*)|\*(?!\/)|\/\*(?:[^*]|\*(?!\/))*\*\/)*\*\/)/,lookbehind:!0,greedy:!0},"string-literal":[{pattern:RegExp(/(^|[^"#])/.source+"(?:"+/"(?:\\(?:\((?:[^()]|\([^()]*\))*\)|\r\n|[^(])|[^\\\r\n"])*"/.source+"|"+/"""(?:\\(?:\((?:[^()]|\([^()]*\))*\)|[^(])|[^\\"]|"(?!""))*"""/.source+")"+/(?!["#])/.source),lookbehind:!0,greedy:!0,inside:{interpolation:{pattern:/(\\\()(?:[^()]|\([^()]*\))*(?=\))/,lookbehind:!0,inside:null},"interpolation-punctuation":{pattern:/^\)|\\\($/,alias:"punctuation"},punctuation:/\\(?=[\r\n])/,string:/[\s\S]+/}},{pattern:RegExp(/(^|[^"#])(#+)/.source+"(?:"+/"(?:\\(?:#+\((?:[^()]|\([^()]*\))*\)|\r\n|[^#])|[^\\\r\n])*?"/.source+"|"+/"""(?:\\(?:#+\((?:[^()]|\([^()]*\))*\)|[^#])|[^\\])*?"""/.source+")\\2"),lookbehind:!0,greedy:!0,inside:{interpolation:{pattern:/(\\#+\()(?:[^()]|\([^()]*\))*(?=\))/,lookbehind:!0,inside:null},"interpolation-punctuation":{pattern:/^\)|\\#+\($/,alias:"punctuation"},string:/[\s\S]+/}}],directive:{pattern:RegExp(/#/.source+"(?:"+/(?:elseif|if)\b/.source+"(?:[ \t]*"+/(?:![ \t]*)?(?:\b\w+\b(?:[ \t]*\((?:[^()]|\([^()]*\))*\))?|\((?:[^()]|\([^()]*\))*\))(?:[ \t]*(?:&&|\|\|))?/.source+")+|"+/(?:else|endif)\b/.source+")"),alias:"property",inside:{"directive-name":/^#\w+/,boolean:/\b(?:false|true)\b/,number:/\b\d+(?:\.\d+)*\b/,operator:/!|&&|\|\||[<>]=?/,punctuation:/[(),]/}},literal:{pattern:/#(?:colorLiteral|column|dsohandle|file(?:ID|Literal|Path)?|function|imageLiteral|line)\b/,alias:"constant"},"other-directive":{pattern:/#\w+\b/,alias:"property"},attribute:{pattern:/@\w+/,alias:"atrule"},"function-definition":{pattern:/(\bfunc\s+)\w+/,lookbehind:!0,alias:"function"},label:{pattern:/\b(break|continue)\s+\w+|\b[a-zA-Z_]\w*(?=\s*:\s*(?:for|repeat|while)\b)/,lookbehind:!0,alias:"important"},keyword:/\b(?:Any|Protocol|Self|Type|actor|as|assignment|associatedtype|associativity|async|await|break|case|catch|class|continue|convenience|default|defer|deinit|didSet|do|dynamic|else|enum|extension|fallthrough|fileprivate|final|for|func|get|guard|higherThan|if|import|in|indirect|infix|init|inout|internal|is|isolated|lazy|left|let|lowerThan|mutating|none|nonisolated|nonmutating|open|operator|optional|override|postfix|precedencegroup|prefix|private|protocol|public|repeat|required|rethrows|return|right|safe|self|set|some|static|struct|subscript|super|switch|throw|throws|try|typealias|unowned|unsafe|var|weak|where|while|willSet)\b/,boolean:/\b(?:false|true)\b/,nil:{pattern:/\bnil\b/,alias:"constant"},"short-argument":/\$\d+\b/,omit:{pattern:/\b_\b/,alias:"keyword"},number:/\b(?:[\d_]+(?:\.[\de_]+)?|0x[a-f0-9_]+(?:\.[a-f0-9p_]+)?|0b[01_]+|0o[0-7_]+)\b/i,"class-name":/\b[A-Z](?:[A-Z_\d]*[a-z]\w*)?\b/,function:/\b[a-z_]\w*(?=\s*\()/i,constant:/\b(?:[A-Z_]{2,}|k[A-Z][A-Za-z_]+)\b/,operator:/[-+*/%=!<>&|^~?]+|\.[.\-+*/%=!<>&|^~?]+/,punctuation:/[{}[\]();,.:\\]/},_.languages.swift["string-literal"].forEach((function(e){e.inside.interpolation.inside=_.languages.swift})),function(e){e.languages.kotlin=e.languages.extend("clike",{keyword:{pattern:/(^|[^.])\b(?:abstract|actual|annotation|as|break|by|catch|class|companion|const|constructor|continue|crossinline|data|do|dynamic|else|enum|expect|external|final|finally|for|fun|get|if|import|in|infix|init|inline|inner|interface|internal|is|lateinit|noinline|null|object|open|operator|out|override|package|private|protected|public|reified|return|sealed|set|super|suspend|tailrec|this|throw|to|try|typealias|val|var|vararg|when|where|while)\b/,lookbehind:!0},function:[{pattern:/(?:`[^\r\n`]+`|\b\w+)(?=\s*\()/,greedy:!0},{pattern:/(\.)(?:`[^\r\n`]+`|\w+)(?=\s*\{)/,lookbehind:!0,greedy:!0}],number:/\b(?:0[xX][\da-fA-F]+(?:_[\da-fA-F]+)*|0[bB][01]+(?:_[01]+)*|\d+(?:_\d+)*(?:\.\d+(?:_\d+)*)?(?:[eE][+-]?\d+(?:_\d+)*)?[fFL]?)\b/,operator:/\+[+=]?|-[-=>]?|==?=?|!(?:!|==?)?|[\/*%<>]=?|[?:]:?|\.\.|&&|\|\||\b(?:and|inv|or|shl|shr|ushr|xor)\b/}),delete e.languages.kotlin["class-name"];var t={"interpolation-punctuation":{pattern:/^\$\{?|\}$/,alias:"punctuation"},expression:{pattern:/[\s\S]+/,inside:e.languages.kotlin}};e.languages.insertBefore("kotlin","string",{"string-literal":[{pattern:/"""(?:[^$]|\$(?:(?!\{)|\{[^{}]*\}))*?"""/,alias:"multiline",inside:{interpolation:{pattern:/\$(?:[a-z_]\w*|\{[^{}]*\})/i,inside:t},string:/[\s\S]+/}},{pattern:/"(?:[^"\\\r\n$]|\\.|\$(?:(?!\{)|\{[^{}]*\}))*"/,alias:"singleline",inside:{interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$(?:[a-z_]\w*|\{[^{}]*\})/i,lookbehind:!0,inside:t},string:/[\s\S]+/}}],char:{pattern:/'(?:[^'\\\r\n]|\\(?:.|u[a-fA-F0-9]{0,4}))'/,greedy:!0}}),delete e.languages.kotlin.string,e.languages.insertBefore("kotlin","keyword",{annotation:{pattern:/\B@(?:\w+:)?(?:[A-Z]\w*|\[[^\]]+\])/,alias:"builtin"}}),e.languages.insertBefore("kotlin","function",{label:{pattern:/\b\w+@|@\w+\b/,alias:"symbol"}}),e.languages.kt=e.languages.kotlin,e.languages.kts=e.languages.kotlin}(_),_.languages.c=_.languages.extend("clike",{comment:{pattern:/\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},"class-name":{pattern:/(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,function:/\b[a-z_]\w*(?=\s*\()/i,number:/(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/}),_.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),_.languages.insertBefore("c","string",{macro:{pattern:/(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,greedy:!0,alias:"property",inside:{string:[{pattern:/^(#\s*include\s*)<[^>]+>/,lookbehind:!0},_.languages.c.string],char:_.languages.c.char,comment:_.languages.c.comment,"macro-name":[{pattern:/(^#\s*define\s+)\w+\b(?!\()/i,lookbehind:!0},{pattern:/(^#\s*define\s+)\w+\b(?=\()/i,lookbehind:!0,alias:"function"}],directive:{pattern:/^(#\s*)[a-z]+/,lookbehind:!0,alias:"keyword"},"directive-hash":/^#/,punctuation:/##|\\(?=[\r\n])/,expression:{pattern:/\S[\s\S]*/,inside:_.languages.c}}}}),_.languages.insertBefore("c","function",{constant:/\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/}),delete _.languages.c.boolean,_.languages.objectivec=_.languages.extend("c",{string:{pattern:/@?"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},keyword:/\b(?:asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|in|inline|int|long|register|return|self|short|signed|sizeof|static|struct|super|switch|typedef|typeof|union|unsigned|void|volatile|while)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,operator:/-[->]?|\+\+?|!=?|<>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete _.languages.objectivec["class-name"],_.languages.objc=_.languages.objectivec,_.languages.reason=_.languages.extend("clike",{string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},"class-name":/\b[A-Z]\w*/,keyword:/\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,operator:/\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:asr|land|lor|lsl|lsr|lxor|mod)\b/}),_.languages.insertBefore("reason","class-name",{char:{pattern:/'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/,greedy:!0},constructor:/\b[A-Z]\w*\b(?!\s*\.)/,label:{pattern:/\b[a-z]\w*(?=::)/,alias:"symbol"}}),delete _.languages.reason.function,function(e){for(var t=/\/\*(?:[^*/]|\*(?!\/)|\/(?!\*)|)*\*\//.source,n=0;n<2;n++)t=t.replace(//g,(function(){return t}));t=t.replace(//g,(function(){return/[^\s\S]/.source})),e.languages.rust={comment:[{pattern:RegExp(/(^|[^\\])/.source+t),lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/b?"(?:\\[\s\S]|[^\\"])*"|b?r(#*)"(?:[^"]|"(?!\1))*"\1/,greedy:!0},char:{pattern:/b?'(?:\\(?:x[0-7][\da-fA-F]|u\{(?:[\da-fA-F]_*){1,6}\}|.)|[^\\\r\n\t'])'/,greedy:!0},attribute:{pattern:/#!?\[(?:[^\[\]"]|"(?:\\[\s\S]|[^\\"])*")*\]/,greedy:!0,alias:"attr-name",inside:{string:null}},"closure-params":{pattern:/([=(,:]\s*|\bmove\s*)\|[^|]*\||\|[^|]*\|(?=\s*(?:\{|->))/,lookbehind:!0,greedy:!0,inside:{"closure-punctuation":{pattern:/^\||\|$/,alias:"punctuation"},rest:null}},"lifetime-annotation":{pattern:/'\w+/,alias:"symbol"},"fragment-specifier":{pattern:/(\$\w+:)[a-z]+/,lookbehind:!0,alias:"punctuation"},variable:/\$\w+/,"function-definition":{pattern:/(\bfn\s+)\w+/,lookbehind:!0,alias:"function"},"type-definition":{pattern:/(\b(?:enum|struct|trait|type|union)\s+)\w+/,lookbehind:!0,alias:"class-name"},"module-declaration":[{pattern:/(\b(?:crate|mod)\s+)[a-z][a-z_\d]*/,lookbehind:!0,alias:"namespace"},{pattern:/(\b(?:crate|self|super)\s*)::\s*[a-z][a-z_\d]*\b(?:\s*::(?:\s*[a-z][a-z_\d]*\s*::)*)?/,lookbehind:!0,alias:"namespace",inside:{punctuation:/::/}}],keyword:[/\b(?:Self|abstract|as|async|await|become|box|break|const|continue|crate|do|dyn|else|enum|extern|final|fn|for|if|impl|in|let|loop|macro|match|mod|move|mut|override|priv|pub|ref|return|self|static|struct|super|trait|try|type|typeof|union|unsafe|unsized|use|virtual|where|while|yield)\b/,/\b(?:bool|char|f(?:32|64)|[ui](?:8|16|32|64|128|size)|str)\b/],function:/\b[a-z_]\w*(?=\s*(?:::\s*<|\())/,macro:{pattern:/\b\w+!/,alias:"property"},constant:/\b[A-Z_][A-Z_\d]+\b/,"class-name":/\b[A-Z]\w*\b/,namespace:{pattern:/(?:\b[a-z][a-z_\d]*\s*::\s*)*\b[a-z][a-z_\d]*\s*::(?!\s*<)/,inside:{punctuation:/::/}},number:/\b(?:0x[\dA-Fa-f](?:_?[\dA-Fa-f])*|0o[0-7](?:_?[0-7])*|0b[01](?:_?[01])*|(?:(?:\d(?:_?\d)*)?\.)?\d(?:_?\d)*(?:[Ee][+-]?\d+)?)(?:_?(?:f32|f64|[iu](?:8|16|32|64|size)?))?\b/,boolean:/\b(?:false|true)\b/,punctuation:/->|\.\.=|\.{1,3}|::|[{}[\];(),:]/,operator:/[-+*\/%!^]=?|=[=>]?|&[&=]?|\|[|=]?|<>?=?|[@?]/},e.languages.rust["closure-params"].inside.rest=e.languages.rust,e.languages.rust.attribute.inside.string=e.languages.rust.string}(_),_.languages.go=_.languages.extend("clike",{string:{pattern:/(^|[^\\])"(?:\\.|[^"\\\r\n])*"|`[^`]*`/,lookbehind:!0,greedy:!0},keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,boolean:/\b(?:_|false|iota|nil|true)\b/,number:[/\b0(?:b[01_]+|o[0-7_]+)i?\b/i,/\b0x(?:[a-f\d_]+(?:\.[a-f\d_]*)?|\.[a-f\d_]+)(?:p[+-]?\d+(?:_\d+)*)?i?(?!\w)/i,/(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?[\d_]+)?i?(?!\w)/i],operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,builtin:/\b(?:append|bool|byte|cap|close|complex|complex(?:64|128)|copy|delete|error|float(?:32|64)|u?int(?:8|16|32|64)?|imag|len|make|new|panic|print(?:ln)?|real|recover|rune|string|uintptr)\b/}),_.languages.insertBefore("go","string",{char:{pattern:/'(?:\\.|[^'\\\r\n]){0,10}'/,greedy:!0}}),delete _.languages.go["class-name"],function(e){var t=/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|char8_t|class|co_await|co_return|co_yield|compl|concept|const|const_cast|consteval|constexpr|constinit|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|final|float|for|friend|goto|if|import|inline|int|int16_t|int32_t|int64_t|int8_t|long|module|mutable|namespace|new|noexcept|nullptr|operator|override|private|protected|public|register|reinterpret_cast|requires|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|uint16_t|uint32_t|uint64_t|uint8_t|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,n=/\b(?!)\w+(?:\s*\.\s*\w+)*\b/.source.replace(//g,(function(){return t.source}));e.languages.cpp=e.languages.extend("c",{"class-name":[{pattern:RegExp(/(\b(?:class|concept|enum|struct|typename)\s+)(?!)\w+/.source.replace(//g,(function(){return t.source}))),lookbehind:!0},/\b[A-Z]\w*(?=\s*::\s*\w+\s*\()/,/\b[A-Z_]\w*(?=\s*::\s*~\w+\s*\()/i,/\b\w+(?=\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>\s*::\s*\w+\s*\()/],keyword:t,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+(?:\.[\da-f']*)?|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+(?:\.[\d']*)?|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]{0,4}/i,greedy:!0},operator:/>>=?|<<=?|->|--|\+\+|&&|\|\||[?:~]|<=>|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:false|true)\b/}),e.languages.insertBefore("cpp","string",{module:{pattern:RegExp(/(\b(?:import|module)\s+)/.source+"(?:"+/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|<[^<>\r\n]*>/.source+"|"+/(?:\s*:\s*)?|:\s*/.source.replace(//g,(function(){return n}))+")"),lookbehind:!0,greedy:!0,inside:{string:/^[<"][\s\S]+/,operator:/:/,punctuation:/\./}},"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),e.languages.insertBefore("cpp","keyword",{"generic-function":{pattern:/\b(?!operator\b)[a-z_]\w*\s*<(?:[^<>]|<[^<>]*>)*>(?=\s*\()/i,inside:{function:/^\w+/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:e.languages.cpp}}}}),e.languages.insertBefore("cpp","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}}),e.languages.insertBefore("cpp","class-name",{"base-clause":{pattern:/(\b(?:class|struct)\s+\w+\s*:\s*)[^;{}"'\s]+(?:\s+[^;{}"'\s]+)*(?=\s*[;{])/,lookbehind:!0,greedy:!0,inside:e.languages.extend("cpp",{})}}),e.languages.insertBefore("inside","double-colon",{"class-name":/\b[a-z_]\w*\b(?!\s*::)/i},e.languages.cpp["base-clause"])}(_),_.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern://,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},_.languages.python["string-interpolation"].inside.interpolation.inside.rest=_.languages.python,_.languages.py=_.languages.python;((e,t)=>{for(var n in t)f(e,n,{get:t[n],enumerable:!0})})({},{dracula:()=>A,duotoneDark:()=>I,duotoneLight:()=>R,github:()=>P,jettwaveDark:()=>H,jettwaveLight:()=>G,nightOwl:()=>L,nightOwlLight:()=>N,oceanicNext:()=>j,okaidia:()=>M,oneDark:()=>W,oneLight:()=>q,palenight:()=>D,shadesOfPurple:()=>B,synthwave84:()=>$,ultramin:()=>z,vsDark:()=>U,vsLight:()=>V});var A={plain:{color:"#F8F8F2",backgroundColor:"#282A36"},styles:[{types:["prolog","constant","builtin"],style:{color:"rgb(189, 147, 249)"}},{types:["inserted","function"],style:{color:"rgb(80, 250, 123)"}},{types:["deleted"],style:{color:"rgb(255, 85, 85)"}},{types:["changed"],style:{color:"rgb(255, 184, 108)"}},{types:["punctuation","symbol"],style:{color:"rgb(248, 248, 242)"}},{types:["string","char","tag","selector"],style:{color:"rgb(255, 121, 198)"}},{types:["keyword","variable"],style:{color:"rgb(189, 147, 249)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(98, 114, 164)"}},{types:["attr-name"],style:{color:"rgb(241, 250, 140)"}}]},I={plain:{backgroundColor:"#2a2734",color:"#9a86fd"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#6c6783"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#e09142"}},{types:["property","function"],style:{color:"#9a86fd"}},{types:["tag-id","selector","atrule-id"],style:{color:"#eeebff"}},{types:["attr-name"],style:{color:"#c4b9fe"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","atrule","placeholder","variable"],style:{color:"#ffcc99"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#c4b9fe"}}]},R={plain:{backgroundColor:"#faf8f5",color:"#728fcb"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#b6ad9a"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#063289"}},{types:["property","function"],style:{color:"#b29762"}},{types:["tag-id","selector","atrule-id"],style:{color:"#2d2006"}},{types:["attr-name"],style:{color:"#896724"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","atrule"],style:{color:"#728fcb"}},{types:["placeholder","variable"],style:{color:"#93abdc"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#896724"}}]},P={plain:{color:"#393A34",backgroundColor:"#f6f8fa"},styles:[{types:["comment","prolog","doctype","cdata"],style:{color:"#999988",fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}},{types:["string","attr-value"],style:{color:"#e3116c"}},{types:["punctuation","operator"],style:{color:"#393A34"}},{types:["entity","url","symbol","number","boolean","variable","constant","property","regex","inserted"],style:{color:"#36acaa"}},{types:["atrule","keyword","attr-name","selector"],style:{color:"#00a4db"}},{types:["function","deleted","tag"],style:{color:"#d73a49"}},{types:["function-variable"],style:{color:"#6f42c1"}},{types:["tag","selector","keyword"],style:{color:"#00009f"}}]},L={plain:{color:"#d6deeb",backgroundColor:"#011627"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)",fontStyle:"italic"}},{types:["inserted","attr-name"],style:{color:"rgb(173, 219, 103)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(99, 119, 119)",fontStyle:"italic"}},{types:["string","url"],style:{color:"rgb(173, 219, 103)"}},{types:["variable"],style:{color:"rgb(214, 222, 235)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation"],style:{color:"rgb(199, 146, 234)"}},{types:["selector","doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["class-name"],style:{color:"rgb(255, 203, 139)"}},{types:["tag","operator","keyword"],style:{color:"rgb(127, 219, 202)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["property"],style:{color:"rgb(128, 203, 196)"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}}]},N={plain:{color:"#403f53",backgroundColor:"#FBFBFB"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)",fontStyle:"italic"}},{types:["inserted","attr-name"],style:{color:"rgb(72, 118, 214)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(152, 159, 177)",fontStyle:"italic"}},{types:["string","builtin","char","constant","url"],style:{color:"rgb(72, 118, 214)"}},{types:["variable"],style:{color:"rgb(201, 103, 101)"}},{types:["number"],style:{color:"rgb(170, 9, 130)"}},{types:["punctuation"],style:{color:"rgb(153, 76, 195)"}},{types:["function","selector","doctype"],style:{color:"rgb(153, 76, 195)",fontStyle:"italic"}},{types:["class-name"],style:{color:"rgb(17, 17, 17)"}},{types:["tag"],style:{color:"rgb(153, 76, 195)"}},{types:["operator","property","keyword","namespace"],style:{color:"rgb(12, 150, 155)"}},{types:["boolean"],style:{color:"rgb(188, 84, 84)"}}]},F="#c5a5c5",O="#8dc891",j={plain:{backgroundColor:"#282c34",color:"#ffffff"},styles:[{types:["attr-name"],style:{color:F}},{types:["attr-value"],style:{color:O}},{types:["comment","block-comment","prolog","doctype","cdata","shebang"],style:{color:"#999999"}},{types:["property","number","function-name","constant","symbol","deleted"],style:{color:"#5a9bcf"}},{types:["boolean"],style:{color:"#ff8b50"}},{types:["tag"],style:{color:"#fc929e"}},{types:["string"],style:{color:O}},{types:["punctuation"],style:{color:O}},{types:["selector","char","builtin","inserted"],style:{color:"#D8DEE9"}},{types:["function"],style:{color:"#79b6f2"}},{types:["operator","entity","url","variable"],style:{color:"#d7deea"}},{types:["keyword"],style:{color:F}},{types:["atrule","class-name"],style:{color:"#FAC863"}},{types:["important"],style:{fontWeight:"400"}},{types:["bold"],style:{fontWeight:"bold"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}}]},M={plain:{color:"#f8f8f2",backgroundColor:"#272822"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"#f92672",fontStyle:"italic"}},{types:["inserted"],style:{color:"rgb(173, 219, 103)",fontStyle:"italic"}},{types:["comment"],style:{color:"#8292a2",fontStyle:"italic"}},{types:["string","url"],style:{color:"#a6e22e"}},{types:["variable"],style:{color:"#f8f8f2"}},{types:["number"],style:{color:"#ae81ff"}},{types:["builtin","char","constant","function","class-name"],style:{color:"#e6db74"}},{types:["punctuation"],style:{color:"#f8f8f2"}},{types:["selector","doctype"],style:{color:"#a6e22e",fontStyle:"italic"}},{types:["tag","operator","keyword"],style:{color:"#66d9ef"}},{types:["boolean"],style:{color:"#ae81ff"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)",opacity:.7}},{types:["tag","property"],style:{color:"#f92672"}},{types:["attr-name"],style:{color:"#a6e22e !important"}},{types:["doctype"],style:{color:"#8292a2"}},{types:["rule"],style:{color:"#e6db74"}}]},D={plain:{color:"#bfc7d5",backgroundColor:"#292d3e"},styles:[{types:["comment"],style:{color:"rgb(105, 112, 152)",fontStyle:"italic"}},{types:["string","inserted"],style:{color:"rgb(195, 232, 141)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation","selector"],style:{color:"rgb(199, 146, 234)"}},{types:["variable"],style:{color:"rgb(191, 199, 213)"}},{types:["class-name","attr-name"],style:{color:"rgb(255, 203, 107)"}},{types:["tag","deleted"],style:{color:"rgb(255, 85, 114)"}},{types:["operator"],style:{color:"rgb(137, 221, 255)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["keyword"],style:{fontStyle:"italic"}},{types:["doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}},{types:["url"],style:{color:"rgb(221, 221, 221)"}}]},B={plain:{color:"#9EFEFF",backgroundColor:"#2D2A55"},styles:[{types:["changed"],style:{color:"rgb(255, 238, 128)"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)"}},{types:["inserted"],style:{color:"rgb(173, 219, 103)"}},{types:["comment"],style:{color:"rgb(179, 98, 255)",fontStyle:"italic"}},{types:["punctuation"],style:{color:"rgb(255, 255, 255)"}},{types:["constant"],style:{color:"rgb(255, 98, 140)"}},{types:["string","url"],style:{color:"rgb(165, 255, 144)"}},{types:["variable"],style:{color:"rgb(255, 238, 128)"}},{types:["number","boolean"],style:{color:"rgb(255, 98, 140)"}},{types:["attr-name"],style:{color:"rgb(255, 180, 84)"}},{types:["keyword","operator","property","namespace","tag","selector","doctype"],style:{color:"rgb(255, 157, 0)"}},{types:["builtin","char","constant","function","class-name"],style:{color:"rgb(250, 208, 0)"}}]},$={plain:{backgroundColor:"linear-gradient(to bottom, #2a2139 75%, #34294f)",backgroundImage:"#34294f",color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3"},styles:[{types:["comment","block-comment","prolog","doctype","cdata"],style:{color:"#495495",fontStyle:"italic"}},{types:["punctuation"],style:{color:"#ccc"}},{types:["tag","attr-name","namespace","number","unit","hexcode","deleted"],style:{color:"#e2777a"}},{types:["property","selector"],style:{color:"#72f1b8",textShadow:"0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475"}},{types:["function-name"],style:{color:"#6196cc"}},{types:["boolean","selector-id","function"],style:{color:"#fdfdfd",textShadow:"0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975"}},{types:["class-name","maybe-class-name","builtin"],style:{color:"#fff5f6",textShadow:"0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75"}},{types:["constant","symbol"],style:{color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3"}},{types:["important","atrule","keyword","selector-class"],style:{color:"#f4eee4",textShadow:"0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575"}},{types:["string","char","attr-value","regex","variable"],style:{color:"#f87c32"}},{types:["parameter"],style:{fontStyle:"italic"}},{types:["entity","url"],style:{color:"#67cdcc"}},{types:["operator"],style:{color:"ffffffee"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["entity"],style:{cursor:"help"}},{types:["inserted"],style:{color:"green"}}]},z={plain:{color:"#282a2e",backgroundColor:"#ffffff"},styles:[{types:["comment"],style:{color:"rgb(197, 200, 198)"}},{types:["string","number","builtin","variable"],style:{color:"rgb(150, 152, 150)"}},{types:["class-name","function","tag","attr-name"],style:{color:"rgb(40, 42, 46)"}}]},U={plain:{color:"#9CDCFE",backgroundColor:"#1E1E1E"},styles:[{types:["prolog"],style:{color:"rgb(0, 0, 128)"}},{types:["comment"],style:{color:"rgb(106, 153, 85)"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"rgb(86, 156, 214)"}},{types:["number","inserted"],style:{color:"rgb(181, 206, 168)"}},{types:["constant"],style:{color:"rgb(100, 102, 149)"}},{types:["attr-name","variable"],style:{color:"rgb(156, 220, 254)"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"rgb(206, 145, 120)"}},{types:["selector"],style:{color:"rgb(215, 186, 125)"}},{types:["tag"],style:{color:"rgb(78, 201, 176)"}},{types:["tag"],languages:["markup"],style:{color:"rgb(86, 156, 214)"}},{types:["punctuation","operator"],style:{color:"rgb(212, 212, 212)"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"rgb(220, 220, 170)"}},{types:["class-name"],style:{color:"rgb(78, 201, 176)"}},{types:["char"],style:{color:"rgb(209, 105, 105)"}}]},V={plain:{color:"#000000",backgroundColor:"#ffffff"},styles:[{types:["comment"],style:{color:"rgb(0, 128, 0)"}},{types:["builtin"],style:{color:"rgb(0, 112, 193)"}},{types:["number","variable","inserted"],style:{color:"rgb(9, 134, 88)"}},{types:["operator"],style:{color:"rgb(0, 0, 0)"}},{types:["constant","char"],style:{color:"rgb(129, 31, 63)"}},{types:["tag"],style:{color:"rgb(128, 0, 0)"}},{types:["attr-name"],style:{color:"rgb(255, 0, 0)"}},{types:["deleted","string"],style:{color:"rgb(163, 21, 21)"}},{types:["changed","punctuation"],style:{color:"rgb(4, 81, 165)"}},{types:["function","keyword"],style:{color:"rgb(0, 0, 255)"}},{types:["class-name"],style:{color:"rgb(38, 127, 153)"}}]},H={plain:{color:"#f8fafc",backgroundColor:"#011627"},styles:[{types:["prolog"],style:{color:"#000080"}},{types:["comment"],style:{color:"#6A9955"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"#569CD6"}},{types:["number","inserted"],style:{color:"#B5CEA8"}},{types:["constant"],style:{color:"#f8fafc"}},{types:["attr-name","variable"],style:{color:"#9CDCFE"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"#cbd5e1"}},{types:["selector"],style:{color:"#D7BA7D"}},{types:["tag"],style:{color:"#0ea5e9"}},{types:["tag"],languages:["markup"],style:{color:"#0ea5e9"}},{types:["punctuation","operator"],style:{color:"#D4D4D4"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"#7dd3fc"}},{types:["class-name"],style:{color:"#0ea5e9"}},{types:["char"],style:{color:"#D16969"}}]},G={plain:{color:"#0f172a",backgroundColor:"#f1f5f9"},styles:[{types:["prolog"],style:{color:"#000080"}},{types:["comment"],style:{color:"#6A9955"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"#0c4a6e"}},{types:["number","inserted"],style:{color:"#B5CEA8"}},{types:["constant"],style:{color:"#0f172a"}},{types:["attr-name","variable"],style:{color:"#0c4a6e"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"#64748b"}},{types:["selector"],style:{color:"#D7BA7D"}},{types:["tag"],style:{color:"#0ea5e9"}},{types:["tag"],languages:["markup"],style:{color:"#0ea5e9"}},{types:["punctuation","operator"],style:{color:"#475569"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"#0e7490"}},{types:["class-name"],style:{color:"#0ea5e9"}},{types:["char"],style:{color:"#D16969"}}]},W={plain:{backgroundColor:"hsl(220, 13%, 18%)",color:"hsl(220, 14%, 71%)",textShadow:"0 1px rgba(0, 0, 0, 0.3)"},styles:[{types:["comment","prolog","cdata"],style:{color:"hsl(220, 10%, 40%)"}},{types:["doctype","punctuation","entity"],style:{color:"hsl(220, 14%, 71%)"}},{types:["attr-name","class-name","maybe-class-name","boolean","constant","number","atrule"],style:{color:"hsl(29, 54%, 61%)"}},{types:["keyword"],style:{color:"hsl(286, 60%, 67%)"}},{types:["property","tag","symbol","deleted","important"],style:{color:"hsl(355, 65%, 65%)"}},{types:["selector","string","char","builtin","inserted","regex","attr-value"],style:{color:"hsl(95, 38%, 62%)"}},{types:["variable","operator","function"],style:{color:"hsl(207, 82%, 66%)"}},{types:["url"],style:{color:"hsl(187, 47%, 55%)"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"hsl(220, 14%, 71%)"}}]},q={plain:{backgroundColor:"hsl(230, 1%, 98%)",color:"hsl(230, 8%, 24%)"},styles:[{types:["comment","prolog","cdata"],style:{color:"hsl(230, 4%, 64%)"}},{types:["doctype","punctuation","entity"],style:{color:"hsl(230, 8%, 24%)"}},{types:["attr-name","class-name","boolean","constant","number","atrule"],style:{color:"hsl(35, 99%, 36%)"}},{types:["keyword"],style:{color:"hsl(301, 63%, 40%)"}},{types:["property","tag","symbol","deleted","important"],style:{color:"hsl(5, 74%, 59%)"}},{types:["selector","string","char","builtin","inserted","regex","attr-value","punctuation"],style:{color:"hsl(119, 34%, 47%)"}},{types:["variable","operator","function"],style:{color:"hsl(221, 87%, 60%)"}},{types:["url"],style:{color:"hsl(198, 99%, 37%)"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"hsl(230, 8%, 24%)"}}]},Y=(e,t)=>{const{plain:n}=e,r=e.styles.reduce(((e,n)=>{const{languages:r,style:o}=n;return r&&!r.includes(t)||n.types.forEach((t=>{const n=k(k({},e[t]),o);e[t]=n})),e}),{});return r.root=n,r.plain=E(k({},n),{backgroundColor:void 0}),r},K=/\r\n|\r|\n/,X=e=>{0===e.length?e.push({types:["plain"],content:"\n",empty:!0}):1===e.length&&""===e[0].content&&(e[0].content="\n",e[0].empty=!0)},Q=(e,t)=>{const n=e.length;return n>0&&e[n-1]===t?e:e.concat(t)},Z=e=>{const t=[[]],n=[e],r=[0],o=[e.length];let a=0,i=0,s=[];const l=[s];for(;i>-1;){for(;(a=r[i]++)0?c:["plain"],e=u):(c=Q(c,u.type),u.alias&&(c=Q(c,u.alias)),e=u.content),"string"!=typeof e){i++,t.push(c),n.push(e),r.push(0),o.push(e.length);continue}const d=e.split(K),p=d.length;s.push({types:c,content:d[0]});for(let t=1;t{const a=t.toLowerCase(),i=((e,t)=>{const[n,r]=(0,u.useState)(Y(t,e)),o=(0,u.useRef)(),a=(0,u.useRef)();return(0,u.useEffect)((()=>{t===o.current&&e===a.current||(o.current=t,a.current=e,r(Y(t,e)))}),[e,t]),n})(a,r),s=(e=>(0,u.useCallback)((t=>{var n=t,{className:r,style:o,line:a}=n,i=T(n,["className","style","line"]);const s=E(k({},i),{className:(0,d.c)("token-line",r)});return"object"==typeof e&&"plain"in e&&(s.style=e.plain),"object"==typeof o&&(s.style=k(k({},s.style||{}),o)),s}),[e]))(i),l=(e=>{const t=(0,u.useCallback)((({types:t,empty:n})=>{if(null!=e)return 1===t.length&&"plain"===t[0]?null!=n?{display:"inline-block"}:void 0:1===t.length&&null!=n?e[t[0]]:Object.assign(null!=n?{display:"inline-block"}:{},...t.map((t=>e[t])))}),[e]);return(0,u.useCallback)((e=>{var n=e,{token:r,className:o,style:a}=n,i=T(n,["token","className","style"]);const s=E(k({},i),{className:(0,d.c)("token",...r.types,o),children:r.content,style:t(r)});return null!=a&&(s.style=k(k({},s.style||{}),a)),s}),[t])})(i),c=(({prism:e,code:t,grammar:n,language:r})=>{const o=(0,u.useRef)(e);return(0,u.useMemo)((()=>{if(null==n)return Z([t]);const e={code:t,grammar:n,language:r,tokens:[]};return o.current.hooks.run("before-tokenize",e),e.tokens=o.current.tokenize(t,n),o.current.hooks.run("after-tokenize",e),Z(e.tokens)}),[t,n,r])})({prism:o,language:a,code:n,grammar:o.languages[a]});return e({tokens:c,className:`prism-code language-${a}`,style:null!=i?i.root:{},getLineProps:s,getTokenProps:l})},ee=e=>(0,u.createElement)(J,E(k({},e),{prism:e.prism||_,theme:e.theme||U,code:e.code,language:e.language}))},144:e=>{"use strict";e.exports={}},4504:e=>{"use strict";e.exports=JSON.parse('{"/search-437":{"__comp":"1a4e3797","__context":{"plugin":"abaad534"}},"/docs-d53":{"__comp":"5e95c892","__context":{"plugin":"e7928ab4"}},"/docs-195":{"__comp":"a7bd4aaa","version":"935f2afb"},"/docs/tags-0cc":{"__comp":"3720c009","tags":"55960ee5"},"/docs/tags/accessibility-8aa":{"__comp":"df203c0f","tag":"4a4fb967"},"/docs/tags/android-e3a":{"__comp":"df203c0f","tag":"6728e797"},"/docs/tags/apisauce-143":{"__comp":"df203c0f","tag":"1ab29606"},"/docs/tags/archive-51b":{"__comp":"df203c0f","tag":"985027d8"},"/docs/tags/async-storage-afc":{"__comp":"df203c0f","tag":"d01c4de2"},"/docs/tags/authentication-587":{"__comp":"df203c0f","tag":"ecce3b64"},"/docs/tags/babel-e90":{"__comp":"df203c0f","tag":"b3d1732c"},"/docs/tags/ci-cd-56c":{"__comp":"df203c0f","tag":"a951c726"},"/docs/tags/cng-581":{"__comp":"df203c0f","tag":"31ac2bc7"},"/docs/tags/debug-888":{"__comp":"df203c0f","tag":"e1b6b0a8"},"/docs/tags/dependencies-c34":{"__comp":"df203c0f","tag":"8b0d950b"},"/docs/tags/eas-17a":{"__comp":"df203c0f","tag":"99d16955"},"/docs/tags/eas-update-632":{"__comp":"df203c0f","tag":"33f24359"},"/docs/tags/environment-variables-0f3":{"__comp":"df203c0f","tag":"fd1937a7"},"/docs/tags/expo-a41":{"__comp":"df203c0f","tag":"ce17b301"},"/docs/tags/expo-dev-client-0df":{"__comp":"df203c0f","tag":"a0d6a633"},"/docs/tags/expo-router-257":{"__comp":"df203c0f","tag":"c5ca3bf3"},"/docs/tags/expo-updates-807":{"__comp":"df203c0f","tag":"08a54ed9"},"/docs/tags/flat-list-5a7":{"__comp":"df203c0f","tag":"e0854532"},"/docs/tags/generator-80e":{"__comp":"df203c0f","tag":"24a07a83"},"/docs/tags/guide-cea":{"__comp":"df203c0f","tag":"b8c37621"},"/docs/tags/hardware-303":{"__comp":"df203c0f","tag":"569bff92"},"/docs/tags/i-os-96e":{"__comp":"df203c0f","tag":"3bb7a4af"},"/docs/tags/imports-887":{"__comp":"df203c0f","tag":"b832b2ff"},"/docs/tags/intro-b42":{"__comp":"df203c0f","tag":"51658ad1"},"/docs/tags/maestro-034":{"__comp":"df203c0f","tag":"dec1aed8"},"/docs/tags/mmkv-f7e":{"__comp":"df203c0f","tag":"a8646ade"},"/docs/tags/mob-x-a01":{"__comp":"df203c0f","tag":"51ea30c5"},"/docs/tags/prebuild-83d":{"__comp":"df203c0f","tag":"f50f3884"},"/docs/tags/prettier-db7":{"__comp":"df203c0f","tag":"69dd30cd"},"/docs/tags/react-native-vision-camera-ea0":{"__comp":"df203c0f","tag":"82139467"},"/docs/tags/react-navigation-0ad":{"__comp":"df203c0f","tag":"94ee064e"},"/docs/tags/redux-c5e":{"__comp":"df203c0f","tag":"e2041b9b"},"/docs/tags/scroll-to-f32":{"__comp":"df203c0f","tag":"a8f9d519"},"/docs/tags/section-list-8de":{"__comp":"df203c0f","tag":"9dc0f37b"},"/docs/tags/select-field-5f4":{"__comp":"df203c0f","tag":"dce6faa4"},"/docs/tags/state-management-181":{"__comp":"df203c0f","tag":"18d888f3"},"/docs/tags/testing-b53":{"__comp":"df203c0f","tag":"47a03c7f"},"/docs/tags/text-field-782":{"__comp":"df203c0f","tag":"72dfd944"},"/docs/tags/type-script-825":{"__comp":"df203c0f","tag":"ff2c7cca"},"/docs/tags/ui-020":{"__comp":"df203c0f","tag":"19d620af"},"/docs/tags/ui-required-device-capabilities-73a":{"__comp":"df203c0f","tag":"ccf3150e"},"/docs/tags/uses-feature-f1a":{"__comp":"df203c0f","tag":"d699663a"},"/docs/tags/vision-camera-e9b":{"__comp":"df203c0f","tag":"c5abe9fe"},"/docs/tags/yarn-e4e":{"__comp":"df203c0f","tag":"7acb6f50"},"/docs/tags/zustand-24d":{"__comp":"df203c0f","tag":"954f316d"},"/docs-05b":{"__comp":"a94703ab"},"/docs/archive/-ab8":{"__comp":"17896441","content":"dd3340a6"},"/docs/archive/PristineExpoProject-afa":{"__comp":"17896441","content":"b33180cb"},"/docs/intro-194":{"__comp":"17896441","content":"0e384e19"},"/docs/recipes/AccessibilityFontSizes-872":{"__comp":"17896441","content":"145425bc"},"/docs/recipes/CircleCIRNSetup-ce2":{"__comp":"17896441","content":"fe9b09bf"},"/docs/recipes/CreatingGreateExperienceForScreenReaders-752":{"__comp":"17896441","content":"f523b160"},"/docs/recipes/DetoxIntro-700":{"__comp":"17896441","content":"03224537"},"/docs/recipes/DistributingAuthTokenToAPI-298":{"__comp":"17896441","content":"24c3776a"},"/docs/recipes/EASUpdate-938":{"__comp":"17896441","content":"9fc76e3d"},"/docs/recipes/EnforcingImportOrder-713":{"__comp":"17896441","content":"d7af48b9"},"/docs/recipes/EnvironmentVariables-92b":{"__comp":"17896441","content":"d6ab422f"},"/docs/recipes/ExpoRouter-0b5":{"__comp":"17896441","content":"c47fa949"},"/docs/recipes/GeneratorComponentTests-e55":{"__comp":"17896441","content":"7b45617e"},"/docs/recipes/MaestroSetup-237":{"__comp":"17896441","content":"51e76fb5"},"/docs/recipes/MigratingToMMKV-9d0":{"__comp":"17896441","content":"657027a7"},"/docs/recipes/PatchingBuildingAndroid-ac8":{"__comp":"17896441","content":"d0e08e4a"},"/docs/recipes/PrepForEASBuild-64a":{"__comp":"17896441","content":"54a9c7e8"},"/docs/recipes/ReactNativeVisionCamera-e2e":{"__comp":"17896441","content":"cc1d3934"},"/docs/recipes/Redux-0f8":{"__comp":"17896441","content":"a2f5d017"},"/docs/recipes/RemoveMobxStateTree-50f":{"__comp":"17896441","content":"c75b21fd"},"/docs/recipes/RequiringHardwareFeaturesWithExpo-2fd":{"__comp":"17896441","content":"cecd52bc"},"/docs/recipes/SampleYAMLCircleCI-30a":{"__comp":"17896441","content":"4e09609f"},"/docs/recipes/SelectFieldWithBottomSheet-ca3":{"__comp":"17896441","content":"d63d2b89"},"/docs/recipes/SwitchBetweenExpoGoCNG-695":{"__comp":"17896441","content":"78a0b2f7"},"/docs/recipes/TypeScriptBaseURL-986":{"__comp":"17896441","content":"1c9ea255"},"/docs/recipes/UnrenderedItemInScrollView-c15":{"__comp":"17896441","content":"c3e2f4d4"},"/docs/recipes/UpdatingDependencies-21c":{"__comp":"17896441","content":"da9277bc"},"/docs/recipes/UpdatingIgnite-f0c":{"__comp":"17896441","content":"6fd287af"},"/docs/recipes/UsingScreenReaders-324":{"__comp":"17896441","content":"63181745"},"/docs/recipes/Zustand-0e1":{"__comp":"17896441","content":"e33e793e"},"/-703":{"__comp":"1df93b7f","__context":{"plugin":"3192f89a"},"config":"5e9f5e1a"}}')}},e=>{e.O(0,[2176],(()=>{return t=8808,e(e.s=t);var t}));e.O()}]);
\ No newline at end of file
diff --git a/assets/js/main.e67a6a10.js.LICENSE.txt b/assets/js/main.389a2d66.js.LICENSE.txt
similarity index 100%
rename from assets/js/main.e67a6a10.js.LICENSE.txt
rename to assets/js/main.389a2d66.js.LICENSE.txt
diff --git a/assets/js/main.e67a6a10.js b/assets/js/main.e67a6a10.js
deleted file mode 100644
index f3367380..00000000
--- a/assets/js/main.e67a6a10.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! For license information please see main.e67a6a10.js.LICENSE.txt */
-(self.webpackChunkignite_cookbook=self.webpackChunkignite_cookbook||[]).push([[1590],{5052:(e,t,n)=>{"use strict";n.d(t,{I:()=>o});var r=n(1504);function o(){return r.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},r.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}},628:(e,t,n)=>{"use strict";n.d(t,{c:()=>p});n(1504);var r=n(8852),o=n.n(r),a=n(4504);const i={"03224537":[()=>n.e(5284).then(n.bind(n,4024)),"@site/docs/recipes/DetoxIntro.md",4024],"08a54ed9":[()=>n.e(5156).then(n.t.bind(n,1128,19)),"~docs/default/tag-docs-tags-expo-updates-8e6.json",1128],"0e384e19":[()=>n.e(6328).then(n.bind(n,9404)),"@site/docs/intro.md",9404],"145425bc":[()=>n.e(16).then(n.bind(n,9856)),"@site/docs/recipes/AccessibilityFontSizes.md",9856],17896441:[()=>Promise.all([n.e(2176),n.e(4912),n.e(6752)]).then(n.bind(n,4276)),"@theme/DocItem",4276],"18d888f3":[()=>n.e(5640).then(n.t.bind(n,9584,19)),"~docs/default/tag-docs-tags-state-management-fd9.json",9584],"19d620af":[()=>n.e(3966).then(n.t.bind(n,5568,19)),"~docs/default/tag-docs-tags-ui-22c.json",5568],"1a4e3797":[()=>Promise.all([n.e(2176),n.e(9648)]).then(n.bind(n,3416)),"@theme/SearchPage",3416],"1ab29606":[()=>n.e(6928).then(n.t.bind(n,7704,19)),"~docs/default/tag-docs-tags-apisauce-8de.json",7704],"1c9ea255":[()=>n.e(8636).then(n.bind(n,620)),"@site/docs/recipes/TypeScriptBaseURL.md",620],"1df93b7f":[()=>Promise.all([n.e(2176),n.e(2096),n.e(8552)]).then(n.bind(n,9184)),"@site/src/pages/index.tsx",9184],"24a07a83":[()=>n.e(4424).then(n.t.bind(n,4136,19)),"~docs/default/tag-docs-tags-generator-e43.json",4136],"24c3776a":[()=>n.e(9828).then(n.bind(n,176)),"@site/docs/recipes/DistributingAuthTokenToAPI.md",176],"3192f89a":[()=>n.e(4992).then(n.t.bind(n,590,19)),"/home/runner/work/ignite-cookbook/ignite-cookbook/.docusaurus/docusaurus-plugin-content-pages/default/plugin-route-context-module-100.json",590],"31ac2bc7":[()=>n.e(9632).then(n.t.bind(n,9010,19)),"~docs/default/tag-docs-tags-cng-585.json",9010],"33f24359":[()=>n.e(222).then(n.t.bind(n,1592,19)),"~docs/default/tag-docs-tags-eas-update-bce.json",1592],"3720c009":[()=>Promise.all([n.e(2176),n.e(4492)]).then(n.bind(n,2808)),"@theme/DocTagsListPage",2808],"3bb7a4af":[()=>n.e(2008).then(n.t.bind(n,7264,19)),"~docs/default/tag-docs-tags-i-os-d44.json",7264],"47a03c7f":[()=>n.e(3336).then(n.t.bind(n,7536,19)),"~docs/default/tag-docs-tags-testing-194.json",7536],"4a4fb967":[()=>n.e(6756).then(n.t.bind(n,9056,19)),"~docs/default/tag-docs-tags-accessibility-83c.json",9056],"4e09609f":[()=>n.e(3128).then(n.bind(n,8220)),"@site/docs/recipes/SampleYAMLCircleCI.md",8220],"51658ad1":[()=>n.e(9576).then(n.t.bind(n,5752,19)),"~docs/default/tag-docs-tags-intro-ce4.json",5752],"51e76fb5":[()=>n.e(5064).then(n.bind(n,4488)),"@site/docs/recipes/MaestroSetup.md",4488],"51ea30c5":[()=>n.e(2324).then(n.t.bind(n,162,19)),"~docs/default/tag-docs-tags-mob-x-748.json",162],"54a9c7e8":[()=>n.e(8576).then(n.bind(n,2716)),"@site/docs/recipes/PrepForEASBuild.md",2716],"55960ee5":[()=>n.e(4296).then(n.t.bind(n,2416,19)),"~docs/default/tags-list-current-prop-15a.json",2416],"569bff92":[()=>n.e(5320).then(n.t.bind(n,2968,19)),"~docs/default/tag-docs-tags-hardware-92c.json",2968],"5e95c892":[()=>n.e(4304).then(n.bind(n,3564)),"@theme/DocsRoot",3564],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,7768)),"@generated/docusaurus.config",7768],63181745:[()=>n.e(5548).then(n.bind(n,9108)),"@site/docs/recipes/UsingScreenReaders.md",9108],"657027a7":[()=>n.e(3180).then(n.bind(n,8232)),"@site/docs/recipes/MigratingToMMKV.md",8232],"6728e797":[()=>n.e(8616).then(n.t.bind(n,6824,19)),"~docs/default/tag-docs-tags-android-593.json",6824],"69dd30cd":[()=>n.e(4e3).then(n.t.bind(n,7672,19)),"~docs/default/tag-docs-tags-prettier-367.json",7672],"6fd287af":[()=>n.e(4264).then(n.bind(n,9700)),"@site/docs/recipes/UpdatingIgnite.md",9700],"72dfd944":[()=>n.e(40).then(n.t.bind(n,8466,19)),"~docs/default/tag-docs-tags-text-field-8cc.json",8466],"78a0b2f7":[()=>n.e(4224).then(n.bind(n,4068)),"@site/docs/recipes/SwitchBetweenExpoGoCNG.md",4068],"7acb6f50":[()=>n.e(56).then(n.t.bind(n,9200,19)),"~docs/default/tag-docs-tags-yarn-9bd.json",9200],"7b45617e":[()=>n.e(8436).then(n.bind(n,9368)),"@site/docs/recipes/GeneratorComponentTests.md",9368],82139467:[()=>n.e(7820).then(n.t.bind(n,5688,19)),"~docs/default/tag-docs-tags-react-native-vision-camera-af5.json",5688],"8b0d950b":[()=>n.e(3960).then(n.t.bind(n,4832,19)),"~docs/default/tag-docs-tags-dependencies-d4f.json",4832],"935f2afb":[()=>n.e(5696).then(n.t.bind(n,5988,19)),"~docs/default/version-current-metadata-prop-751.json",5988],"94ee064e":[()=>n.e(7300).then(n.t.bind(n,5683,19)),"~docs/default/tag-docs-tags-react-navigation-23c.json",5683],"954f316d":[()=>n.e(6044).then(n.t.bind(n,9272,19)),"~docs/default/tag-docs-tags-zustand-18e.json",9272],"985027d8":[()=>n.e(2160).then(n.t.bind(n,6843,19)),"~docs/default/tag-docs-tags-archive-6cf.json",6843],"99d16955":[()=>n.e(622).then(n.t.bind(n,5004,19)),"~docs/default/tag-docs-tags-eas-228.json",5004],"9dc0f37b":[()=>n.e(6704).then(n.t.bind(n,6154,19)),"~docs/default/tag-docs-tags-section-list-198.json",6154],"9fc76e3d":[()=>n.e(900).then(n.bind(n,8468)),"@site/docs/recipes/EASUpdate.md",8468],a0d6a633:[()=>n.e(7732).then(n.t.bind(n,1284,19)),"~docs/default/tag-docs-tags-expo-dev-client-4bf.json",1284],a2f5d017:[()=>n.e(916).then(n.bind(n,3884)),"@site/docs/recipes/Redux.md",3884],a7bd4aaa:[()=>n.e(6500).then(n.bind(n,2e3)),"@theme/DocVersionRoot",2e3],a8646ade:[()=>n.e(3008).then(n.t.bind(n,1492,19)),"~docs/default/tag-docs-tags-mmkv-046.json",1492],a8f9d519:[()=>n.e(6216).then(n.t.bind(n,606,19)),"~docs/default/tag-docs-tags-scroll-to-8d4.json",606],a94703ab:[()=>Promise.all([n.e(2176),n.e(4666)]).then(n.bind(n,996)),"@theme/DocRoot",996],a951c726:[()=>n.e(8200).then(n.t.bind(n,7976,19)),"~docs/default/tag-docs-tags-ci-cd-ed9.json",7976],abaad534:[()=>n.e(2464).then(n.t.bind(n,4684,19)),"/home/runner/work/ignite-cookbook/ignite-cookbook/.docusaurus/docusaurus-theme-search-algolia/default/plugin-route-context-module-100.json",4684],b33180cb:[()=>n.e(1528).then(n.bind(n,7160)),"@site/docs/archive/PristineExpoProject.md",7160],b3d1732c:[()=>n.e(95).then(n.t.bind(n,2464,19)),"~docs/default/tag-docs-tags-babel-ecc.json",2464],b832b2ff:[()=>n.e(4822).then(n.t.bind(n,2962,19)),"~docs/default/tag-docs-tags-imports-63f.json",2962],b8c37621:[()=>n.e(2372).then(n.t.bind(n,4328,19)),"~docs/default/tag-docs-tags-guide-a32.json",4328],c3e2f4d4:[()=>n.e(1264).then(n.bind(n,5800)),"@site/docs/recipes/UnrenderedItemInScrollView.md",5800],c47fa949:[()=>n.e(5032).then(n.bind(n,8332)),"@site/docs/recipes/ExpoRouter.md",8332],c5abe9fe:[()=>n.e(9607).then(n.t.bind(n,1344,19)),"~docs/default/tag-docs-tags-vision-camera-2ad.json",1344],c5ca3bf3:[()=>n.e(8872).then(n.t.bind(n,872,19)),"~docs/default/tag-docs-tags-expo-router-e61.json",872],c75b21fd:[()=>n.e(1412).then(n.bind(n,6188)),"@site/docs/recipes/RemoveMobxStateTree.md",6188],cc1d3934:[()=>n.e(8500).then(n.bind(n,5220)),"@site/docs/recipes/ReactNativeVisionCamera.md",5220],ccf3150e:[()=>n.e(7600).then(n.t.bind(n,3030,19)),"~docs/default/tag-docs-tags-ui-required-device-capabilities-7ff.json",3030],ce17b301:[()=>n.e(1388).then(n.t.bind(n,1540,19)),"~docs/default/tag-docs-tags-expo-4de.json",1540],cecd52bc:[()=>n.e(8).then(n.bind(n,6040)),"@site/docs/recipes/RequiringHardwareFeaturesWithExpo.md",6040],d01c4de2:[()=>n.e(7224).then(n.t.bind(n,488,19)),"~docs/default/tag-docs-tags-async-storage-da0.json",488],d0e08e4a:[()=>n.e(9016).then(n.bind(n,2980)),"@site/docs/recipes/PatchingBuildingAndroid.md",2980],d63d2b89:[()=>Promise.all([n.e(6432),n.e(5276)]).then(n.bind(n,6960)),"@site/docs/recipes/SelectFieldWithBottomSheet.mdx",6960],d699663a:[()=>n.e(1784).then(n.t.bind(n,5820,19)),"~docs/default/tag-docs-tags-uses-feature-818.json",5820],d6ab422f:[()=>n.e(8762).then(n.bind(n,7748)),"@site/docs/recipes/EnvironmentVariables.md",7748],d7af48b9:[()=>n.e(6264).then(n.bind(n,2508)),"@site/docs/recipes/EnforcingImportOrder.md",2508],da9277bc:[()=>n.e(5856).then(n.bind(n,1188)),"@site/docs/recipes/UpdatingDependencies.md",1188],dce6faa4:[()=>n.e(2596).then(n.t.bind(n,5892,19)),"~docs/default/tag-docs-tags-select-field-e86.json",5892],dd3340a6:[()=>n.e(7572).then(n.bind(n,8508)),"@site/docs/archive/index.md",8508],dec1aed8:[()=>n.e(9144).then(n.t.bind(n,4986,19)),"~docs/default/tag-docs-tags-maestro-a0f.json",4986],df203c0f:[()=>Promise.all([n.e(2176),n.e(3400)]).then(n.bind(n,8614)),"@theme/DocTagDocListPage",8614],e0854532:[()=>n.e(2288).then(n.t.bind(n,2456,19)),"~docs/default/tag-docs-tags-flat-list-bca.json",2456],e1b6b0a8:[()=>n.e(328).then(n.t.bind(n,2984,19)),"~docs/default/tag-docs-tags-debug-69b.json",2984],e2041b9b:[()=>n.e(7164).then(n.t.bind(n,9680,19)),"~docs/default/tag-docs-tags-redux-49b.json",9680],e33e793e:[()=>n.e(5708).then(n.bind(n,3356)),"@site/docs/recipes/Zustand.md",3356],e7928ab4:[()=>n.e(6460).then(n.t.bind(n,2080,19)),"/home/runner/work/ignite-cookbook/ignite-cookbook/.docusaurus/docusaurus-plugin-content-docs/default/plugin-route-context-module-100.json",2080],ecce3b64:[()=>n.e(3324).then(n.t.bind(n,4640,19)),"~docs/default/tag-docs-tags-authentication-9a3.json",4640],f50f3884:[()=>n.e(1236).then(n.t.bind(n,9720,19)),"~docs/default/tag-docs-tags-prebuild-64b.json",9720],f523b160:[()=>n.e(3504).then(n.bind(n,2232)),"@site/docs/recipes/CreatingGreateExperienceForScreenReaders.md",2232],fd1937a7:[()=>n.e(4116).then(n.t.bind(n,7472,19)),"~docs/default/tag-docs-tags-environment-variables-3be.json",7472],fe9b09bf:[()=>n.e(140).then(n.bind(n,1204)),"@site/docs/recipes/CircleCIRNSetup.md",1204],ff2c7cca:[()=>n.e(6252).then(n.t.bind(n,2248,19)),"~docs/default/tag-docs-tags-type-script-6e5.json",2248]};var s=n(7624);function l(e){let{error:t,retry:n,pastDelay:r}=e;return t?(0,s.jsxs)("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"},children:[(0,s.jsx)("p",{children:String(t)}),(0,s.jsx)("div",{children:(0,s.jsx)("button",{type:"button",onClick:n,children:"Retry"})})]}):r?(0,s.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,s.jsx)("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb",children:(0,s.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,s.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,s.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,s.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,s.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,s.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,s.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var c=n(8120),u=n(5548);function d(e,t){if("*"===e)return o()({loading:l,loader:()=>n.e(4552).then(n.bind(n,4552)),modules:["@theme/NotFound"],webpack:()=>[4552],render(e,t){const n=e.default;return(0,s.jsx)(u.Y,{value:{plugin:{name:"native",id:"default"}},children:(0,s.jsx)(n,{...t})})}});const r=a[`${e}-${t}`],d={},p=[],f=[],m=(0,c.c)(r);return Object.entries(m).forEach((e=>{let[t,n]=e;const r=i[n];r&&(d[t]=r[0],p.push(r[1]),f.push(r[2]))})),o().Map({loading:l,loader:d,modules:p,webpack:()=>f,render(t,n){const o=JSON.parse(JSON.stringify(r));Object.entries(t).forEach((t=>{let[n,r]=t;const a=r.default;if(!a)throw new Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);"object"!=typeof a&&"function"!=typeof a||Object.keys(r).filter((e=>"default"!==e)).forEach((e=>{a[e]=r[e]}));let i=o;const s=n.split(".");s.slice(0,-1).forEach((e=>{i=i[e]})),i[s[s.length-1]]=a}));const a=o.__comp;delete o.__comp;const i=o.__context;return delete o.__context,(0,s.jsx)(u.Y,{value:i,children:(0,s.jsx)(a,{...o,...n})})}})}const p=[{path:"/search",component:d("/search","437"),exact:!0},{path:"/docs",component:d("/docs","d53"),routes:[{path:"/docs",component:d("/docs","195"),routes:[{path:"/docs/tags",component:d("/docs/tags","0cc"),exact:!0},{path:"/docs/tags/accessibility",component:d("/docs/tags/accessibility","8aa"),exact:!0},{path:"/docs/tags/android",component:d("/docs/tags/android","e3a"),exact:!0},{path:"/docs/tags/apisauce",component:d("/docs/tags/apisauce","143"),exact:!0},{path:"/docs/tags/archive",component:d("/docs/tags/archive","51b"),exact:!0},{path:"/docs/tags/async-storage",component:d("/docs/tags/async-storage","afc"),exact:!0},{path:"/docs/tags/authentication",component:d("/docs/tags/authentication","587"),exact:!0},{path:"/docs/tags/babel",component:d("/docs/tags/babel","e90"),exact:!0},{path:"/docs/tags/ci-cd",component:d("/docs/tags/ci-cd","56c"),exact:!0},{path:"/docs/tags/cng",component:d("/docs/tags/cng","581"),exact:!0},{path:"/docs/tags/debug",component:d("/docs/tags/debug","888"),exact:!0},{path:"/docs/tags/dependencies",component:d("/docs/tags/dependencies","c34"),exact:!0},{path:"/docs/tags/eas",component:d("/docs/tags/eas","17a"),exact:!0},{path:"/docs/tags/eas-update",component:d("/docs/tags/eas-update","632"),exact:!0},{path:"/docs/tags/environment-variables",component:d("/docs/tags/environment-variables","0f3"),exact:!0},{path:"/docs/tags/expo",component:d("/docs/tags/expo","a41"),exact:!0},{path:"/docs/tags/expo-dev-client",component:d("/docs/tags/expo-dev-client","0df"),exact:!0},{path:"/docs/tags/expo-router",component:d("/docs/tags/expo-router","257"),exact:!0},{path:"/docs/tags/expo-updates",component:d("/docs/tags/expo-updates","807"),exact:!0},{path:"/docs/tags/flat-list",component:d("/docs/tags/flat-list","5a7"),exact:!0},{path:"/docs/tags/generator",component:d("/docs/tags/generator","80e"),exact:!0},{path:"/docs/tags/guide",component:d("/docs/tags/guide","cea"),exact:!0},{path:"/docs/tags/hardware",component:d("/docs/tags/hardware","303"),exact:!0},{path:"/docs/tags/i-os",component:d("/docs/tags/i-os","96e"),exact:!0},{path:"/docs/tags/imports",component:d("/docs/tags/imports","887"),exact:!0},{path:"/docs/tags/intro",component:d("/docs/tags/intro","b42"),exact:!0},{path:"/docs/tags/maestro",component:d("/docs/tags/maestro","034"),exact:!0},{path:"/docs/tags/mmkv",component:d("/docs/tags/mmkv","f7e"),exact:!0},{path:"/docs/tags/mob-x",component:d("/docs/tags/mob-x","a01"),exact:!0},{path:"/docs/tags/prebuild",component:d("/docs/tags/prebuild","83d"),exact:!0},{path:"/docs/tags/prettier",component:d("/docs/tags/prettier","db7"),exact:!0},{path:"/docs/tags/react-native-vision-camera",component:d("/docs/tags/react-native-vision-camera","ea0"),exact:!0},{path:"/docs/tags/react-navigation",component:d("/docs/tags/react-navigation","0ad"),exact:!0},{path:"/docs/tags/redux",component:d("/docs/tags/redux","c5e"),exact:!0},{path:"/docs/tags/scroll-to",component:d("/docs/tags/scroll-to","f32"),exact:!0},{path:"/docs/tags/section-list",component:d("/docs/tags/section-list","8de"),exact:!0},{path:"/docs/tags/select-field",component:d("/docs/tags/select-field","5f4"),exact:!0},{path:"/docs/tags/state-management",component:d("/docs/tags/state-management","181"),exact:!0},{path:"/docs/tags/testing",component:d("/docs/tags/testing","b53"),exact:!0},{path:"/docs/tags/text-field",component:d("/docs/tags/text-field","782"),exact:!0},{path:"/docs/tags/type-script",component:d("/docs/tags/type-script","825"),exact:!0},{path:"/docs/tags/ui",component:d("/docs/tags/ui","020"),exact:!0},{path:"/docs/tags/ui-required-device-capabilities",component:d("/docs/tags/ui-required-device-capabilities","73a"),exact:!0},{path:"/docs/tags/uses-feature",component:d("/docs/tags/uses-feature","f1a"),exact:!0},{path:"/docs/tags/vision-camera",component:d("/docs/tags/vision-camera","e9b"),exact:!0},{path:"/docs/tags/yarn",component:d("/docs/tags/yarn","e4e"),exact:!0},{path:"/docs/tags/zustand",component:d("/docs/tags/zustand","24d"),exact:!0},{path:"/docs",component:d("/docs","05b"),routes:[{path:"/docs/archive/",component:d("/docs/archive/","ab8"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/archive/PristineExpoProject",component:d("/docs/archive/PristineExpoProject","afa"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/intro",component:d("/docs/intro","194"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/AccessibilityFontSizes",component:d("/docs/recipes/AccessibilityFontSizes","872"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/CircleCIRNSetup",component:d("/docs/recipes/CircleCIRNSetup","ce2"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/CreatingGreateExperienceForScreenReaders",component:d("/docs/recipes/CreatingGreateExperienceForScreenReaders","752"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/DetoxIntro",component:d("/docs/recipes/DetoxIntro","700"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/DistributingAuthTokenToAPI",component:d("/docs/recipes/DistributingAuthTokenToAPI","298"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/EASUpdate",component:d("/docs/recipes/EASUpdate","938"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/EnforcingImportOrder",component:d("/docs/recipes/EnforcingImportOrder","713"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/EnvironmentVariables",component:d("/docs/recipes/EnvironmentVariables","92b"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/ExpoRouter",component:d("/docs/recipes/ExpoRouter","0b5"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/GeneratorComponentTests",component:d("/docs/recipes/GeneratorComponentTests","e55"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/MaestroSetup",component:d("/docs/recipes/MaestroSetup","237"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/MigratingToMMKV",component:d("/docs/recipes/MigratingToMMKV","9d0"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/PatchingBuildingAndroid",component:d("/docs/recipes/PatchingBuildingAndroid","ac8"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/PrepForEASBuild",component:d("/docs/recipes/PrepForEASBuild","64a"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/ReactNativeVisionCamera",component:d("/docs/recipes/ReactNativeVisionCamera","e2e"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/Redux",component:d("/docs/recipes/Redux","0f8"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/RemoveMobxStateTree",component:d("/docs/recipes/RemoveMobxStateTree","50f"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/RequiringHardwareFeaturesWithExpo",component:d("/docs/recipes/RequiringHardwareFeaturesWithExpo","2fd"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/SampleYAMLCircleCI",component:d("/docs/recipes/SampleYAMLCircleCI","30a"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/SelectFieldWithBottomSheet",component:d("/docs/recipes/SelectFieldWithBottomSheet","ca3"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/SwitchBetweenExpoGoCNG",component:d("/docs/recipes/SwitchBetweenExpoGoCNG","695"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/TypeScriptBaseURL",component:d("/docs/recipes/TypeScriptBaseURL","986"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/UnrenderedItemInScrollView",component:d("/docs/recipes/UnrenderedItemInScrollView","c15"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/UpdatingDependencies",component:d("/docs/recipes/UpdatingDependencies","21c"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/UpdatingIgnite",component:d("/docs/recipes/UpdatingIgnite","f0c"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/UsingScreenReaders",component:d("/docs/recipes/UsingScreenReaders","324"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/Zustand",component:d("/docs/recipes/Zustand","0e1"),exact:!0,sidebar:"mainSidebar"}]}]}]},{path:"/",component:d("/","703"),exact:!0},{path:"*",component:d("*")}]},240:(e,t,n)=>{"use strict";n.d(t,{e:()=>a,g:()=>i});var r=n(1504),o=n(7624);const a=r.createContext(!1);function i(e){let{children:t}=e;const[n,i]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{i(!0)}),[]),(0,o.jsx)(a.Provider,{value:n,children:t})}},8808:(e,t,n)=>{"use strict";var r=n(1504),o=n(8352),a=n(440),i=n(2160),s=n(8684);const l=[n(7483),n(1462),n(5396),n(1976),n(9115)];var c=n(628),u=n(5592),d=n(5464),p=n(7624);function f(e){let{children:t}=e;return(0,p.jsx)(p.Fragment,{children:t})}var m=n(6952),g=n(8264),h=n(964),y=n(1824),b=n(5008),v=n(1616),S=n(204),w=n(4456),x=n(5684),k=n(8712);function E(){const{i18n:{currentLocale:e,defaultLocale:t,localeConfigs:n}}=(0,g.c)(),r=(0,v.D)(),o=n[e].htmlLang,a=e=>e.replace("-","_");return(0,p.jsxs)(m.c,{children:[Object.entries(n).map((e=>{let[t,{htmlLang:n}]=e;return(0,p.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:n},t)})),(0,p.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:"x-default"}),(0,p.jsx)("meta",{property:"og:locale",content:a(o)}),Object.values(n).filter((e=>o!==e.htmlLang)).map((e=>(0,p.jsx)("meta",{property:"og:locale:alternate",content:a(e.htmlLang)},`meta-og-${e.htmlLang}`)))]})}function T(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,g.c)(),r=function(){const{siteConfig:{url:e,baseUrl:t,trailingSlash:n}}=(0,g.c)(),{pathname:r}=(0,u.IT)();return e+(0,x.applyTrailingSlash)((0,h.c)(r),{trailingSlash:n,baseUrl:t})}(),o=t?`${n}${t}`:r;return(0,p.jsxs)(m.c,{children:[(0,p.jsx)("meta",{property:"og:url",content:o}),(0,p.jsx)("link",{rel:"canonical",href:o})]})}function C(){const{i18n:{currentLocale:e}}=(0,g.c)(),{metadata:t,image:n}=(0,y.y)();return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsxs)(m.c,{children:[(0,p.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,p.jsx)("body",{className:S.m})]}),n&&(0,p.jsx)(b.U7,{image:n}),(0,p.jsx)(T,{}),(0,p.jsx)(E,{}),(0,p.jsx)(k.c,{tag:w.e6,locale:e}),(0,p.jsx)(m.c,{children:t.map(((e,t)=>(0,p.jsx)("meta",{...e},t)))})]})}const _=new Map;function A(e){if(_.has(e.pathname))return{...e,pathname:_.get(e.pathname)};if((0,d.C)(c.c,e.pathname).some((e=>{let{route:t}=e;return!0===t.exact})))return _.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return _.set(e.pathname,t),{...e,pathname:t}}var I=n(240),R=n(136),P=n(5288);function L(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r{const r=t.default?.[e]??t[e];return r?.(...n)}));return()=>o.forEach((e=>e?.()))}const N=function(e){let{children:t,location:n,previousLocation:r}=e;return(0,P.c)((()=>{r!==n&&(!function(e){let{location:t,previousLocation:n}=e;if(!n)return;const r=t.pathname===n.pathname,o=t.hash===n.hash,a=t.search===n.search;if(r&&o&&!a)return;const{hash:i}=t;if(i){const e=decodeURIComponent(i.substring(1)),t=document.getElementById(e);t?.scrollIntoView()}else window.scrollTo(0,0)}({location:n,previousLocation:r}),L("onRouteDidUpdate",{previousLocation:r,location:n}))}),[r,n]),t};function F(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,d.C)(c.c,e))).flat();return Promise.all(t.map((e=>e.route.component.preload?.())))}class O extends r.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=s.c.canUseDOM?L("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=L("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),F(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return(0,p.jsx)(N,{previousLocation:this.previousLocation,location:t,children:(0,p.jsx)(u.kX,{location:t,render:()=>e})})}}const j=O,M="__docusaurus-base-url-issue-banner-container",D="__docusaurus-base-url-issue-banner",B="__docusaurus-base-url-issue-banner-suggestion-container";function $(e){return`\ndocument.addEventListener('DOMContentLoaded', function maybeInsertBanner() {\n var shouldInsert = typeof window['docusaurus'] === 'undefined';\n shouldInsert && insertBanner();\n});\n\nfunction insertBanner() {\n var bannerContainer = document.createElement('div');\n bannerContainer.id = '${M}';\n var bannerHtml = ${JSON.stringify(function(e){return`\n\n
Your Docusaurus site did not load properly.
\n
A very common reason is a wrong site baseUrl configuration.
\n
Current configured baseUrl = ${e} ${"/"===e?" (default value)":""}
\n
We suggest trying baseUrl =
\n