ImmanEb · October 9, 2023 19:02 · Apr 29, 2021 · Apr 27, 2021 · Apr 27, 2021 · Mar 9, 2021
diff --git a/knew.md b/knew.md
@@ -31,28 +31,64 @@ I have made libraries to address a number of the topics here, from navigation to
 
 ## 1. Scroll issues
 
-If you're using React Navigation on Expo Web or React Native Web, there might be some issues with scrolling.
+Okay this has plagued me forever. Why doesn't scrolling work properly? The reason is that a ScrollView's parent needs a fixed height on web. Otherwise, it'll just grow past it.
 
-Set `cardStyle` on any screens to `{ flex: 1 }`
+The fail-safe way to get this to work is to have this at the root of your screen:
+
+```tsx
+import { View, StyleSheet, ScrollView } from 'react-native'
+
+export default function Screen() {
+  return (
+    <View style={StyleSheet.absoluteFill}>
+      <ScrollView />
+    </View>
+  )
+}
+```
+
+Notice the absolute fill! This is crucial. If you want another view inside of the `ScrollView`, make sure you give it a `flex: 1`.
+
+```tsx
+import { StyleSheet, ScrollView } from 'react-native'
+import { View } from 'dripsy'
+
+export default function Screen() {
+  return (
+    <View style={StyleSheet.absoluteFill}>
+      <View sx={{ flex: 1 }}>
+        <ScrollView />
+      </View>
+    </View>
+  )
+}
+```
+
+If you're using `react-navigation` stacks on web, you'll need to edit the `cardStyle`, instead of setting absolute fill.
+
+Set `cardStyle` on any screens to `{ flex: 1 }`.
 
 ```jsx
-<Stack.Screen
-  name="Artists"
-  component={Artists}
-  options={{
-    headerShown: false,
+<Stack.Navigator
+  screenOptions={{ 
     cardStyle: {
-      flex: 1,
-    },
+      flex: 1
+    }
   }}
 />
 ```
 
+This is necessary since React Navigation wraps your screen with a `Card`, and if you don't make it stretch its container, then your `ScrollView` won't have a fixed height parent.
+
 If you don't edit the `cardStyle` here, there will be weird window scrolling, and `onScroll` events might not fire from the `ScrollView` in your screen. Or, you'll have to set fixed heights or something.
 
