I'm working on a React Native app that streams images from a WebSocket server at a high frame rate. The server sends the image data in the format: image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD....

The HTML implementation I created works perfectly fine and streams the frames smoothly without any issues:

<script>
const WS_URL = "ws://192.168.38.61:8080";
const frameElement = document.getElementById("frame");
const ws = new WebSocket(WS_URL);

ws.onmessage = (event) => {
    frameElement.src = event.data; // Set the img src to the incoming frame
};

but in my React Native app, I experience a couple of problems:

The app flashes black between frames The frames do not update smoothly idk they seem stuck or refresh very slowly. Here's my React Native code:

import React, { useEffect, useState } from "react";
import { View, Image, StyleSheet, Text } from "react-native";

const PROXY_SERVER_PORT = "ws://192.168.38.61:8080";

export default function App() {
const [frame, setFrame] = useState<string | null>(null);

useEffect(() => {
    const ws = new WebSocket(PROXY_SERVER_PORT);

    ws.onopen = () => {
        console.log("Connected to WebSocket server");
    };

    ws.onmessage = (event) => {
        setFrame(event.data); // Incoming base64 image data
    };

    ws.onerror = (error) => {
        console.error("WebSocket error:", error);
    };

    ws.onclose = () => {
        console.log("WebSocket connection closed");
    };

    return () => ws.close();
}, []);

return (
    <View style={styles.container}>
        {frame ? (
            <Image
                source={{ uri: frame }}
                style={styles.imageStyle}
                resizeMode="cover"
            />
        ) : (
            <Text>Waiting for frame data...</Text>
        )}
    </View>
);
}

const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: "#000",
    justifyContent: "center",
    alignItems: "center",
},
imageStyle: {
    width: "100%",
    height: "100%",
},
});

How can I achieve smooth and consistent updates for the streamed images in the React Native app, like in the HTML implementation?