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

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

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

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

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

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

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