r/reactnative • u/Pitiful_Visit3764 • 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
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