Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/shopify/react-native-skia/llms.txt

Use this file to discover all available pages before exploring further.

Perlin noise shaders generate procedural textures and patterns that are perfect for creating organic, natural-looking effects. React Native Skia provides two types of Perlin noise shaders: Fractal Noise and Turbulence.

​
Fractal Noise

The FractalNoise component creates smooth, continuous noise patterns ideal for clouds, terrain, and organic textures.

​
Props

NameTypeDescription
freqXnumberBase frequency in the X direction (range: 0.0 to 1.0)
freqYnumberBase frequency in the Y direction (range: 0.0 to 1.0)
octavesnumberNumber of noise iterations for detail
seednumberRandom seed for the noise pattern (default: 0)
tileWidthnumberIf non-zero with tileHeight, makes the noise tileable (default: 0)
tileHeightnumberIf non-zero with tileWidth, makes the noise tileable (default: 0)

​
Basic Example

import { Canvas, Rect, FractalNoise, Fill } from "@shopify/react-native-skia";

const FractalNoiseDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Fill color="white" />
      <Rect x={0} y={0} width={256} height={256}>
        <FractalNoise freqX={0.05} freqY={0.05} octaves={4} />
      </Rect>
    </Canvas>
  );
};

​
Understanding Parameters

​
Frequency (freqX, freqY)

Controls the scale of the noise pattern. Lower values create larger, smoother patterns: 
// Large, smooth patterns
<FractalNoise freqX={0.01} freqY={0.01} octaves={2} />

// Medium detail
<FractalNoise freqX={0.05} freqY={0.05} octaves={4} />

// Fine, detailed patterns
<FractalNoise freqX={0.2} freqY={0.2} octaves={6} />

​
Octaves

Determines the level of detail. More octaves add finer details: 
// Simple, smooth
<FractalNoise freqX={0.05} freqY={0.05} octaves={1} />

// Moderate detail
<FractalNoise freqX={0.05} freqY={0.05} octaves={4} />

// Highly detailed
<FractalNoise freqX={0.05} freqY={0.05} octaves={8} />

​
Seed

Changing the seed creates different variations: 
<FractalNoise freqX={0.05} freqY={0.05} octaves={4} seed={0} />
<FractalNoise freqX={0.05} freqY={0.05} octaves={4} seed={42} />
<FractalNoise freqX={0.05} freqY={0.05} octaves={4} seed={123} />

​
Turbulence

The Turbulence component creates more chaotic, energetic patterns suitable for fire, water, or abstract effects.

​
Props

NameTypeDescription
freqXnumberBase frequency in the X direction (range: 0.0 to 1.0)
freqYnumberBase frequency in the Y direction (range: 0.0 to 1.0)
octavesnumberNumber of noise iterations for detail
seednumberRandom seed for the noise pattern (default: 0)
tileWidthnumberIf non-zero with tileHeight, makes the noise tileable (default: 0)
tileHeightnumberIf non-zero with tileWidth, makes the noise tileable (default: 0)

​
Basic Example

import { Canvas, Rect, Turbulence, Fill } from "@shopify/react-native-skia";

const TurbulenceDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Fill color="white" />
      <Rect x={0} y={0} width={256} height={256}>
        <Turbulence freqX={0.05} freqY={0.05} octaves={4} />
      </Rect>
    </Canvas>
  );
};

​
Tileable Patterns

Create seamlessly repeating noise patterns: 
import { Canvas, Rect, FractalNoise } from "@shopify/react-native-skia";

const TileableNoise = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={512} height={512}>
        <FractalNoise
          freqX={0.05}
          freqY={0.05}
          octaves={4}
          tileWidth={256}
          tileHeight={256}
        />
      </Rect>
    </Canvas>
  );
};

​
Creative Applications

​
Cloud Effect

import { Canvas, Rect, FractalNoise, Fill } from "@shopify/react-native-skia";

const Clouds = () => (
  <Canvas style={{ flex: 1 }}>
    <Fill color="#87CEEB" /> {/* Sky blue background */}
    <Rect x={0} y={0} width={256} height={256} opacity={0.8}>
      <FractalNoise freqX={0.02} freqY={0.02} octaves={6} seed={1} />
    </Rect>
  </Canvas>
);

​
Marble Texture

import { Canvas, Rect, Turbulence } from "@shopify/react-native-skia";

