Skip to content

Instantly share code, notes, and snippets.

View nandorojo's full-sized avatar

Fernando Rojo nandorojo

View GitHub Profile
@nandorojo
nandorojo / drizzle-zod-helpers.ts
Last active November 12, 2024 17:43
Drizzle Zod Inserts & Selects from Schema Generator
import * as schema from './schema' // make this point to your schema file
import { PgEnum, PgTableWithColumns } from 'drizzle-orm/pg-core'
import { createInsertSchema, createSelectSchema } from 'drizzle-zod'
import { z } from 'zod'
type ExtractPgTableKeys<T> = {
[K in keyof T]: T[K] extends PgTableWithColumns<any> ? K : never
}[keyof T]
export const selects = Object.fromEntries(
@nandorojo
nandorojo / xcrun-fix.md
Created November 5, 2024 16:23
Fix that xcrun simctl boot error from React Native iOS simulator

You just got this error after running npx expo run:ios or building React Native locally:

Error: xcrun simctl boot 62F02616-B3DF-4F78-9770-74AD88CB7DC2 exited with non-zero code: 60
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=60):
Unable to boot the Simulator.
launchd failed to respond.
Underlying error (domain=com.apple.SimLaunchHostService.RequestError, code=4):
        Failed to start launchd_sim: could not bind to session, launchd_sim may have crashed or quit responding
@nandorojo
nandorojo / expo-fix.md
Created October 2, 2024 17:58
How to fix this common Expo iOS error

If you get this error running npx expo run:ios:

Error: xcrun simctl boot 62F02616-B3DF-4F78-9770-74AD88CB7DC2 exited with non-zero code: 60
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=60):
Unable to boot the Simulator.
launchd failed to respond.
Underlying error (domain=com.apple.SimLaunchHostService.RequestError, code=4):
        Failed to start launchd_sim: could not bind to session, launchd_sim may have crashed or quit responding
Error: xcrun simctl boot 62F02616-B3DF-4F78-9770-74AD88CB7DC2 exited with non-zero code: 60
@nandorojo
nandorojo / create-context.tsx
Last active September 21, 2024 19:51
A much better createContext, usable before React 19, with good TypeScript Types
import { createContext as create, useContext } from 'react'
export function createContext<T>(initial?: T) {
const ctx = create<T>(initial ?? (null as any))
return Object.assign(
function Provider(props: React.ComponentProps<typeof ctx.Provider>) {
return <ctx.Provider {...props} />
},
ctx,
@nandorojo
nandorojo / provider.native.tsx
Last active July 5, 2024 03:48
Next.js / Solito canGoBack()
// this won't ever get imported on native, but we put this file here to make that clear
export default ({children}) => children
@nandorojo
nandorojo / rn-for-web.md
Last active November 24, 2024 15:42
I learned React Native as a web developer, and I got everything wrong

When I built my first React Native app, I had some prior web experience. Using React on iOS and Android felt like a natural way to apply my skills.

But I was suprised to learn, the hard way, that my web-developer-way-of-thinking didn't apply to native apps.

To understand why, let's start with the navigation layout. Each website has unique page primitives. The header at the top of the page, the sidebar menu, the footers – they're all hand-rolled.

You write a <header> and all you get is an empty box. You then use your own JavaScript and CSS to make it useful.

The way these elements look and feel is part of your brand. If your header looks just like another website, something feels off.

import {
MaskOptions,
addChildren,
applyMask,
createStrengthenMask,
createTheme,
createWeakenMask,
} from '@tamagui/create-theme'
import { mauve, slate, mauveDark, slateDark } from '@tamagui/colors'
@nandorojo
nandorojo / npm-rename.md
Last active May 4, 2024 23:15
How to rename an NPM package in your `package.json`

Add the package name you want to your package.json dependencies, and then make the value npm:<actual-package-name>. You can also add a version to the end.

package.json

{
  "dependencies": {
    "moti18": "npm:[email protected]"
  }
}
@nandorojo
nandorojo / widget.md
Last active October 2, 2024 16:56
How to create an iOS Widget with React Native (Expo / EAS)

First, copy the config plugin from this repo: https://github.com/gaishimo/eas-widget-example

You can reference my PRs there too (which, at the time of writing, aren't merged).

After adding the config plugin (see app.json) with your dev team ID, as well as a bundle ID, you can edit the widget folder to edit your code. Then npx expo run:ios (or npx expo run:android).

Workflow

After npx expo run:ios, open the ios folder, and open the file that ends in .xcworkspace in XCode. Make sure you have the latest macOS and XCode versions. If you don't, everything will break.

@nandorojo
nandorojo / rhf.ts
Created March 29, 2023 18:40
React Hook Form TypeScript Wrapper
import {
FormProvider,
useForm,
useWatch,
useFormState,
useFormContext,
Path,
ControllerProps,
Controller,
UseFormProps,