react-native-worklets

import React, { useState } from 'react';
import { Button, StyleSheet, View, Text } from 'react-native';
import { createWorkletRuntime, runOnRuntime, runOnJS } from '@amazon-devices/react-native-worklets';
 
/**
 * Custom Worklet Runtime Example
 * Demonstrates creating and using custom worklet runtimes for parallel processing
 */
export default function WorkletCustomRuntimeExample() {
  const [result, setResult] = useState<string>('');
 
  const handlePress = () => {
    setResult('Processing...');
    
    // Create a custom runtime with an initializer
    const customRuntime = createWorkletRuntime('myCustomRuntime', () => {
      'worklet';
      console.log('Custom runtime initialized!');
    });
 
    // Run code on the custom runtime
    runOnRuntime(customRuntime, () => {
      'worklet';
      console.log('Running on custom runtime');
      
      // Perform heavy computation without blocking UI or JS thread
      let sum = 0;
      for (let i = 0; i < 1000000; i++) {
        sum += i;
      }
      
      const result = `Computation complete! Sum: ${sum}`;
      console.log(result);
      runOnJS(setResult)(result);
    })();
  };
 
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Custom Worklet Runtime</Text>
      <Text style={styles.description}>
        Creates an isolated JavaScript runtime for specialized workloads.
        {'\n\n'}
        This allows heavy computations to run in parallel without blocking the UI or JS thread.
      </Text>
      <Button title="Run on Custom Runtime" onPress={handlePress} />
      {result && <Text style={styles.result}>{result}</Text>}
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 12,
  },
  description: {
    fontSize: 14,
    color: '#666',
    marginBottom: 20,
    lineHeight: 20,
  },
  result: {
    marginTop: 20,
    fontSize: 16,
    color: '#007AFF',
    fontWeight: '500',
  },
});

import React, { useState } from 'react';
import { Button, StyleSheet, View, Text, ScrollView } from 'react-native';
import { runOnUI, runOnJS } from '@amazon-devices/react-native-worklets';
 
/**
 * Thread Switching Example
 * Demonstrates switching between JavaScript and UI threads
 */
export default function WorkletThreadSwitchExample() {
  const [log, setLog] = useState<string[]>([]);
 
  const addLog = (message: string) => {
    setLog(prev => [...prev, message]);
  };
 
  const handlePress = () => {
    setLog([]);
    
    // Start on JS thread
    addLog('1. Starting on JS thread');
    
    // Switch to UI thread
    runOnUI(() => {
      'worklet';
      console.log('2. Now on UI thread');
      runOnJS(addLog)('2. Now on UI thread');
      
      // Do some work on UI thread
      const sum = Array.from({ length: 100 }, (_, i) => i).reduce((a, b) => a + b, 0);
      console.log('3. Computed sum on UI thread:', sum);
      runOnJS(addLog)(`3. Computed sum: ${sum}`);
      
      // Call back to JS thread
      runOnJS(addLog)('4. Back on JS thread');
    })();
  };
 
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Thread Switching</Text>
      <Text style={styles.description}>
        Demonstrates switching between JavaScript and UI threads using runOnUI and runOnJS.
      </Text>
      <Button title="Switch Threads" onPress={handlePress} />
      {log.length > 0 && (
        <ScrollView style={styles.logContainer}>
          {log.map((entry, index) => (
            <Text key={index} style={styles.logEntry}>{entry}</Text>
          ))}
        </ScrollView>
      )}
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 12,
  },
  description: {
    fontSize: 14,
    color: '#666',
    marginBottom: 20,
    lineHeight: 20,
  },
  logContainer: {
    marginTop: 20,
    maxHeight: 300,
    padding: 12,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  logEntry: {
    fontSize: 14,
    color: '#333',
    marginVertical: 4,
  },
});