Skip to content

Instantly share code, notes, and snippets.

Avatar

Fernando Rojo nandorojo

View GitHub Profile
View theme.ts
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 April 20, 2023 15:40
How to rename an NPM package in your `package.json`
View npm-rename.md

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:moti@0.18.0"
  }
}
@nandorojo
nandorojo / widget.md
Last active May 20, 2023 20:40
How to create an iOS Widget with React Native (Expo / EAS)
View widget.md

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
View rhf.ts
import {
FormProvider,
useForm,
useWatch,
useFormState,
useFormContext,
Path,
ControllerProps,
Controller,
UseFormProps,
@nandorojo
nandorojo / eas-update-sentry.ts
Last active May 24, 2023 22:51
EAS Update + Sentry Source Maps
View eas-update-sentry.ts
import { getConfig } from '@expo/config'
import fs from 'fs'
import spawnAsync from '@expo/spawn-async'
import chalk from 'chalk'
import path from 'path'
const appDir = process.cwd()
console.log()
console.log(chalk.green('Sentry source maps script. Working directory:'))
@nandorojo
nandorojo / expo-ts5.md
Last active March 30, 2023 16:40
How to use TypeScript 5.0 Beta with Expo SDK 48 or 47
View expo-ts5.md
@nandorojo
nandorojo / readme.md
Last active April 4, 2023 21:31
URQL Simple Pagination Hook implementation
View readme.md

This hook lets you use pagination from URQL. I needed a better solution for React Native and infinite lists.

It also has a pullToRefresh option. Since URQL's pull to refreshes are so insanely flickery, I decided to fake this completely, and make it pretend to spin for one second (plenty for most calls).

It comes with typesafety too.

const document = graphql(`
  query Users($limit: Int!, $offset: Int!) {
 users(limit: $limit, offset: $offset) {
@nandorojo
nandorojo / hover.tsx
Created February 2, 2023 16:17
Hoverable
View hover.tsx
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
let isEnabled = false;
// the following logic comes from the creator of react-native-web
// https://gist.github.com/necolas/1c494e44e23eb7f8c5864a2fac66299a
// it's also used by MotiPressable's hover interactions
// https://github.com/nandorojo/moti/blob/master/packages/interactions/src/pressable/hoverable.tsx
@nandorojo
nandorojo / expo-ts49.md
Last active February 27, 2023 15:58
How to use TypeScript 4.9 `satisfies` with Expo SDK 47
View expo-ts49.md
@nandorojo
nandorojo / next.config.js
Last active January 13, 2023 19:33
next config
View next.config.js
const withPlugins = require('next-compose-plugins')
const getTranspiledPackages = () => {
const path = require('path')
const fs = require('fs')
const node_modules = path.resolve(__dirname, '../..', 'node_modules')
const monorepoScope = '@beatgig'