React Native Worklets not sending data to JS Main thread

[BraveEvidence]

I have this code

import { useState } from 'react';
import {
  FlatList,
  StatusBar,
  Text,
  TouchableOpacity,
  useColorScheme,
  View,
} from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { createWorkletRuntime, runOnRuntime } from 'react-native-worklets';
function App() {
  const isDarkMode = useColorScheme() === 'dark';
  const [todos, setTodos] = useState<any[]>([]);

  function fetchFromWorkletRuntime(setTodos: (data: any[]) => void) {
    const fetchRuntime = createWorkletRuntime('background');

    runOnRuntime(fetchRuntime, () => {
      'worklet';

      fetch('https://jsonplaceholder.typicode.com/todos', {
        method: 'GET',
      })
        .then(response => response.json())
        .then(json => {
          // Call JS-side function
          setTodos(json);
        })
        .catch(error => {
          console.error(`Fetch error: ${error.message}`);
        });
    });
  }

  return (
    <SafeAreaProvider>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <TouchableOpacity
        style={{ marginTop: 80 }}
        onPress={() => {
          fetchFromWorkletRuntime(setTodos);
        }}
      >
        <Text>Call the API</Text>
      </TouchableOpacity>
      <FlatList
        data={todos}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => (
          <View
            style={{
              padding: 12,
              borderBottomWidth: 1,
              borderBottomColor: '#ddd',
            }}
          >
            <Text style={{ fontSize: 16, fontWeight: 'bold', color: 'red' }}>
              {item.title}
            </Text>
            <Text>Status: {item.completed ? 'Completed' : 'Pending'}</Text>
          </View>
        )}
      />
    </SafeAreaProvider>
  );
}

export default App;

Can someone guide me on why my data is not showing up

[akug17]

You have to switch the thread here i think
So you got the data on separate runtime which basically another thread here, no you want to set a state which exists on RN runtime, try something like this

runOnRuntime(fetchRuntime, () => {
'worklet';
fetch('https://jsonplaceholder.typicode.com/todos', {
method: 'GET',
})
.then(response => response.json())
.then(json => {
// Call JS-side function
scheduleOnRN(setTodos)(json);
})
.catch(error => {
console.error(Fetch error: ${error.message});
});
});

[BraveEvidence]

Thanks for the reply, I updated the code like this

function fetchFromWorkletRuntime() {
   const fetchRuntime = createWorkletRuntime('background');

   runOnRuntime(fetchRuntime, () => {
     'worklet';

     fetch('https://jsonplaceholder.typicode.com/todos', {
       method: 'GET',
     })
       .then(response => response.json())
       .then(json => {
         // Switch back to JS thread safely
         scheduleOnRN(() => {
           setTodos(json);
         });
       })
       .catch(error => {
         scheduleOnRN(() => {
           console.error(`Fetch error: ${error.message}`);
         });
       });
   });
 }

but still I don't get the data in my useState

[akug17]

try this

scheduleOnRN(setTodos)(json);

[pritish-sawant]

Nope, still not working. in fact i get error saying

This expression is not callable.
  Type 'void' has no call signatures.

[tomekzaw]

Should be scheduleOnRN(setTodos, json);

[BraveEvidence]

Thanks but I still don't see the data in FlatList, here is the updated code, I am not sure what am I missing

function App() {
  const isDarkMode = useColorScheme() === 'dark';
  const [todos, setTodos] = useState<any[]>([]);

  function fetchFromWorkletRuntime() {
    const fetchRuntime = createWorkletRuntime('background');

    runOnRuntime(fetchRuntime, () => {
      'worklet';

      fetch('https://jsonplaceholder.typicode.com/todos', {
        method: 'GET',
      })
        .then(response => response.json())
        .then(json => {
          // Switch back to JS thread safely
         scheduleOnRN(setTodos, json);
        })
        .catch(error => {
          scheduleOnRN(() => {
            console.error(`Fetch error: ${error.message}`);
          });
        });
    });
  }

  return (
    <SafeAreaProvider>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <TouchableOpacity
        style={{ marginTop: 80 }}
        onPress={() => {
          fetchFromWorkletRuntime();
        }}
      >
        <Text>Call the API</Text>
      </TouchableOpacity>
      <FlatList
        data={todos}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => (
          <View
            style={{
              padding: 12,
              borderBottomWidth: 1,
              borderBottomColor: '#ddd',
            }}
          >
            <Text style={{ fontSize: 16, fontWeight: 'bold', color: 'red' }}>
              {item.title}
            </Text>
            <Text>Status: {item.completed ? 'Completed' : 'Pending'}</Text>
          </View>
        )}
      />
    </SafeAreaProvider>
  );
}

[tjzel]

Hi @BraveEvidence, fetch is not yet available on Worklet Runtimes. See #8690.