Compiler's function outlining breaks React Native Reanimated's API callbacks.
The React Compiler's `enableFunctionOutlining` feature incorrectly transforms `react-native-reanimated` API callbacks, causing runtime errors. The issue stems from the inability to infer whether extracted functions should be workletized. Fixing this requires keeping functions defined in a worklet within the worklet scope, but the solution involves complex interactions with React Native's multithreading APIs and Metro bundler.
Current version the Compiler started to transform react-native-reanimated API callbacks too much, breaking the code. I compared it with an older version [email protected] and the problem didn't happen there. It seems to be due to the enableFunctionOutlining feature.
Given the code:
const TestComponent = ({ number }) => {
const keyToIndex = useDerivedValue(() =>
[1, 2, 3].map(() => null)
);
return null;
};
Compiler changes it to
const TestComponent = (t0) => {
useDerivedValue(_temp2);
return null;
};
function _temp() {
return null;
}
function _temp2() {
return [1, 2, 3].map(_temp);
}
Note that _temp and _temp2 are extracted outside. It's ok to extract _temp2, the callback of useDerivedValue, it's handled on our side as a part of the support for the Compiler. It's not ok to extract _temp.
The problem lies in the fact that we can (and we do) deduce that _temp2 must be a worklet, but we cannot in general infer if _temp should be a worklet. This leads to _temp not being workletized and causing a runtime error. We also can't workletize it regardless, in some flows it actually shouldn't be a worklet.
To fix it we need to keep all functions defined in a worklet to stay in this worklet.
Claim this issue to let others know you're working on it. You'll earn 30 points when you complete it!