react-native-worklets-core

import React, { useEffect } from 'react'; import { View, Text, StyleSheet } from 'react-native'; import { Worklets, useRunOnJS } from 'react-native-worklets-core'; // Important: Add the babel plugin to your babel.config.js: // module.exports = { // plugins: [ // ["react-native-worklets-core/plugin"], // // ... other plugins // ], // // ... // }; const logFromJS = (message) => { console.log(`[JS Thread] ${message}`); }; export default function App() { // Memoize the JS callback to be safely called from a worklet const logFromJSWorklet = useRunOnJS(logFromJS, []); useEffect(() => { // Define a worklet function const heavyWorklet = () => { 'worklet'; // The worklet pragma is crucial let sum = 0; for (let i = 0; i < 100000000; i++) { sum += Math.sqrt(i); } const message = `Calculation complete: ${sum.toFixed(2)}`; logFromJSWorklet(message); // Call back to JS thread from worklet }; // Run the worklet on a default background context Worklets.defaultContext.runAsync(heavyWorklet); console.log('[Main App] Initiating heavy worklet...'); }, [logFromJSWorklet]); return ( <View style={styles.container}> <Text style={styles.text}>Check your Metro logs for Worklet output!</Text> <Text style={styles.subText}>Heavy calculation running on a background thread.</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0', }, text: { fontSize: 18, fontWeight: 'bold', marginBottom: 10, }, subText: { fontSize: 14, color: '#666', }, });