Unstable rendering

Fix flaky screenshots by making animations, network images, and dynamic data render the same way on every test run.

Find what makes screenshots flaky​

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>
    </>
  );
}