pugson

demo.mp4

iOS 26 Liquid Glass Tab Bar Minimize on Scroll in React Native

Liquid Glass tab bars can minimize into a compact floating pill when you scroll. SwiftUI makes this easy with .tabBarMinimizeBehavior(.onScrollDown) but if you're using React Native with react-native-bottom-tabs, it doesn't work virtualized list libraries like LegendList or FlashList. Here is a simple patch to get it working.

Usage

Apply the patch with your package manager (bun, pnpm, yarn, etc.) and make a new native build, then pass minimizeBehavior to your tab navigator:

pugson

const { withAppDelegate } = require("expo/config-plugins");
const {
	mergeContents,
} = require("@expo/config-plugins/build/utils/generateCode");

const withExpoP3 = (config) => {
	return withAppDelegate(config, (config) => {
		if (
			config.modResults.language === "objc" ||
			config.modResults.language === "objcpp"

pugson

Preview

See the demo on Twitter

Rough prototype of visualizing my sleep data with Visx and Framer Motion.

This is a code snippet from a Next.js 14 app. Uses the Oura v2 API to get data from your account.

pugson

import fs from "fs/promises";
import path from "path";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const APPS_DIRECTORY = path.resolve(__dirname, "../../apps");

// Common SVG attributes that need renaming to camelCase for JSX
const attributeReplacements = {

pugson

blueprint:
  name: Philips Hue Tap Dial Light Brightness Control
  description: Use the Philips Hue Tap Dial to control the brightness of a light.
  domain: automation
  input:
    tap_dial:
      name: Tap Dial
      description: The tap dial to use. Select the battery sensor that is exposed.
      selector:
        entity:

pugson

"use client";
import { FastAverageColor } from "fast-average-color";
import { useEffect, useState } from "react";

const fac = new FastAverageColor();

export function ImageWithAvgColor({ src }: { src: string }) {
  const [avgColor, setAvgColor] = useState<string>("transparent");

  useEffect(() => {

pugson

const { CI, PORT = 3000, VERCEL_ENV, NEXT_PUBLIC_VERCEL_ENV, VERCEL_URL, NEXT_PUBLIC_VERCEL_URL } = process.env;

export const ENVIRONMENT = VERCEL_ENV || NEXT_PUBLIC_VERCEL_ENV;

const baseDomainSource = CI ? VERCEL_URL : NEXT_PUBLIC_VERCEL_URL;
const baseDomain = baseDomainSource;

let BASE_URL: string;

if (ENVIRONMENT === 'preview') {

pugson

SVG Attribute	JSX Property
class	className
fill-opacity	fillOpacity
stroke-opacity	strokeOpacity
stroke-width	strokeWidth
stroke-linecap	strokeLinecap
stroke-linejoin	strokeLinejoin
stroke-dasharray	strokeDasharray
stroke-dashoffset	strokeDashoffset

pugson

import * as React from 'react';

const useIsFirstRender = (): boolean => {
  const isFirst = React.useRef(true);

  if (isFirst.current) {
    isFirst.current = false;

    return true;
  } else {

pugson

ytd-watch-flexy[full-bleed-player] #player-full-bleed-container.ytd-watch-flexy {
    max-height: calc(100vh - 56px) !important;
}

ytd-watch-flexy[fullscreen] #player-full-bleed-container.ytd-watch-flexy {
    max-height: none !important;
}