nandorojo

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

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

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

// credit to https://gist.github.com/ianmartorell/32bb7df95e5eff0a5ee2b2f55095e6a6
// this file was repurosed from there
// via this issue https://gist.github.com/necolas/1c494e44e23eb7f8c5864a2fac66299a
// because RNW's pressable doesn't bubble events to parent pressables: https://github.com/necolas/react-native-web/issues/1875

/* eslint-disable no-inner-declarations */
import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'

let isEnabled = false

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

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

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

diff --git a/node_modules/expo-dev-launcher/plugin/build/withDevLauncher.js b/node_modules/expo-dev-launcher/plugin/build/withDevLauncher.js
index 04c1d7d..a166618 100644
--- a/node_modules/expo-dev-launcher/plugin/build/withDevLauncher.js
+++ b/node_modules/expo-dev-launcher/plugin/build/withDevLauncher.js
@@ -20,7 +20,7 @@ const DEV_LAUNCHER_ON_NEW_INTENT = `
 `;
 const DEV_LAUNCHER_WRAPPED_ACTIVITY_DELEGATE = `DevLauncherController.wrapReactActivityDelegate(this, () -> $1);`;
 const DEV_LAUNCHER_ANDROID_INIT = 'DevLauncherController.initialize(this, getReactNativeHost());';
-const DEV_LAUNCHER_POD_IMPORT = "pod 'expo-dev-launcher', path: '../node_modules/expo-dev-launcher', :configurations => :debug";
+const DEV_LAUNCHER_POD_IMPORT = "pod 'expo-dev-launcher', path: '../../../node_modules/expo-dev-launcher', :configurations => :debug";

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

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