From 19c50b9b03659230863737fe3cef44a9a05757c4 Mon Sep 17 00:00:00 2001 From: Oskar Eichler <62393985+OskarEichler@users.noreply.github.com> Date: Fri, 28 Aug 2026 06:35:26 +0300 Subject: [PATCH] fix(docs): correct v2 examples and make website builds deterministic Use the v2 ref/method/getItemType APIs, remove the retired size estimate, and prepare layout animation before functional data updates. Stop website builds on failure, use the frozen JS lockfile and replace generated docs without nesting/stale pages. Repair malformed markup/Liquid filtering, label icon/video/iframe content and defer below-fold media loading. --- build_website.sh | 13 +++++++--- .../fundamentals/performant-components.md | 1 - documentation/docs/guides/layout-animation.md | 11 +++------ documentation/docs/guides/reanimated.md | 2 +- website/_includes/code_or_image.html | 6 ++--- website/_includes/snippet2.js | 2 +- website/index.html | 24 +++++++++---------- 7 files changed, 30 insertions(+), 29 deletions(-) diff --git a/build_website.sh b/build_website.sh index bcb0c6f13..3dde229b8 100644 --- a/build_website.sh +++ b/build_website.sh @@ -1,7 +1,13 @@ +#!/bin/sh +set -eu + +REPO_ROOT=$(CDPATH= cd -- "$(dirname -- "$0")" && pwd -P) +cd "$REPO_ROOT" + # create Docusaurus docs cd documentation -yarn +yarn --frozen-lockfile yarn build cd .. @@ -11,6 +17,7 @@ cd website bundle exec jekyll build cd .. -# copy Docusaurus genereated files to site +# Copy Docusaurus files without nesting or keeping stale documentation pages. -cp -R documentation/build website/_site/docs +mkdir -p website/_site/docs +rsync -a --delete documentation/build/ website/_site/docs/ diff --git a/documentation/docs/fundamentals/performant-components.md b/documentation/docs/fundamentals/performant-components.md index 309326639..126e23aad 100644 --- a/documentation/docs/fundamentals/performant-components.md +++ b/documentation/docs/fundamentals/performant-components.md @@ -156,7 +156,6 @@ const MessageList = () => { return ( { return item.type; }} diff --git a/documentation/docs/guides/layout-animation.md b/documentation/docs/guides/layout-animation.md index 9fcb82fcf..5b6310ccf 100644 --- a/documentation/docs/guides/layout-animation.md +++ b/documentation/docs/guides/layout-animation.md @@ -25,23 +25,18 @@ For the animation to work properly, you additionally need to add [`keyExtractor` ```tsx import React, { useRef, useState } from "react"; import { View, Text, Pressable, LayoutAnimation } from "react-native"; -import { FlashList } from "@shopify/flash-list"; +import { FlashList, FlashListRef } from "@shopify/flash-list"; const List = () => { const [data, setData] = useState([1, 2, 3, 4, 5]); - const list = useRef | null>(null); + const list = useRef>(null); const removeItem = (item: number) => { - setData( - data.filter((dataItem) => { - return dataItem !== item; - }) - ); // This must be called before `LayoutAnimation.configureNext` in order for the animation to run properly. list.current?.prepareForLayoutAnimationRender(); - // After removing the item, we can start the animation. LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); + setData((current) => current.filter((dataItem) => dataItem !== item)); }; const renderItem = ({ item }: { item: number }) => { diff --git a/documentation/docs/guides/reanimated.md b/documentation/docs/guides/reanimated.md index 0c91990b9..15354f2a8 100644 --- a/documentation/docs/guides/reanimated.md +++ b/documentation/docs/guides/reanimated.md @@ -9,7 +9,7 @@ We support view animations and most of [layout animations](https://docs.swmansio ## Layout Animations -For layout animations, similarly to the React Native API, you need to call [`prepareLayoutAnimationRender()`](/usage#prepareforlayoutanimationrender) before removing or inserting an element that you want to animate. +For layout animations, similarly to the React Native API, you need to call [`prepareForLayoutAnimationRender()`](/usage#prepareforlayoutanimationrender) before removing or inserting an element that you want to animate. ## Hooks diff --git a/website/_includes/code_or_image.html b/website/_includes/code_or_image.html index fb6a01bf6..190be1444 100644 --- a/website/_includes/code_or_image.html +++ b/website/_includes/code_or_image.html @@ -2,9 +2,9 @@ {% highlight tsx %}{% include {{include.code}} %}{% endhighlight %} {% else %} {% if video %} - + {% endif %} {% if image %} -{{include.alt}} +{{include.alt}} +{% endif %} {% endif %} -{% endif %} \ No newline at end of file diff --git a/website/_includes/snippet2.js b/website/_includes/snippet2.js index 59a8334cc..de0ac835a 100644 --- a/website/_includes/snippet2.js +++ b/website/_includes/snippet2.js @@ -2,7 +2,7 @@ renderItem={({ item }) => { return ; }} - getItemType={({ item }) => { + getItemType={(item) => { return item.type; }} data={tweets} diff --git a/website/index.html b/website/index.html index ec53e1daf..a3bdcda62 100644 --- a/website/index.html +++ b/website/index.html @@ -39,12 +39,12 @@

⚡️ {{page.appname}}

- {% for section in site.data.sections %} - {% assign isEven = forloop.index | modulo: 2 | contains: 1 %} + {% assign isEven = forloop.index | modulo: 2 %} {% include section.html title=section.title description=section.description image=section.image video=section.video isEven=isEven code=section.code alt=section.alt %} {% endfor %} @@ -133,7 +133,7 @@

Learn how and why Shopify uses {{page.appname}} Read it now

- Shopify uses FlashList to make commerce better for everyone
@@ -156,7 +156,7 @@

Past Events

- FlashList on the React Advanced London Meetup + React Native Radio podcast

React Native Radio Podcast

Aug 27th, 2022

@@ -180,15 +180,15 @@

React Native EU Conference 2022

-
- @@ -211,7 +211,7 @@

React Advanced London Meetup

recording once it's available.

- FlashList on the React Advanced London Meetup + FlashList on the React Advanced London Meetup
@@ -237,4 +237,4 @@

Expo

-