Skip to content

Instantly share code, notes, and snippets.

Avatar

Fernando Rojo nandorojo

View GitHub Profile
@nandorojo
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) =>
bookingRequest?.artist_ids?.includes(artist.id)
);
};
const getAreAllMyBidsRejected = ({ artists, bookingRequest }) => {
const artistsWhoMaybeCouldBid = getArtistsWhoMaybeCouldBid({
artists,
@nandorojo
nandorojo / readme.md
Last active Jun 24, 2022
How to restart an Expo / Next.js app
View readme.md

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 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) => (
<MotiView
state={state}
layout={
layout === false
@nandorojo
nandorojo / preview.yml
Last active Jul 11, 2022
Create EAS Update Preview on each commit
View preview.yml
name: Expo Preview
on:
push:
branches: [dev*, preview*]
paths:
- "**.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
nandorojo / index.tsx
Last active Dec 9, 2021
Expo Apple Auth
View index.tsx
import type {
AppleAuthenticationButtonStyle,
AppleAuthenticationButtonType,
AppleAuthenticationUserDetectionStatus,
AppleAuthenticationButtonProps,
AppleAuthenticationCredential,
AppleAuthenticationSignInOptions,
} from 'expo-apple-authentication'
import { Image, Platform, Pressable, StyleSheet, Text } from 'react-native'
import { useEffect } from 'react'
@nandorojo
nandorojo / links.tsx
Created Nov 29, 2021
React Native + Next.js Link Components
View links.tsx
@nandorojo
nandorojo / autocomplete.md
Last active Nov 16, 2021
Taming TypeScript autoimport in a monorepo
View autocomplete.md

Taming TypeScript autoimport in a monorepo

Context

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.

@nandorojo
nandorojo / README.md
Last active Jul 6, 2022
Expo + Next.js Query Param state
View README.md

Expo + Next.js Query Params State 🦦

A typical use-case on web for maintaining React State is your URL's query parameters. It lets users refresh pages & share links without losing their spot in your app.

URL-as-state is especially useful on Next.js, since next/router will re-render your page with shallow navigation.

This gist lets you leverage the power of URL-as-state, while providing a fallback to React state for usage in React Native apps.

It's essentially a replacement for useState.