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

nandorojo

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

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 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,

marklawlor

diff --git a/node_modules/@expo/next-adapter/build/withExpo.js b/node_modules/@expo/next-adapter/build/withExpo.js
index 2e63eb4..b1cf9a9 100644
--- a/node_modules/@expo/next-adapter/build/withExpo.js
+++ b/node_modules/@expo/next-adapter/build/withExpo.js
@@ -7,8 +7,8 @@ function withExpo(nextConfig = {}) {
             // Prevent define plugin from overwriting Next.js environment.
             process.env.EXPO_WEBPACK_DEFINE_ENVIRONMENT_AS_KEYS = 'true';
             const expoConfig = addons_1.withUnimodules(config, {
-                projectRoot: nextConfig.projectRoot || process.cwd(),
-            }, { supportsFontLoading: false });

acro5piano

import {
  Exchange,
  cacheExchange,
  createClient,
  dedupExchange,
  fetchExchange,
  subscriptionExchange,
} from 'urql'
import { delay, empty, fromPromise, map, mergeMap, pipe, tap } from 'wonka'
import firebase from 'firebase' // NOTE: This is old Firebase version

mrousavy

In computing, memoization or memoisation
is an optimization technique used primarily
to speed up computer programs by storing
the results of expensive function calls and  
returning the cached result when the same
inputs occur again.                                         
                                                     — wikipedia

brandtnewlabs

import React, { useEffect } from 'react'
import Animated, {
	useAnimatedStyle,
	useSharedValue,
	withDelay,
	withSpring,
	withTiming
} from 'react-native-reanimated'

const ScaleInOut = ({

nandorojo

// pages/_app.js

import ReactNativeNextJsScrollRestore from '../react-native-next-scroll-restore'
import { useEffect } from 'react'

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const unsubscribe = ReactNativeNextJsScrollRestore.initialize()

    return () => {

nandorojo

import { useEffect, useRef } from 'react'

export default function useOnChange<T>(
  value: T,
  effect: (prev: T, next: T) => void
) {
  const latestValue = useRef(value)
  const callback = useRef(effect)
  callback.current = effect