intergalacticspacehighway

name	expo-ui-doc-screenshots
description	Add hero screenshots to Expo UI SwiftUI / Jetpack Compose component docs. Renders the example in bare-expo, captures both light and dark mode, embeds via the theme-aware ComponentDiagram with a fixed 3:2 or 9:16 canvas (zero CLS).

When to use

User wants to add a hero image to an @expo/ui component doc page so users see the component as soon as the page loads. Each component gets two screenshots (light and dark) that swap automatically based on the docs site's theme.

Paths

intergalacticspacehighway

import { TextInput } from 'react-native';
import Animated, {
  useAnimatedRef,
  useHandler,
  dispatchCommand,
  useEvent,
} from 'react-native-reanimated';

const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);

intergalacticspacehighway

import { useEffect, useRef } from "react";
import { View } from "react-native";

import Animated, {
  useAnimatedStyle,
  useSharedValue,
} from "react-native-reanimated";

// Example
export default function App() {

intergalacticspacehighway

import Networking from "react-native/Libraries/Network/RCTNetworking.ios";

// Same import from .android
// import Networking from "react-native/Libraries/Network/RCTNetworking.android";

let streamingServer = "Streaming Server URL";

let requestId = null;

intergalacticspacehighway

import {Dimensions, FlatList, View} from 'react-native';

const screenWidth = Dimensions.get('window').width;
const numColumns = 2;
const gap = 5;

const availableSpace = screenWidth - (numColumns - 1) * gap;
const itemSize = availableSpace / numColumns;

const renderItem = ({item}) => {

intergalacticspacehighway

import React from "react";
import { Dimensions, TextInput, ScrollView } from "react-native";

import Animated, {
  useAnimatedKeyboard,
  useAnimatedReaction,
  runOnJS,
  KeyboardState,
  useAnimatedProps,
  useAnimatedScrollHandler,

intergalacticspacehighway

import { useEffect, useRef } from "react";
import { AppState, AppStateStatus } from "react-native";

export const useFetchOnAppForeground = () => {
  const listener = useRef(null);

  function fetchOnAppForeground(params) {
    if (AppState.currentState === "active") {
      return fetch(params);
    } else {

intergalacticspacehighway

import { createContext, forwardRef, useCallback, useMemo } from "react";
import { FlatList, FlatListProps, ViewToken } from "react-native";
import Animated, { useSharedValue } from "react-native-reanimated";

const MAX_VIEWABLE_ITEMS = 4;

type ViewabilityItemsContextType = string[];

export const ViewabilityItemsContext = createContext<
  Animated.SharedValue<ViewabilityItemsContextType>

intergalacticspacehighway

diff --git a/node_modules/react-native/Libraries/Components/View/ReactNativeViewViewConfig.js b/node_modules/react-native/Libraries/Components/View/ReactNativeViewViewConfig.js
index 4d6f0dd..e120116 100644
--- a/node_modules/react-native/Libraries/Components/View/ReactNativeViewViewConfig.js
+++ b/node_modules/react-native/Libraries/Components/View/ReactNativeViewViewConfig.js
@@ -13,104 +13,104 @@ import ReactNativeViewViewConfigAndroid from './ReactNativeViewViewConfigAndroid
 import {Platform} from 'react-native';
 
 const ReactNativeViewConfig = {
-  uiViewClassName: 'RCTView',
+  uiViewClassName: "RCTView",

intergalacticspacehighway

function App() {
  const data = Array(10).fill(0);
  const GAP = 5;
  const numColumns = 3;
  const { width } = Dimensions.get("window");
  // Reduce the size to accomodate margin space by items
  const ITEM_SIZE = width / numColumns - ((numColumns - 1) * GAP) / numColumns;

  const renderItem = ({ index }) => {