const Marble = () => (
  <Canvas style={{ flex: 1 }}>
    <Rect x={0} y={0} width={256} height={256} color="white">
      <Turbulence freqX={0.05} freqY={0.5} octaves={8} seed={10} />
    </Rect>
  </Canvas>
);

​
Organic Background

import { Canvas, Fill, FractalNoise, Blend } from "@shopify/react-native-skia";

const OrganicBackground = () => (
  <Canvas style={{ flex: 1 }}>
    <Fill color="#1a1a2e" />
    <Fill blendMode="overlay">
      <FractalNoise freqX={0.03} freqY={0.03} octaves={5} seed={42} />
    </Fill>
  </Canvas>
);

​
Combining with Other Shaders

​
Blending with Gradients

import { 
  Canvas, 
  Rect, 
  Blend, 
  RadialGradient, 
  Turbulence,
  vec 
} from "@shopify/react-native-skia";

const NoiseGradient = () => (
  <Canvas style={{ flex: 1 }}>
    <Rect x={0} y={0} width={256} height={256}>
      <Blend mode="difference">
        <RadialGradient
          r={128}
          c={vec(128, 128)}
          colors={["blue", "yellow"]}
        />
        <Turbulence freqX={0.05} freqY={0.05} octaves={4} />
      </Blend>
    </Rect>
  </Canvas>
);

​
Multiple Noise Layers

import { Canvas, Rect, Blend, FractalNoise, Fill } from "@shopify/react-native-skia";

const LayeredNoise = () => (
  <Canvas style={{ flex: 1 }}>
    <Fill color="black" />
    <Rect x={0} y={0} width={256} height={256}>
      <Blend mode="screen">
        <FractalNoise freqX={0.02} freqY={0.02} octaves={4} seed={1} />
        <FractalNoise freqX={0.08} freqY={0.08} octaves={2} seed={2} />
      </Blend>
    </Rect>
  </Canvas>
);

​
Colored Noise

import { 
  Canvas, 
  Rect, 
  Blend, 
  ColorShader, 
  Turbulence 
} from "@shopify/react-native-skia";

const ColoredNoise = () => (
  <Canvas style={{ flex: 1 }}>
    <Rect x={0} y={0} width={256} height={256}>
      <Blend mode="multiply">
        <ColorShader color="#ff6b6b" />
        <Turbulence freqX={0.05} freqY={0.05} octaves={4} />
      </Blend>
    </Rect>
  </Canvas>
);

​
Animation

Animate noise by changing the seed value: 
import { Canvas, Rect, FractalNoise } from "@shopify/react-native-skia";
import { useDerivedValue, useSharedValue, withRepeat, withTiming } from "react-native-reanimated";
import { useEffect } from "react";

const AnimatedNoise = () => {
  const progress = useSharedValue(0);
  
  useEffect(() => {
    progress.value = withRepeat(
      withTiming(100, { duration: 5000 }),
      -1,
      false
    );
  }, []);
  
  const seed = useDerivedValue(() => Math.floor(progress.value));
  
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={256} height={256}>
        <FractalNoise 
          freqX={0.05} 
          freqY={0.05} 
          octaves={4} 
          seed={seed}
        />
      </Rect>
    </Canvas>
  );
};

​
Fractal vs Turbulence

​
When to Use Fractal Noise

  • Smooth, continuous patterns
  • Natural textures (clouds, terrain)
  • Subtle background effects
  • Displacement effects

​
When to Use Turbulence

  • Chaotic, energetic effects
  • Fire, smoke, water effects
  • Abstract patterns
  • High-contrast textures

​
Performance Tips

  • Fewer octaves render faster
  • Consider using lower frequencies for large areas
  • Cache noise patterns that don’t change
  • Use tileable noise for repeating patterns
  • Reduce octaves for real-time animation

​
Common Patterns

​
Water Effect

<Turbulence 
  freqX={0.03} 
  freqY={0.01} 
  octaves={6} 
  seed={5}
/>

​
Wood Grain

<FractalNoise 
  freqX={0.5} 
  freqY={0.02} 
  octaves={4} 
  seed={7}
/>

​
Stone Texture

<Turbulence 
  freqX={0.1} 
  freqY={0.1} 
  octaves={8} 
  seed={12}
/>

​
Fog

<FractalNoise 
  freqX={0.01} 
  freqY={0.01} 
  octaves={3} 
  seed={20}
/>

​
See Also