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';
 
* カスタムワークレットランタイムの例
 * 並列処理のためにカスタムワークレットランタイムを作成して使用するデモを示します。
 // イニシャライザーを指定してカスタムランタイムを作成します。
 */
export default function WorkletCustomRuntimeExample() {
  const [result, setResult] = useState<string>('');
 
  const handlePress = () => {
    setResult('Processing...');
    
    // カスタムランタイムでコードを実行します。
    const customRuntime = createWorkletRuntime('myCustomRuntime', () => {
      'worklet';
      console.log('カスタムランタイムが初期化されました');
    });
 
    // UIスレッドやJSスレッドをブロックすることなく負荷の高い計算を実行します。
    runOnRuntime(customRuntime, () => {
      'worklet';
      console.log('カスタムランタイムで実行しています');
      
      // UIスレッドやJSスレッドをブロックすることなく負荷の高い計算を実行します。
      let sum = 0;
      for (let i = 0; i < 1000000; i++) {
        sum += i;
      }
      
      const result = `計算完了！ 合計値：${sum}`;
      console.log(result);
      runOnJS(setResult)(result);
    })();
  };
 
  return (
    <View style={styles.container}>
      <Text style={styles.title}>カスタムワークレットランタイム</Text>
      <Text style={styles.description}>
        特定用途のワークロード用に分離されたJavaScriptランタイムを作成します。
        {'\n\n'}
        これにより、UIスレッドやJSスレッドをブロックすることなく負荷の高い計算を並行して実行できます。
      </Text>
      <Button title="カスタムランタイムで実行" 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';
 
* スレッドの切り替えの例
 * JavaScriptスレッドとUIスレッドを切り替えるデモを示します。
 // JSスレッドで開始します。
 */
export default function WorkletThreadSwitchExample() {
  const [log, setLog] = useState<string[]>([]);
 
  const addLog = (message: string) => {
    setLog(prev => [...prev, message]);
  };
 
  const handlePress = () => {
    setLog([]);
    
    // UIスレッドに切り替えます。
    addLog('1. JSスレッドで開始');
    
    // UIスレッドで何らかの処理を行います。
    runOnUI(() => {
      'worklet';
      console.log('2. UIスレッドで実行中');
      runOnJS(addLog)('2. UIスレッドで実行中');
      
      // JSスレッドにコールバックします。
      const sum = Array.from({ length: 100 }, (_, i) => i).reduce((a, b) => a + b, 0);
      console.log('3. UIスレッドで計算された合計値：', sum);
      runOnJS(addLog)(`3. 計算された合計値：${sum}`);
      
      // JSスレッドにコールバックします。
      runOnJS(addLog)('4. JSスレッドに戻る');
    })();
  };
 
  return (
    <View style={styles.container}>
      <Text style={styles.title}>スレッドの切り替え</Text>
      <Text style={styles.description}>
        runOnUIとrunOnJSを使用してJavaScriptスレッドとUIスレッドを切り替えるデモを行います。
      </Text>
      <Button title="スレッドを切り替え" 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,
  },
});