Skip to content

Instantly share code, notes, and snippets.


Fernando Rojo nandorojo

View GitHub Profile
nandorojo / make-plugin.ts
Last active Oct 1, 2022
Add Type Safety to Expo config plugins
View make-plugin.ts
import { ConfigPlugin } from '@expo/config-plugins'
export const makePlugin = <F extends ConfigPlugin<any>, A extends Parameters<F>[1]>(
f: F,
a: A
): [F, A] => {
return [f, a]
nandorojo / grid.tsx
Last active Jul 31, 2022
React Native Grid with Dripsy
View grid.tsx
import React from 'react'
import { View, useDripsyTheme, useResponsiveValue, Theme as DripsyTheme } from 'dripsy'
import { pickChild } from './pick-child'
type Props = {
* Number of columns that should appear. If you want different columns at different screen sizes, use an array of numbers.
columns?: number | number[]
children: React.ReactNode
View gist.ts
export function useSellerBookingRequestPersonalized() {
const getArtistsWhoMaybeCouldBid = ({ artists, bookingRequest }) => {
return artists?.filter((artist) =>
const getAreAllMyBidsRejected = ({ artists, bookingRequest }) => {
const artistsWhoMaybeCouldBid = getArtistsWhoMaybeCouldBid({
nandorojo /
Last active Jun 24, 2022
How to restart an Expo / Next.js app

If you need to restart a React Native app, and you're using Expo, then this gist will help you do it.

It also comes with web support.

Keep in mind, this will only work if you're using a custom dev client from Expo. If you aren't, then you should delete lines 11-13, and you won't be able to restart the app in dev mode.

nandorojo / index.tsx
Last active Sep 5, 2022
LayoutView: Moti + Framer Motion + React Native (+ Web)
View index.tsx
import { MotiView } from 'moti'
import { styled } from 'dripsy'
import { LayoutViewProps } from './types'
import { Layout } from 'react-native-reanimated'
const LayoutView = ({ children, state, layout }: LayoutViewProps) => (
layout === false
nandorojo / preview.yml
Last active Jul 11, 2022
Create EAS Update Preview on each commit
View preview.yml
name: Expo Preview
branches: [dev*, preview*]
- "**.ts"
- "**.tsx"
- "**.js"
- "**.json"
- "**.jsx"
View animate-height.tsx
import React, { useState, useEffect, useRef } from 'react'
import { View as MotiView, TransitionConfig, useDynamicAnimation } from 'moti'
import { StyleSheet, Platform } from 'react-native'
type Props = {
children?: React.ReactNode
* If `true`, the height will automatically animate to 0. Default: `false`.
hide?: boolean
nandorojo / index.tsx
Last active Dec 9, 2021
Expo Apple Auth
View index.tsx
import type {
} from 'expo-apple-authentication'
import { Image, Platform, Pressable, StyleSheet, Text } from 'react-native'
import { useEffect } from 'react'
nandorojo / links.tsx
Created Nov 29, 2021
React Native + Next.js Link Components
View links.tsx
nandorojo /
Last active Nov 16, 2021
Taming TypeScript autoimport in a monorepo

Taming TypeScript autoimport in a monorepo


TypeScript's VSCode plugin doesn't use transitive dependencies for autoimport.

This means that, in a given subpackage, you have to list all the dependencies you want it to be able to autoimport.

That is, TypeScript will look in your package.json, not your node_modules folder to know what to autoimport.