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('処理中...');
    
    // イニシャライザーを指定してカスタムランタイムを作成します。
    const customRuntime = createWorkletRuntime('myCustomRuntime', () => {
      'worklet';
      console.log('カスタムランタイムが初期化されました');
    });
 
    // カスタムランタイムでコードを実行します。
    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スレッドを切り替えるデモを示します。
 */
export default function WorkletThreadSwitchExample() {
  const [log, setLog] = useState<string[]>([]);
 
  const addLog = (message: string) => {
    setLog(prev => [...prev, message]);
  };
 
  const handlePress = () => {
    setLog([]);
    
    // JSスレッドで開始します。
    addLog('1. JSスレッドで開始');
    
    // UIスレッドに切り替えます。
    runOnUI(() => {
      'worklet';
      console.log('2. UIスレッドで実行中');
      runOnJS(addLog)('2. UIスレッドで実行中');
      
      // UIスレッドで何らかの処理を行います。
      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,
  },
});