nandorojo

import { StyleSheet } from 'react-native'
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated'
import { AnimateHeightProps } from './index.types'

const transition = { duration: 200 } as const

nandorojo

1 NPM_TOKEN

Add an NPM_TOKEN secret on GitHub. Get your secret key from the NPM dashboard.

2 Add a step to your action

- name: Authenticate with private NPM package
  run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc

nandorojo

import React, { ComponentProps } from 'react'
import { ScrollView } from 'react-native'
import { useDraggableScroll } from './use-draggable-scroll'

export const DraggableScrollView = React.forwardRef<
  ScrollView,
  ComponentProps<typeof ScrollView>
>(function DraggableScrollView(props, ref) {
  const { refs } = useDraggableScroll<ScrollView>({
    outerRef: ref,

nandorojo

I started using React Native in September 2018. I always forget some things when I build new apps, so I'll keep track of the gotchas on this post.

Some topics, such as navigation, will be fundamental to how I think about apps. Others, will be one-line helpers that make apps work more smoothly.

It's gotten to the point where I find my own answers from 6 months before on certain Github issues.

I'll keep adding over time as I think of more. If anyone thinks these topics would be useful, let me know and I'll elaborate.

I have made libraries to address a number of the topics here, from navigation to design.

nandorojo

Shared Element Transitions with React Navigation and Expo (2019)

It's 2019, and creating smooth shared element transitions in react native (& expo!) is finally easy.

Ideally, as Pablo Stanley suggests, your app's navigation will use these shared transitions for similar components that appear across screens.

Is it possible to achieve the great experience above using react-native/expo? Now it is.

nandorojo

import { createContext as create, useContext } from 'react'

export function createContext<T>(initial?: T) {
  const ctx = create<T>(initial ?? (null as any))

  return Object.assign(
    function Provider(props: React.ComponentProps<typeof ctx.Provider>) {
      return <ctx.Provider {...props} />
    },
    ctx,

nandorojo

import * as schema from './schema' // make this point to your schema file
import { PgEnum, PgTableWithColumns } from 'drizzle-orm/pg-core'
import { createInsertSchema, createSelectSchema } from 'drizzle-zod'
import { z } from 'zod'

type ExtractPgTableKeys<T> = {
  [K in keyof T]: T[K] extends PgTableWithColumns<any> ? K : never
}[keyof T]

export const selects = Object.fromEntries(

nandorojo

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

name: Expo Preview
on:
  push:
    branches: [dev*, preview*]
    paths:
      - "**.ts"
      - "**.tsx"
      - "**.js"
      - "**.json"
      - "**.jsx"

nandorojo

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