Skip to content

Instantly share code, notes, and snippets.

View nandorojo's full-sized avatar

Fernando Rojo nandorojo

View GitHub Profile
@gragland
gragland / use-optimistic-mutation-example.ts
Last active March 28, 2025 17:18
useOptimisticMutation for React Query. Optimistically update data in multiple locations with rollback on error.
import axios from 'axios'
import { useOptimisticMutation } from "./useOptimisticMutation.ts"
type Response = boolean
type Error = unknown
type MutationVariables = {itemId: string}
type Items = {id: string; name: string}[]
type Likes = {itemId: string}[]
type History = {type: string}[]
import { z } from "zod";
import { zodToTs, printNode } from "zod-to-ts";
// Replace with your `openai` thing
import { openai } from "../openai.server";
import endent from "endent";
function createJSONCompletion<T extends z.ZodType>({
prompt,
schema_name,
export const chaosTestStrings = (): void => {
const textNodes = getAllTextNodes(document.body);
for (const node of textNodes) {
const textNodeLength = node.textContent ? node.textContent.length : 0;
if (node.textContent === null) {
return;
}
if (node.parentElement instanceof Element) {
if (node.parentElement.dataset.originalText === undefined) {
@nderscore
nderscore / TamaguiSolitoTextLink.tsx
Last active October 16, 2024 17:26
Example Tamagui Solito Text Link
@nandorojo
nandorojo / make-plugin.ts
Last active August 20, 2023 05:55
Add Type Safety to Expo config plugins
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
nandorojo / readme.md
Last active June 24, 2022 00:47
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
nandorojo / index.tsx
Last active February 24, 2025 02:07
LayoutView: Moti + Framer Motion + React Native (+ Web)
import { MotiView } from 'moti'
import { styled } from 'dripsy'
import { LayoutViewProps } from './types'
import { Layout } from 'react-native-reanimated'
const LayoutView = ({ state, layout, ...props }: LayoutViewProps) => (
<MotiView
state={state}
layout={
layout === false
@intergalacticspacehighway
intergalacticspacehighway / PinchToZoom.tsx
Last active March 10, 2025 21:02
Pinch to zoom reanimated + gesture handler
import React, { useMemo, useState } from "react";
import { LayoutChangeEvent, StyleSheet } from "react-native";
import {
PinchGestureHandler,
PinchGestureHandlerGestureEvent,
} from "react-native-gesture-handler";
import Animated, {
useAnimatedGestureHandler,
useAnimatedStyle,
useSharedValue,
@mtt87
mtt87 / _middleware.ts
Created December 21, 2021 14:39
Add password protection to any Vercel website, save $150/month.
import { addYears } from 'date-fns'
import { NextRequest, NextResponse } from 'next/server'
function middleware(req: NextRequest) {
if (req.nextUrl.pathname.startsWith('/api')) {
return NextResponse.next()
}
if (process.env.VERCEL_ENV !== 'preview') {
return NextResponse.next()
@EvanBacon
EvanBacon / RootViewBackgroundColor.tsx
Created December 10, 2021 21:44
A stack based Expo component for setting the background color of the root view. Useful for changing the background color on certain screens or inside of native modals. Updates based on Appearance and AppState.
import * as SystemUI from 'expo-system-ui';
import * as React from 'react';
import { Appearance, AppState, AppStateStatus, ColorSchemeName, ColorValue } from 'react-native';
type ThemedColorValue = { light: ColorValue, dark: ColorValue };
type Props = { backgroundColor: ColorValue | ThemedColorValue }
const propsStack: Props[] = [];