+Also, if you ever edit a specific screen's `cardStyle`, don't forget to add the `flex: 1`, since they won't merge.
+
 I got the work-around [here](https://github.com/react-navigation/react-navigation/issues/6165).
 
-Also, if you're using a `ScrollView` in `react-native-web`, it must be wrapped in a `View` with `flex: 1` (or with a fixed height.) Otherwise, it'll simply window scroll!
+**Put this in your brain forever: you're using a `ScrollView` in `react-native-web`, it must be wrapped in a `View` with `flex: 1` (or with a fixed height.) Otherwise, it'll simply window scroll!**
+
+How did I figure this out? Well I saw this line of code on `react-navigation`'s Stack repo: 
 
 ## 2. Preload fonts on web
 
@@ -83,24 +119,14 @@ Next, we'll need to import them. Import `Head` from `next/head`, and inside of `
 
 ```jsx
 <Head>
-  <link
-    rel="preload"
-    href="/fonts/Ionicons.ttf"
-    as="font"
-    crossOrigin=""
-  />
-  <link
-    rel="preload"
-    href="/fonts/Entypo.ttf"
-    as="font"
-    crossOrigin=""
-  />
+  <link rel="preload" href="/fonts/Ionicons.ttf" as="font" crossOrigin="" />
+  <link rel="preload" href="/fonts/Entypo.ttf" as="font" crossOrigin="" />
 </Head>
 ```
 
 Fonts will now load in efficiently. Do the same for any custom fonts inside of `Head`!
 
-----
+---
 
 # Weird bugs
 
@@ -112,7 +138,7 @@ The solution is to wrap each page in a single-page Stack. That is, take the stac
 
 In reality, I kinda regret using react-navigation at all on web. A future abstraction will create my own stacks for web using only shallow Next.js routing for modals, and will open modal screens on native. I've discussed this at length on Twitter. It will likely be a custom solution in combination with `expo-next-react-navigation`, which I'll try to share publicly when I figure it out. But I'm so deep into using `react-navigation` on web (to a fault) that it's hard to change my mental model.
 
-----
+---
 
 # Local Testing
 
@@ -161,15 +187,15 @@ Assuming you didn't run on a different port, this should now be running there.`
 
 Add a `local` script in `package.json`: `node local.js`.
 
-----
+---
 
 ### `next.config.js`
 
 Put `withSourceMaps` first, if you're using it. After that, `withTM`, then `withBundleAnalyzer`, `withFonts`, `withExpo`, etc.
 
 Make sure to put any monorepo folders into `transpileModules`.
 
-----
+---
 
 ### `tsconfig.json`
 
@@ -207,17 +233,17 @@ Make `strictNullChecks: true` from the start.
 }
 ```
 
-----
+---
 
 # Fixing `npm` packages, quickly
 
 I will never write another app with Expo / React / Next.js / React Native without using `patch-package`. This might be one of the most important node packages out there.
 
-Use `patch-package`. Use it. It lets you edit an `npm` package locally, and keep those edits throughout your commits. 
+Use `patch-package`. Use it. It lets you edit an `npm` package locally, and keep those edits throughout your commits.
 
 I still recommend sending PRs to your favorite open source libs to help them. But don't get lost in npm/git branch hell. Just use `patch-package` until your PR gets merged, and move on with your life.
 
-----
+---
 
 # Monorepo
 
@@ -227,6 +253,6 @@ But having a monorepo is a game changer. It makes it easy to extract things into
 
 Here's an example of an Expo + Next.js monorepo I made, along with instructions on how to recreate it: https://github.com/nandorojo/expo-next-monorepo
 
-----
+---
 
 ...other things here later
diff --git a/knew.md b/knew.md
@@ -110,7 +110,7 @@ You can't use the same react-navigation stack on two different Next.js pages. I
 
 The solution is to wrap each page in a single-page Stack. That is, take the stack you want to use in both places, and make it the only screen of another stack.
 
-In reality, I kinda regret using react-navigation at all on web. A future abstraction will create my own stacks for web using only shallow Next.js routing for modals, and will open modal screens on native. I've discussed this at length on Twitter. It will likely a custom solution in combination with `expo-next-react-navigation`.
+In reality, I kinda regret using react-navigation at all on web. A future abstraction will create my own stacks for web using only shallow Next.js routing for modals, and will open modal screens on native. I've discussed this at length on Twitter. It will likely be a custom solution in combination with `expo-next-react-navigation`, which I'll try to share publicly when I figure it out. But I'm so deep into using `react-navigation` on web (to a fault) that it's hard to change my mental model.
 
 ----
 

diff --git a/knew.md b/knew.md
@@ -102,6 +102,18 @@ Fonts will now load in efficiently. Do the same for any custom fonts inside of `
 
 ----
 
+# Weird bugs
+
+## Reusing the same react-navigation stack across pages
+
+You can't use the same react-navigation stack on two different Next.js pages. I often make the same stack, and on different pages, just render a different `initialRouteName`. For some reason, if I do this and navigate between pages, it doesn't update the stack. Adding a custom `key` didn't solve this either.
+
+The solution is to wrap each page in a single-page Stack. That is, take the stack you want to use in both places, and make it the only screen of another stack.
+
+In reality, I kinda regret using react-navigation at all on web. A future abstraction will create my own stacks for web using only shallow Next.js routing for modals, and will open modal screens on native. I've discussed this at length on Twitter. It will likely a custom solution in combination with `expo-next-react-navigation`.
+
+----
+
 # Local Testing
 
 ### Use `yarn`, not `npm`

diff --git a/knew.md b/knew.md
@@ -29,7 +29,7 @@ I have made libraries to address a number of the topics here, from navigation to
 
 # Style quirks
 
-### 1. Scroll issues
+## 1. Scroll issues
 
 If you're using React Navigation on Expo Web or React Native Web, there might be some issues with scrolling.
 
