⚡️ Unstable Rendering

Stability Issues

Some components may render differently between test runs due to:

• Moving Elements - animations, videos
• Network Images - external URL images
• Dynamic Data - API data, timestamps

Moving Elements

Components with animations and videos can cause inconsistent screenshots between test runs

Solution - Static Elements

import { isRunningVisualTests } from "@sherlo/react-native-storybook";

function MovingComponent() {
  return (
    <>
      {/* ❌ Animated - unreliable */}
      <Loader animated={true} />
      
      {/* ✅ Disabled animation in tests */}
      <Loader animated={!isRunningVisualTests} />
      
      {/* ❌ Playing video - unreliable */}
      <Video />
      
      {/* ✅ Paused video in tests */}
      <Video paused={isRunningVisualTests} />
    </>
  );
}

Network Images

Network-loaded images may fail or differ due to timeouts, server overload, or CDN issues

Solution - Local Images

import { isRunningVisualTests } from "@sherlo/react-native-storybook";

function ImageComponent() {
  return (
    <>
      {/* ❌ Network image - unreliable */}
      <Image source={{ uri: "https://example.com/image.jpg" }} />
      
      {/* ✅ Local image */}
      <Image source={require("../assets/image.jpg")} />
      
      {/* ✅ Local image as URI */}
      <Image 
        source={{ 
          uri: Image.resolveAssetSource(require("../assets/image.jpg")).uri 
        }} 
      />
      
      {/* ✅ Local image in tests */}
      <Image 
        source={isRunningVisualTests 
          ? require("../assets/image.jpg")
          : { uri: "https://example.com/image.jpg" }
        } 
      />
    </>
  );
}

Dynamic Data

Real-time data like API responses and timestamps change between test runs, causing visual differences

Solution - Static Data

import { isRunningVisualTests } from "@sherlo/react-native-storybook";

function DataComponent() {
  return (
    <>
      {/* ❌ Live API data - unreliable */}
      <Text>Price: {getPrice()}</Text>
      
      {/* ✅ Mocked API data in tests */}
      <Text>
        Price: {isRunningVisualTests ? "$4.20" : getPrice()}
      </Text>
      
      {/* ❌ Live timestamp - unreliable */}
      <Text>{new Date().toLocaleString()}</Text>
      
      {/* ✅ Static timestamp in tests */}
      <Text>
        {isRunningVisualTests 
          ? "Apr 2, 2005 9:37 PM" 
          : new Date().toLocaleString()
        }
      </Text>
    </>
  );
}