Skip to content

Instantly share code, notes, and snippets.

View nandorojo's full-sized avatar

Fernando Rojo nandorojo

View GitHub Profile
@nandorojo
nandorojo / private-npm-in-gh-actions.md
Created August 3, 2021 23:52
Use private NPM packages in your GitHub actions

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
nandorojo / knew.md
Last active July 16, 2024 15:34
What I wish I knew when I started with Expo Web, React Navigation & Next.js

I started using React Native in September 2018. I always forget some things when I build new apps, so I'll keep track of the gotchas on this post.

Some topics, such as navigation, will be fundamental to how I think about apps. Others, will be one-line helpers that make apps work more smoothly.

It's gotten to the point where I find my own answers from 6 months before on certain Github issues.

I'll keep adding over time as I think of more. If anyone thinks these topics would be useful, let me know and I'll elaborate.

I have made libraries to address a number of the topics here, from navigation to design.

@nandorojo
nandorojo / animate-height.tsx
Last active July 15, 2024 21:04
Moti Animate Height
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
nandorojo / widget.md
Last active July 8, 2024 23:35
How to create an iOS Widget with React Native (Expo / EAS)

First, copy the config plugin from this repo: https://github.com/gaishimo/eas-widget-example

You can reference my PRs there too (which, at the time of writing, aren't merged).

After adding the config plugin (see app.json) with your dev team ID, as well as a bundle ID, you can edit the widget folder to edit your code. Then npx expo run:ios (or npx expo run:android).

Workflow

After npx expo run:ios, open the ios folder, and open the file that ends in .xcworkspace in XCode. Make sure you have the latest macOS and XCode versions. If you don't, everything will break.

@nandorojo
nandorojo / provider.native.tsx
Last active July 5, 2024 03:48
Next.js / Solito canGoBack()
// this won't ever get imported on native, but we put this file here to make that clear
export default ({children}) => children
@nandorojo
nandorojo / react-native-file-upload.js
Created May 2, 2019 23:30
Upload a file to your server using react native / expo.
/*
IF YOU WANT TO UPLOAD ONE FILE, USE THE CODE BELOW.
SEE THE BOTTOM OF THE GIST TO SEE HOW TO UPLOAD MULTIPLE FILES.
HERE'S AN EXAMPLE SOMEONE MADE USING CLOUDINARY: https://gist.github.com/jamielob/5c1a5dc84e50e4507b71299d993dffec
*/
@nandorojo
nandorojo / use-on-change.ts
Created December 23, 2020 00:12
React Hook that calls a function when a variable changes
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
@nandorojo
nandorojo / eas-update-sentry.ts
Last active May 31, 2024 02:49
EAS Update + Sentry Source Maps
import { getConfig } from '@expo/config'
import fs from 'fs'
import spawnAsync from '@expo/spawn-async'
import chalk from 'chalk'
import path from 'path'
const appDir = process.cwd()
console.log()
console.log(chalk.green('Sentry source maps script. Working directory:'))
@nandorojo
nandorojo / React Navigation Shared Element Transitions.md
Last active May 6, 2024 16:52
Shared Element Transitions with React Navigation and Expo (2019)

Shared Element Transitions with React Navigation and Expo (2019)

It's 2019, and creating smooth shared element transitions in react native (& expo!) is finally easy.

Ideally, as Pablo Stanley suggests, your app's navigation will use these shared transitions for similar components that appear across screens.

Is it possible to achieve the great experience above using react-native/expo? Now it is.

@nandorojo
nandorojo / npm-rename.md
Last active May 4, 2024 23:15
How to rename an NPM package in your `package.json`

Add the package name you want to your package.json dependencies, and then make the value npm:<actual-package-name>. You can also add a version to the end.

package.json

{
  "dependencies": {
    "moti18": "npm:moti@0.18.0"
  }
}