nandorojo

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.

nandorojo

import type { ComponentProps, ComponentType } from 'react'
import {
  Platform,
  Pressable,
  Text,
  TextProps,
  ViewProps,
  View,
} from 'react-native'
import { useLinkProps } from '@react-navigation/native'

EvanBacon

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[] = [];

mtt87

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

intergalacticspacehighway

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,

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

nandorojo

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

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]
}

nderscore

import { forwardRef } from 'react';
import { LinkCore, LinkCoreProps } from 'solito/link';
import { AnchorProps, styled, Anchor } from 'tamagui';

const StyledTextLink = styled(Anchor, {
  name: 'TextLink',
});

export type TextLinkProps = Pick<LinkCoreProps, 'href' | 'target'> &
  AnchorProps;

JohnPhamous

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