@@ -54,6 +54,52 @@ I got the work-around [here](https://github.com/react-navigation/react-navigatio
 
 Also, if you're using a `ScrollView` in `react-native-web`, it must be wrapped in a `View` with `flex: 1` (or with a fixed height.) Otherwise, it'll simply window scroll!
 
+## 2. Preload fonts on web
+
+This is especially important for icon sets.
+
+For using `@expo/vector-icons`, you'll need to grab the actual `.ttf` files from all the fonts you use.
+
+In your `/public` folder (when using Next.js), create a `fonts` folder. Paste any fonts you use, including the font files from the expo vector icons (see these in `@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts`.
+
+Copy-paste the files into that folder. Next, in `pages/_document.js`, we'll want to pre-load the fonts so that they load quickly. If we don't do this for the icons, they will flicker and it'll be weird.
+
+First, create a CSS style for each font using CSS `@fontface` (this is in `pages/_document.js`. You should have already copied the document from the expo-next adapter, so you can just append the fontface to the bottom of its custom CSS string.
+
+```css
+@font-face {
+  font-family: 'ionicons';
+  src: url('/fonts/Ionicons.ttf');
+}
+@font-face {
+  font-family: 'entypo';
+  src: url('/fonts/Entypo.ttf');
+}
+```
+
+Do the same for any custom fonts. Notice that the `font-family` string is lowercase. To find the right name for a given icon font, before doing this, just inspect the HTML of an icon, and see what its `font-family` value is in the CSS panel on Chrome.
+
+Next, we'll need to import them. Import `Head` from `next/head`, and inside of `Html`, paste this for each font:
+
+```jsx
+<Head>
+  <link
+    rel="preload"
+    href="/fonts/Ionicons.ttf"
+    as="font"
+    crossOrigin=""
+  />
+  <link
+    rel="preload"
+    href="/fonts/Entypo.ttf"
+    as="font"
+    crossOrigin=""
+  />
+</Head>
+```
+
+Fonts will now load in efficiently. Do the same for any custom fonts inside of `Head`!
+
 ----
 
 # Local Testing

diff --git a/knew.md b/knew.md
@@ -27,7 +27,7 @@ I have made libraries to address a number of the topics here, from navigation to
 - **SCHU (Schema, Class, Hook, UI)** This is an acronym I made that describes the way I think about _building features_. YouTube tutorials show you how to do cool things, but the part I missed was a mental model on building robust features.
 - **Typescript Union typeguards** `function isOnboarded(user: User): user is OnboardedUser {}`
 
-## Style quirks
+# Style quirks
 
 ### 1. Scroll issues
 
@@ -52,6 +52,8 @@ If you don't edit the `cardStyle` here, there will be weird window scrolling, an
 
 I got the work-around [here](https://github.com/react-navigation/react-navigation/issues/6165).
 
+Also, if you're using a `ScrollView` in `react-native-web`, it must be wrapped in a `View` with `flex: 1` (or with a fixed height.) Otherwise, it'll simply window scroll!
+
 ----
 
 # Local Testing

diff --git a/knew.md b/knew.md
@@ -8,7 +8,7 @@ I'll keep adding over time as I think of more. If anyone thinks these topics wou
 
 I have made libraries to address a number of the topics here, from navigation to design.
 
-## Topics
+# Topics
 
 - **Style quirks** (Little things you should do to make sure your app works consistently across platforms.)
 - **Local testing** (How do I run this locally?)

diff --git a/knew.md b/knew.md
@@ -54,7 +54,7 @@ I got the work-around [here](https://github.com/react-navigation/react-navigatio
 
 ----
 
-## Local Testing
+# Local Testing
 
 ### Use `yarn`, not `npm`
 
@@ -149,7 +149,7 @@ Make `strictNullChecks: true` from the start.
 
 ----
 
-## Fixing `npm` packages, quickly
+# Fixing `npm` packages, quickly
 
 I will never write another app with Expo / React / Next.js / React Native without using `patch-package`. This might be one of the most important node packages out there.
 
@@ -159,7 +159,7 @@ I still recommend sending PRs to your favorite open source libs to help them. Bu
 
 ----
 
-## Monorepo
+# Monorepo
 
 There are still a lot of bugs I encounter with this, such as some issues with Fast Refresh. I'm no expert with things like webpack, so I have no clue what I did to cause that.
 

diff --git a/knew.md b/knew.md
@@ -11,6 +11,9 @@ I have made libraries to address a number of the topics here, from navigation to
 ## Topics
 
 - **Style quirks** (Little things you should do to make sure your app works consistently across platforms.)
+- **Local testing** (How do I run this locally?)
+- **Fixing `npm` packages, quickly** You (want to add a feature or fix an issue in a dependency. How do we do this without waiting for a PR?)
+- **Monorepo** (How do I code share easily?)
 - **Navigation** (How do I create a consistent navigation experience that shares all code on web and native?)
 - **Responsive design** (How do designs look on different screen sizes?
 - **Pseudo classes** (hover states, focus states, touchable states)
@@ -51,5 +54,119 @@ I got the work-around [here](https://github.com/react-navigation/react-navigatio
 
 ----
 
+## Local Testing
+
+### Use `yarn`, not `npm`
+
+Look, yarn is just better. `resolutions` are useful. It looks better. It causes fewer problems. It allows for `workspaces`. Just use it.
+
+### Running `Next.js` on your local network
+
+Running Next apps on your local network can let any device on your WiFi access your dev app, besides just `localhost:3000`. It's quite useful.
+
+Create a `local.js` file.
+
+```js
+#!/usr/bin/env node
+'use strict'
+
+const { networkInterfaces } = require('os')
+
+const nets = networkInterfaces()
+const results = {} // or just '{}', an empty object
+
+for (const name of Object.keys(nets)) {
+  for (const net of nets[name]) {
+    // skip over non-ipv4 and internal (i.e. 127.0.0.1) addresses
+    if (net.family === 'IPv4' && !net.internal) {
+      if (!results[name]) {
+        results[name] = []
+      }
+
+      results[name].push(net.address)
+    }
+  }
+}
+
+const ipAddress = results.en0 && results.en0[0]
+
+if (ipAddress) {
+  console.log(
+    `🥳 Server running on local wifi: http://${ipAddress}:3000
+
+Assuming you didn't run on a different port, this should now be running there.`
+  )
+}
+```
+
+Add a `local` script in `package.json`: `node local.js`.
+
+----
+
+### `next.config.js`
+
+Put `withSourceMaps` first, if you're using it. After that, `withTM`, then `withBundleAnalyzer`, `withFonts`, `withExpo`, etc.
+
+Make sure to put any monorepo folders into `transpileModules`.
+
+----
+
+### `tsconfig.json`
+
+Make `strictNullChecks: true` from the start.
+
+```js
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "jsx": "preserve",
+    "lib": ["dom", "esnext"],
+    "moduleResolution": "node",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "strict": false,
+    "target": "esnext",
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
+    "module": "CommonJS",
+    "isolatedModules": false,
+    "strictNullChecks": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "packages/next-pages/_error.js",
+    "node_modules/react-native-redash/lib/typescript/v1/index.d.ts",
+    "packages/**/*.tsx",
+    "node_modules/@your_mono_repo_folder/**/*"
+  ],
+  "exclude": ["node_modules"]
+}
+```
+
+----
+
+## Fixing `npm` packages, quickly
+
+I will never write another app with Expo / React / Next.js / React Native without using `patch-package`. This might be one of the most important node packages out there.
+
+Use `patch-package`. Use it. It lets you edit an `npm` package locally, and keep those edits throughout your commits. 
+
+I still recommend sending PRs to your favorite open source libs to help them. But don't get lost in npm/git branch hell. Just use `patch-package` until your PR gets merged, and move on with your life.
+
+----
+
+## Monorepo
+
+There are still a lot of bugs I encounter with this, such as some issues with Fast Refresh. I'm no expert with things like webpack, so I have no clue what I did to cause that.
+
+But having a monorepo is a game changer. It makes it easy to extract things into their own packages down the line, too.
+
+Here's an example of an Expo + Next.js monorepo I made, along with instructions on how to recreate it: https://github.com/nandorojo/expo-next-monorepo
+
+----
+
 ...other things here later
-````
diff --git a/knew.md b/knew.md
@@ -22,6 +22,7 @@ I have made libraries to address a number of the topics here, from navigation to
 - **Global state management**
   \_ **Types\* (How should I keep track of my TypeScript types in React?**
 - **SCHU (Schema, Class, Hook, UI)** This is an acronym I made that describes the way I think about _building features_. YouTube tutorials show you how to do cool things, but the part I missed was a mental model on building robust features.
+- **Typescript Union typeguards** `function isOnboarded(user: User): user is OnboardedUser {}`
 
 ## Style quirks
 

diff --git a/knew.md b/knew.md
@@ -31,7 +31,7 @@ If you're using React Navigation on Expo Web or React Native Web, there might be
 
 Set `cardStyle` on any screens to `{ flex: 1 }`
 
-````jsx
+```jsx
 <Stack.Screen
   name="Artists"
   component={Artists}

diff --git a/knew.md b/knew.md
@@ -6,7 +6,7 @@ It's gotten to the point where I find my own answers from 6 months before on cer
 
 I'll keep adding over time as I think of more. If anyone thinks these topics would be useful, let me know and I'll elaborate.
 
-I have made libraries to address a number of the topics here, too, from navigation to design.
+I have made libraries to address a number of the topics here, from navigation to design.
 
 ## Topics
 

diff --git a/knew.md b/knew.md
@@ -6,7 +6,7 @@ It's gotten to the point where I find my own answers from 6 months before on cer
 
 I'll keep adding over time as I think of more. If anyone thinks these topics would be useful, let me know and I'll elaborate.
 
-Most of these topics have been met with a
+I have made libraries to address a number of the topics here, too, from navigation to design.
 
 ## Topics
 

diff --git a/knew.md b/knew.md
@@ -2,11 +2,11 @@ I started using React Native in September 2018. I always forget some things when
 
 Some topics, such as navigation, will be fundamental to how I think about apps. Others, will be one-line helpers that make apps work more smoothly.
 
-It's gotten to the point where I find my own answers from 6 months before on certain Github issues. 
+It's gotten to the point where I find my own answers from 6 months before on certain Github issues.
 
 I'll keep adding over time as I think of more. If anyone thinks these topics would be useful, let me know and I'll elaborate.
 
-Most of these topics have been met with a 
+Most of these topics have been met with a
 
 ## Topics
 
@@ -20,8 +20,8 @@ Most of these topics have been met with a
 - **Theming** (I want my whole app to have an intuitive design system. What's the best way?)
 - **Caching data** (Should I use redux, or a cache? Should backend data go with other global states?)
 - **Global state management**
-_ **Types* (How should I keep track of my TypeScript types in React?**
-- **SCHU (Schema, Class, Hook, UI)** This is an acronym I made that describes the way I think about _building features_. YouTube tutorials show you how to do cool things, but the part I missed was a mental model on building robust features. 
+  \_ **Types\* (How should I keep track of my TypeScript types in React?**
+- **SCHU (Schema, Class, Hook, UI)** This is an acronym I made that describes the way I think about _building features_. YouTube tutorials show you how to do cool things, but the part I missed was a mental model on building robust features.
 
 ## Style quirks
 
@@ -31,4 +31,24 @@ If you're using React Navigation on Expo Web or React Native Web, there might be
 
 Set `cardStyle` on any screens to `{ flex: 1 }`
 
-...other things here later
+````jsx
+<Stack.Screen
+  name="Artists"
+  component={Artists}
+  options={{
+    headerShown: false,
+    cardStyle: {
+      flex: 1,
+    },
+  }}
+/>
+```
+
+If you don't edit the `cardStyle` here, there will be weird window scrolling, and `onScroll` events might not fire from the `ScrollView` in your screen. Or, you'll have to set fixed heights or something.
+
+I got the work-around [here](https://github.com/react-navigation/react-navigation/issues/6165).
+
+----
+
+...other things here later
+````
diff --git a/gistfile1.md → knew.md b/gistfile1.md → knew.md
diff --git a/gistfile1.md b/gistfile1.md
@@ -10,17 +10,17 @@ Most of these topics have been met with a
 
 ## Topics
 
-- **Style quirks* (Little things you should do to make sure your app works consistently across platforms.)
-- **Navigation* (How do I create a consistent navigation experience that shares all code on web and native?)
-- **Responsive design* (How do designs look on different screen sizes?
-- **Pseudo classes* (hover states, focus states, touchable states)
-- **Authentication patterns* (how should users sign in? What should they see when?)
-- **Data fetching* (how do I fetch data? from where?)
-- **Real-time data fetching* (I want to set up listeners to my database. How?)
-- **Theming* (I want my whole app to have an intuitive design system. What's the best way?)
-- **Caching data* (Should I use redux, or a cache? Should backend data go with other global states?)
-- **Global state management*
-_ **Types* (How should I keep track of my TypeScript types in React?*
+- **Style quirks** (Little things you should do to make sure your app works consistently across platforms.)
+- **Navigation** (How do I create a consistent navigation experience that shares all code on web and native?)
+- **Responsive design** (How do designs look on different screen sizes?
+- **Pseudo classes** (hover states, focus states, touchable states)
+- **Authentication patterns** (how should users sign in? What should they see when?)
+- **Data fetching** (how do I fetch data? from where?)
+- **Real-time data fetching** (I want to set up listeners to my database. How?)
+- **Theming** (I want my whole app to have an intuitive design system. What's the best way?)
+- **Caching data** (Should I use redux, or a cache? Should backend data go with other global states?)
+- **Global state management**
+_ **Types* (How should I keep track of my TypeScript types in React?**
 - **SCHU (Schema, Class, Hook, UI)** This is an acronym I made that describes the way I think about _building features_. YouTube tutorials show you how to do cool things, but the part I missed was a mental model on building robust features. 
 
 ## Style quirks

diff --git a/gistfile1.md b/gistfile1.md
@@ -10,18 +10,18 @@ Most of these topics have been met with a
 
 ## Topics
 
-- *Style quirks* (Little things you should do to make sure your app works consistently across platforms.)
-- *Navigation* (How do I create a consistent navigation experience that shares all code on web and native?)
-- *Responsive design* (How do designs look on different screen sizes?
-- *Pseudo classes* (hover states, focus states, touchable states)
-- *Authentication patterns* (how should users sign in? What should they see when?)
-- *Data fetching* (how do I fetch data? from where?)
-- *Real-time data fetching* (I want to set up listeners to my database. How?)
-- *Theming* (I want my whole app to have an intuitive design system. What's the best way?)
-- *Caching data* (Should I use redux, or a cache? Should backend data go with other global states?)
-- *Global state management*
-_ *Types* (How should I keep track of my TypeScript types in React?*
-- *SCHU (Schema, Class, Hook, UI)* This is an acronym I made that describes the way I think about _building features_. YouTube tutorials show you how to do cool things, but the part I missed was a mental model on building robust features. 
+- **Style quirks* (Little things you should do to make sure your app works consistently across platforms.)
+- **Navigation* (How do I create a consistent navigation experience that shares all code on web and native?)
+- **Responsive design* (How do designs look on different screen sizes?
+- **Pseudo classes* (hover states, focus states, touchable states)
+- **Authentication patterns* (how should users sign in? What should they see when?)
+- **Data fetching* (how do I fetch data? from where?)
+- **Real-time data fetching* (I want to set up listeners to my database. How?)
+- **Theming* (I want my whole app to have an intuitive design system. What's the best way?)
+- **Caching data* (Should I use redux, or a cache? Should backend data go with other global states?)
+- **Global state management*
+_ **Types* (How should I keep track of my TypeScript types in React?*
+- **SCHU (Schema, Class, Hook, UI)** This is an acronym I made that describes the way I think about _building features_. YouTube tutorials show you how to do cool things, but the part I missed was a mental model on building robust features. 
 
 ## Style quirks
 

diff --git a/gistfile1.txt → gistfile1.md b/gistfile1.txt → gistfile1.md
diff --git a/gistfile1.txt b/gistfile1.txt
@@ -0,0 +1,34 @@
+I started using React Native in September 2018. I always forget some things when I build new apps, so I'll keep track of the gotchas on this post.
+
+Some topics, such as navigation, will be fundamental to how I think about apps. Others, will be one-line helpers that make apps work more smoothly.
+
+It's gotten to the point where I find my own answers from 6 months before on certain Github issues. 
+
+I'll keep adding over time as I think of more. If anyone thinks these topics would be useful, let me know and I'll elaborate.
+
+Most of these topics have been met with a 
+
+## Topics
+
+- *Style quirks* (Little things you should do to make sure your app works consistently across platforms.)
+- *Navigation* (How do I create a consistent navigation experience that shares all code on web and native?)
+- *Responsive design* (How do designs look on different screen sizes?
+- *Pseudo classes* (hover states, focus states, touchable states)
+- *Authentication patterns* (how should users sign in? What should they see when?)
+- *Data fetching* (how do I fetch data? from where?)
+- *Real-time data fetching* (I want to set up listeners to my database. How?)
+- *Theming* (I want my whole app to have an intuitive design system. What's the best way?)
+- *Caching data* (Should I use redux, or a cache? Should backend data go with other global states?)
+- *Global state management*
+_ *Types* (How should I keep track of my TypeScript types in React?*
+- *SCHU (Schema, Class, Hook, UI)* This is an acronym I made that describes the way I think about _building features_. YouTube tutorials show you how to do cool things, but the part I missed was a mental model on building robust features. 
+
+## Style quirks
+
+### 1. Scroll issues
+
+If you're using React Navigation on Expo Web or React Native Web, there might be some issues with scrolling.
+
+Set `cardStyle` on any screens to `{ flex: 1 }`
+
+...other things here later
No results found