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

const withPlugins = require('next-compose-plugins') 

const getTranspiledPackages = () => {
  const path = require('path')
  const fs = require('fs')

  const node_modules = path.resolve(__dirname, '../..', 'node_modules')

  const monorepoScope = '@beatgig'

nandorojo

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
 

let isEnabled = false;

// the following logic comes from the creator of react-native-web
// https://gist.github.com/necolas/1c494e44e23eb7f8c5864a2fac66299a
// it's also used by MotiPressable's hover interactions
// https://github.com/nandorojo/moti/blob/master/packages/interactions/src/pressable/hoverable.tsx

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 { useState } from 'react';
import CryptoJS from 'crypto-js';

// upload a file to cloudinary using React Hooks
// see below for what hooks are
// https://reactjs.org/docs/hooks-intro.html

// make sure you fill these out:
const API_KEY = '';
const SECRET = '';

nandorojo

Are you looking for TypeScript 5.0 support?

---

Add the following resolutions to your package.json:

{
  "resolutions": {
 "@babel/preset-typescript": "^7.18.6",

nandorojo

https://devblogs.microsoft.com/typescript/announcing-typescript-5-0-beta

Babel

Add the following resolutions to your package.json:

{
  "resolutions": {
 "@babel/preset-typescript": "^7.21.0",

nandorojo

import {
  FormProvider,
  useForm,
  useWatch,
  useFormState,
  useFormContext,
  Path,
  ControllerProps,
  Controller,
  UseFormProps,

nandorojo

import {
  MaskOptions,
  addChildren,
  applyMask,
  createStrengthenMask,
  createTheme,
  createWeakenMask,
} from '@tamagui/create-theme'
import { mauve, slate, mauveDark, slateDark } from '@tamagui/colors'

nandorojo

// STEP 0:
// add the segment JS web snippet with your custom segment key to your header on webflow. this is found at your webflow project's dashboard -> custom code -> header.

// STEP 1:
// in the web flow editor, click any element you want to track when clicked, go to its settings, and add custom attributes that follow this pattern:

/*
	~required~ you must add a data-analytics attribute
	data-analytics="YOUR_EVENT_NAME_HERE"