nandorojo

Here are my attempts to use webpack 5 with Expo's Next.js integration.

Next v10.2 uses webpack5 by default. However, this breaks @expo/next-adapater.

Relevant PR

In order to test / reproduce this, I added this PR to my Expo + Next.js monorepo starter: nandorojo/expo-next-monorepo#1

HTML Webpack Plugin

nandorojo

name: Build Binary App
on:
  push:
    branches: [binary-release, binary-beta]
  workflow_dispatch:
    inputs:
      platform:
        default: 'ios'
        description: 'Could be "ios", "android", or "all"'
        required: true

nandorojo

import { MotiView, AnimatePresence } from 'moti'
import { View } from 'dripsy'
import React, { useMemo, memo } from 'react'
import { StyleSheet } from 'react-native'
import FastImage from 'react-native-fast-image'
import { useIsFocused } from '@react-navigation/native'

type ArtistCardProps = {
  artists: Record<'profile_image' | 'id', string>[]
  cellWidth: string

nandorojo

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

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

nandorojo

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

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

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

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

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