Skip to content

Instantly share code, notes, and snippets.

View nandorojo's full-sized avatar

Fernando Rojo nandorojo

View GitHub Profile
nandorojo / provider.native.tsx
Last active March 16, 2024 11:28
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 /
Last active November 8, 2023 22:51
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 {
} from '@tamagui/create-theme'
import { mauve, slate, mauveDark, slateDark } from '@tamagui/colors'
nandorojo /
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.


  "dependencies": {
    "moti18": "npm:moti@0.18.0"
nandorojo /
Last active May 27, 2024 14:49
How to create an iOS Widget with React Native (Expo / EAS)

First, copy the config plugin from this repo:

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).


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 / rhf.ts
Created March 29, 2023 18:40
React Hook Form TypeScript Wrapper
import {
nandorojo / eas-update-sentry.ts
Last active May 31, 2024 02:49
EAS Update + Sentry Source Maps
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('Sentry source maps script. Working directory:'))
nandorojo /
Last active March 30, 2023 16:40
How to use TypeScript 5.0 Beta with Expo SDK 48 or 47
nandorojo /
Last active February 1, 2024 13:26
URQL Simple Pagination Hook implementation

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).

Be sure to use useMemo with your variables!

It comes with typesafety too.

const document = graphql(`
nandorojo / hover.tsx
Created February 2, 2023 16:17
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
// it's also used by MotiPressable's hover interactions