Closed as not planned
Description
I was using the skia to make react native app same as instagram story making using image and video later on when i am able to use it i have uploaded the video to app and used to render using below code but faced crash as before it was working fine but now its causing crash
React version:
"react": "18.2.0",
"react-native": "0.73.2",
Steps To Reproduce
1.In skia added useVideo and uploaded video to use it.
2.Faced this crash unexpectedly was not exist.
The react it self asking to report this bug due to missing the queue.
code sample below:
import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import { View, StyleSheet, PixelRatio, Dimensions } from 'react-native';
import { Canvas, Image as SkiaImage, useImage, ColorMatrix, Path, useCanvasRef, useVideo } from '@shopify/react-native-skia';
import { ScreenHeight, ScreenWidth } from '../utils/Constants/dimensionUtils';
import EditImages from './EditImage';
import StickerItem from './StickerHandler/StickerItem';
import { runOnJS, useSharedValue, withTiming } from 'react-native-reanimated';
const { width, height } = Dimensions.get('screen');
interface CanvasEditorProps {
backgroundImage: string | null;
selectedFilter: number[];
images: { uri: string; stickers?: { uri: string }[]; additionalImages?: any[] };
itemDragging: (value: boolean) => boolean;
isDeletable: (id: number, type: string, value: boolean) => boolean;
capture: (data: any) => void;
type: string;
}
interface IPath {
segments: string[];
color?: string;
isComplete?: boolean;
}
export interface CanvasEditorHandle {
handleCapture: () => Promise<void>;
}
const CanvasEditor = forwardRef<CanvasEditorHandle, CanvasEditorProps>(
({ backgroundImage, itemDragging, isDeletable, selectedFilter, images, capture, type }, ref) => {
const [paths, setPaths] = useState<IPath[]>([]);
const image = useImage(backgroundImage);
const paused = useSharedValue(false);
const seek = useSharedValue(1);
const looping = useSharedValue(true);
const volume = useSharedValue(1);
const videoData = type=='video'? useVideo(backgroundImage, { paused, seek, looping, volume })
: null;
const { currentFrame, size } = videoData||{}
const canvasRef = useCanvasRef();
const pixelRatio = PixelRatio.get();
useEffect(() => {
if (!backgroundImage) {
setPaths([]);
}
}, [backgroundImage]);
useEffect(() => {
if (backgroundImage) {
paused.value = false;
seek.value = withTiming(0, { duration: 300 });
}
}, [backgroundImage]);
const handleCapture = async () => {
if (canvasRef?.current) {
const imageSnapshot = await canvasRef.current.makeImageSnapshot();
capture(imageSnapshot);
}
};
useImperativeHandle(ref, () => ({ handleCapture }));
const StickerRenderer: React.FC<{ id: number; sticker: { uri: string } }> = ({ id, sticker }) => {
return (
<View style={{ position: 'absolute', top: '40%', left: '40%' }}>
<StickerItem
id={id}
sticker={sticker}
itemDragging={itemDragging}
isDeletable={(id, type, bool) => isDeletable(id, type, bool)}
/>
</View>
);
};
const StickerList: React.FC<{ stickers: { uri: string }[] }> = ({ stickers }) => (
<>
{stickers?.map((sticker) => (
<StickerRenderer key={sticker.uri} id={sticker.uri} sticker={sticker} />
))}
</>
);
return (
<View style={styles.canvasContainer}>
<Canvas ref={canvasRef} key={backgroundImage || 'empty'} style={{ width: ScreenWidth, height: ScreenHeight + 110 }}>
{backgroundImage && image && (
<SkiaImage x={0} y={0} width={ScreenWidth} height={ScreenHeight} image={image} fit={'contain'}>
{paths.map((p, index) => (
<Path key={index} path={p.segments.join(' ')} strokeWidth={5} style="stroke" color={p.color} />
))}
{images?.matrix?.length > 0 && <ColorMatrix matrix={images.matrix} />}
</SkiaImage>
)}
</Canvas>
{backgroundImage && currentFrame && (
<Canvas style={StyleSheet.absoluteFill}>
<SkiaImage image={currentFrame} x={0} y={0} width={ScreenWidth} height={ScreenHeight} fit="cover" />
</Canvas>
)}
<EditImages matrix={images?.matrix} imagesFiles={images?.additionalImages} itemDragging={itemDragging} isDeletable={isDeletable} />
<StickerList key={images?.stickers?.length} stickers={images?.stickers} />
</View>
);
}
);
const styles = StyleSheet.create({
canvasContainer: {
width: '100%',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default CanvasEditor;
The current behavior
The expected behavior
Should not crash
My pacakge json
{
"name": "mediaeditor",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start --reset-cache",
"test": "jest"
},
"dependencies": {
"@react-native-camera-roll/camera-roll": "^7.7.0",
"@react-native-community/blur": "^4.4.1",
"@react-native-documents/picker": "9.3.1",
"@shopify/react-native-skia": "^1.10.2",
"ffmpeg-kit-react-native": "^6.0.2",
"react": "18.2.0",
"react-native": "0.73.2",
"react-native-color-matrix-image-filters": "^6.0.9",
"react-native-fs": "^2.20.0",
"react-native-gesture-handler": "2.21.2",
"react-native-image-crop-picker": "^0.42.0",
"react-native-image-picker": "^7.2.3",
"react-native-modal": "^13.0.1",
"react-native-reanimated": "3.16.7",
"react-native-redash": "^18.1.3",
"react-native-safe-area-context": "^4.10.8",
"react-native-screens": "3.31.1",
"react-native-track-player": "^4.1.1",
"react-native-vision-camera": "4.0.0-beta.13",
"react-native-web": "^0.19.13",
"reanimated-color-picker": "3.0.6"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native/babel-preset": "0.73.19",
"@react-native/eslint-config": "0.73.2",
"@react-native/metro-config": "0.73.3",
"@react-native/typescript-config": "0.73.1",
"@types/react": "^18.2.6",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.6.3",
"eslint": "^8.19.0",
"jest": "^29.6.3",
"prettier": "2.8.8",
"react-test-renderer": "18.2.0",
"typescript": "5.0.4"
},
"engines": {
"node": ">=18"
}
}