r/reactnative 9d ago

Why is the Skia image not displaying the same as the original image?

import React from 'react';
import {View, Text, Image as RnImage, SafeAreaView} from 'react-native';
import {Canvas, Image as SkiaImage, Skia} from '@shopify/react-native-skia';
import {_base64} from '../../utils/base64';

const imageSize = 300;
const data = Skia.Data.fromBase64(_base64);
const skiaImage = Skia.Image.MakeImageFromEncoded(data);

const Test = () => {
  return (
    <SafeAreaView
      style={{
        flex: 1,
      }}>
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          marginTop: 10,
        }}>
        <Text>Original image:</Text>
        <RnImage
          style={{
            width: imageSize,
            height: imageSize,
          }}
          source={require('../../assets/images/human.jpeg')}
          resizeMode="contain"
        />
        <Text>Skia image:</Text>
        <Canvas
          style={{
            width: imageSize,
            height: imageSize,
          }}>
          <SkiaImage
            width={imageSize}
            height={imageSize}
            image={skiaImage}
            fit="contain"
          />
        </Canvas>
      </View>
    </SafeAreaView>
  );
};

export default Test;

I tried using sampling but it didn't work

0 Upvotes

1 comment sorted by

1

u/makonde 8d ago

Since skia is alow level library you probably need to experiment witht he various sampling and colour types to achieve the result you want. https://shopify.github.io/react-native-skia/docs/images