@@ -27,6 +27,13 @@ export default function Layout() {
           title: 'Classification',
         }}
       />
+      <Drawer.Screen
+        name="styleTransfer/index"
+        options={{
+          drawerLabel: 'Style Transfer',
+          title: 'Style Transfer',
+        }}
+      />
       <Drawer.Screen
         name="segmentation/index"
         options={{
 
@@ -14,6 +14,9 @@ export default function Home() {
         <TouchableOpacity style={styles.button} onPress={() => router.navigate('classification/')}>
           <Text style={styles.buttonText}>Classification</Text>
         </TouchableOpacity>
+        <TouchableOpacity style={styles.button} onPress={() => router.navigate('styleTransfer/')}>
+          <Text style={styles.buttonText}>Style Transfer</Text>
+        </TouchableOpacity>
         <TouchableOpacity style={styles.button} onPress={() => router.navigate('segmentation/')}>
           <Text style={styles.buttonText}>Semantic Segmentation</Text>
         </TouchableOpacity>
 
@@ -0,0 +1,219 @@
+import React, { useState } from 'react';
+import { View, Text, ScrollView, Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { commonStyles, theme } from '../../theme';
+import {
+  useImage,
+  Skia,
+  ColorType,
+  AlphaType,
+  type SkImage as SkiaImageType,
+} from '@shopify/react-native-skia';
+import { useStyleTransfer, models } from 'react-native-executorch';
+import ScreenWrapper from '../../components/ScreenWrapper';
+import { getImage } from '../../utils';
+import { ModelPicker, type ModelOption } from '../../components/ModelPicker';
+import { ImageViewport } from '../../components/ImageViewport';
+import { ModelStatus } from '../../components/ModelStatus';
+import { LatencyIndicator } from '../../components/LatencyIndicator';
+import { Button } from '../../components/Button';
+
+const MODEL_OPTIONS: ModelOption[] = [
+  {
+    label: 'Candy (XNNPACK INT8)',
+    value: models.styleTransfer.CANDY.XNNPACK_INT8,
+  },
+  {
+    label: 'Candy (CoreML FP16)',
+    value: models.styleTransfer.CANDY.COREML_FP16,
+    disabled: Platform.OS !== 'ios',
+  },
+  {
+    label: 'Mosaic (XNNPACK INT8)',
+    value: models.styleTransfer.MOSAIC.XNNPACK_INT8,
+  },
+  {
+    label: 'Mosaic (CoreML FP16)',
+    value: models.styleTransfer.MOSAIC.COREML_FP16,
+    disabled: Platform.OS !== 'ios',
+  },
+  {
+    label: 'Rain Princess (XNNPACK INT8)',
+    value: models.styleTransfer.RAIN_PRINCESS.XNNPACK_INT8,
+  },
+  {
+    label: 'Rain Princess (CoreML FP16)',
+    value: models.styleTransfer.RAIN_PRINCESS.COREML_FP16,
+    disabled: Platform.OS !== 'ios',
+  },
+  {
+    label: 'Udnie (XNNPACK INT8)',
+    value: models.styleTransfer.UDNIE.XNNPACK_INT8,
+  },
+  {
+    label: 'Udnie (CoreML FP16)',
+    value: models.styleTransfer.UDNIE.COREML_FP16,
+    disabled: Platform.OS !== 'ios',
+  },
+];
+
+function StyleTransferContent() {
+  const insets = useSafeAreaInsets();
+  const [selectedModel, setSelectedModel] = useState<any>(MODEL_OPTIONS[0].value);
+  const [imageUri, setImageUri] = useState<string | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [styledImage, setStyledImage] = useState<SkiaImageType | null>(null);
+  const [showOriginal, setShowOriginal] = useState(false);
+  const [latency, setLatency] = useState<number | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const skiaImage = useImage(imageUri, (err) => setError(err.message || String(err)));
+
+  const {
+    isReady,
+    downloadProgress,
+    error: loadError,
+    transferStyle,
+    transferStyleWorklet,
+  } = useStyleTransfer(selectedModel);
+
+  const handlePickImage = async (useCamera: boolean) => {
+    setError(null);
+    try {
+      const uri = await getImage(useCamera);
+      if (uri) {
+        setImageUri(uri);
+        setStyledImage(null);
+        setShowOriginal(false);
+        setLatency(null);
+      }
+    } catch (e: any) {
+      setError(e.message || String(e));
+    }
+  };
+
+  const runStyleTransfer = async (sync: boolean) => {
+    if (!skiaImage || !transferStyle || !transferStyleWorklet) return;
+    if (!sync) setIsProcessing(true);
+    setError(null);
+    try {
+      const pixels = skiaImage.readPixels();
+      if (!pixels) {
+        throw new Error('Failed to read pixels from image');
+      }
+      if (!(pixels instanceof Uint8Array)) {
+        throw new Error('Expected Uint8Array from readPixels');
+      }
+      const buffer = {
+        data: pixels,
+        width: skiaImage.width(),
+        height: skiaImage.height(),
+        format: 'rgba' as const,
+        layout: 'hwc' as const,
+      };
+
+      const start = Date.now();
+      const output = sync ? transferStyleWorklet(buffer) : await transferStyle(buffer);
+
+      setLatency(Date.now() - start);
+
+      const outData = Skia.Data.fromBytes(output.data);
+      const info = {
+        width: skiaImage.width(),
+        height: skiaImage.height(),
+        colorType: ColorType.RGBA_8888,
+        alphaType: AlphaType.Premul,
+      };
+      const skiaStyled = Skia.Image.MakeImage(info, outData, skiaImage.width() * 4);
+      if (skiaStyled) {
+        setStyledImage(skiaStyled);
+        setShowOriginal(false);
+      } else {
+        throw new Error('Failed to decode styled image in Skia');
+      }
+    } catch (e: any) {
+      setError(e.message || String(e));
+    } finally {
+      if (!sync) setIsProcessing(false);
+    }
+  };
+
+  const activeError = loadError ? String(loadError) : error;
+  const activeImage = showOriginal ? skiaImage : (styledImage ?? skiaImage);
+
+  return (
+    <ScrollView
+      style={commonStyles.container}
+      contentContainerStyle={[
+        commonStyles.contentContainer,
+        { paddingBottom: insets.bottom + theme.spacing.large },
+      ]}
+    >
+      <Text style={commonStyles.description}>
+        Upload or capture an image to apply artistic style transfer filters.
+      </Text>
+
+      <ModelPicker
+        label="Style Model"
+        options={MODEL_OPTIONS}
+        selectedValue={selectedModel}
+        onValueChange={(model) => {
+          setSelectedModel(model);
+          setStyledImage(null);
+          setShowOriginal(false);
+          setLatency(null);
+          setError(null);
+        }}
+      />
+
+      <ModelStatus
+        isReady={isReady}
+        downloadProgress={downloadProgress}
+        error={activeError}
+        modelTypeLabel="style transfer model"
+      />
+
+      <ImageViewport skiaImage={activeImage} onPressPlaceholder={() => handlePickImage(false)} />
+
+      <View style={commonStyles.buttonRow}>
+        <Button title="Gallery" onPress={() => handlePickImage(false)} variant="secondary" />
+        <Button title="Camera" onPress={() => handlePickImage(true)} variant="secondary" />
+      </View>
+
+      <View style={commonStyles.buttonRow}>
+        <Button
+          title="Run Async"
+          onPress={() => runStyleTransfer(false)}
+          disabled={!skiaImage || !isReady || isProcessing}
+          loading={isProcessing}
+        />
+        <Button
+          title="Run Sync"
+          onPress={() => runStyleTransfer(true)}
+          disabled={!skiaImage || !isReady || isProcessing}
+          variant="accent"
+        />
+      </View>
+
+      {styledImage && (
+        <View style={commonStyles.buttonRow}>
+          <Button
+            title={showOriginal ? 'Show Styled' : 'Show Original'}
+            onPress={() => setShowOriginal(!showOriginal)}
+            variant="secondary"
+          />
+        </View>
+      )}
+
+      <LatencyIndicator latency={latency} />
+    </ScrollView>
+  );
+}
+
+export default function StyleTransferScreen() {
+  return (
+    <ScreenWrapper>
+      <StyleTransferContent />
+    </ScreenWrapper>
+  );
+}
@@ -0,0 +1,126 @@
+import type { WorkletRuntime } from 'react-native-worklets';
+
+import { tensor } from '../../../core/tensor';
+import { loadModel } from '../../../core/model';
+import { validateModelSchema, SymbolicTensor } from '../../../core/modelSchema';
+import { wrapAsync } from '../../../core/runtime';
+
+import type { ImageBuffer } from '../image';
+import { createImagePreprocessor, type ImagePreprocessorOptions } from './preprocessing';
+import {
+  toChannelsLast,
+  normalize,
+  cvtColor,
+  resize,
+  type InterpolationMethod,
+} from '../ops/image';
+
+/**
+ * Options for configuring the style transfer preprocessor and postprocessor.
+ * @category Types
+ */
+export type StyleTransferOptions = Omit<ImagePreprocessorOptions, 'resizeMode'> & {
+  readonly resizeMode: 'stretch';
+  readonly outAlpha: number | number[];
+  readonly outBeta: number | number[];
+  readonly outInterpolation: InterpolationMethod;
+};
+
+/**
+ * Model configuration required to instantiate a style transfer task runner.
+ * @category Types
+ */
+export type StyleTransferModel = {
+  readonly modelPath: string;
+  readonly opts: StyleTransferOptions;
+};
+
+/**
+ * Creates an image style transfer runner for executing local style transfer models.
+ *
+ * It validates the model inputs and outputs requirements, pre-allocates
+ * the necessary static execution tensors, sets up an image preprocessor, and
+ * registers clean disposal hooks to clear all native memory.
+ * @category Typescript API
+ * @param config Style transfer task configuration containing path and options.
+ * @param runtime Optional worklet runtime thread on which to run the model execution.
+ * @returns A promise resolving to an object containing style transfer and disposal controls.
+ */
+export async function createStyleTransfer(
+  config: StyleTransferModel,
+  runtime?: WorkletRuntime
+): Promise<{
+  /**
+   * Releases all allocated native resources.
+   */
+  dispose: () => void;
+  /**
+   * Performs asynchronous image style transfer on the given input image.
+   * @param input The input image buffer.
+   * @returns A promise resolving to the styled image buffer.
+   */
+  transferStyle: (input: ImageBuffer) => Promise<ImageBuffer>;
+  /**
+   * Synchronous version of {@link transferStyle} to be executed directly on the
+   * caller or worklet thread.
+   */
+  transferStyleWorklet: (input: ImageBuffer) => ImageBuffer;
+}> {
+  const { modelPath, opts } = config;
+  const model = await wrapAsync(loadModel, runtime)(modelPath);
+
+  const meta = validateModelSchema(
+    model,
+    'forward',
+    [SymbolicTensor('float32', [1, 3, 'H', 'W'], [3, 'H', 'W'])],
+    [SymbolicTensor('float32', [1, 3, 'H', 'W'], [3, 'H', 'W'])]
+  );
+  const inpShape = meta.inputTensorMeta[0]!.shape;
+  const outShape = meta.outputTensorMeta[0]!.shape;
+
+  const targetH = outShape.at(-2)!;
+  const targetW = outShape.at(-1)!;
+
+  const tensors = [
+    tensor('float32', outShape),
+    tensor('float32', [3, targetH, targetW]),
+    tensor('uint8', [3, targetH, targetW]),
+    tensor('uint8', [targetH, targetW, 3]),
+    tensor('uint8', [targetH, targetW, 4]),
+  ] as const;
+
+  const [tOutput, tReshape, tUint8, tChanLast, tRgba] = tensors;
+  const preprocessor = createImagePreprocessor(opts, inpShape);
+
+  const dispose = () => {
+    tensors.forEach((t) => t.dispose());
+    preprocessor.dispose();
+    model.dispose();
+  };
+
+  const transferStyleWorklet = (input: ImageBuffer): ImageBuffer => {
+    'worklet';
+    const tInput = preprocessor.process(input);
+    model.execute('forward', [tInput], [tOutput]);
+
+    const data = new Uint8Array(input.width * input.height * 4);
+    const tResize = tensor('uint8', [input.height, input.width, 4]);
+    try {
+      tOutput
+        .copyTo(tReshape)
+        .through(normalize, tUint8, { alpha: opts.outAlpha, beta: opts.outBeta })
+        .through(toChannelsLast, tChanLast)
+        .through(cvtColor, tRgba, 'RGB2RGBA')
+        .through(resize, tResize, { mode: 'stretch', interpolation: opts.outInterpolation })
+        .getData(data);
+    } finally {
+      tResize.dispose();
+    }
+
+    return { data, width: input.width, height: input.height, format: 'rgba', layout: 'hwc' };
+  };
+
+  const transferStyle = wrapAsync(transferStyleWorklet, runtime);
+
+  return { transferStyle, transferStyleWorklet, dispose };
+}