0.81.0 without framework not support

[phalera]

Describe the bug
After I upgraded to 0.81.0 and added the babel configuration of 'nativewind/babel', the project would report an error when using the FlatList component in react-native-gesture-handler or the Animated in react-native-reanimated.
software-mansion/react-native-gesture-handler#3675
software-mansion/react-native-reanimated#8087

Reproduction

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { FlatList, GestureHandlerRootView } from 'react-native-gesture-handler';

const DATA = [
  { id: '1', text: 'Item 1' },
  { id: '2', text: 'Item 2' },
  { id: '3', text: 'Item 3' },
  { id: '4', text: 'Item 4' },
  { id: '5', text: 'Item 5' },
];

const App = () => {
  return (
    <GestureHandlerRootView style={styles.container}>
      <FlatList
        data={DATA}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.listItem}>
            <Text style={styles.text}>{item.text}</Text>
          </View>
        )}
      />
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
  },
  listItem: {
    padding: 20,
    margin: 2,
    backgroundColor: '#f8f8f8',
    borderBottomWidth: 1,
    borderColor: '#eee',
  },
  text: {
    fontSize: 18,
  },
});

export default App;

⚠️ Important: Issues without a valid reproduction link will not be reviewed and will be automatically closed. Provide one of the following:

• StackBlitz template: https://stackblitz.com/edit/nativewind-test?view=editor
• Create Expo Stack template:
  npm i react-native@0.81.0
  add 'nativewind/babel' to babel

If you have a usage question, please use the Discord or GitHub Discussions instead.

Expected behavior
A clear and concise description of what you expected to happen.

Additional context
Add any other context about the problem here. If applicable, add screenshots to help explain your problem.

[tyhour]

Same issues.

[592da]

Same issue, any workarounds?

[dmitrySmaliak]

Same problem my

module.exports = (api) => {
	api.cache(true);
	return {
		presets: [
			["babel-preset-expo", { jsxImportSource: "nativewind" }],
			"nativewind/babel",
		],
		plugins: [
			[
				'babel-plugin-root-import',
				{
					rootPathPrefix: '~',
					rootPathSuffix: 'src',
				},
			],
		],
	};
};

doesnt work with react-native-gesture-handler/ReanimatedSwipeable

[smoores-dev]

Still looking into this, but this seems to be caused by react-native-css-interops jsx-runtime pragma

[smoores-dev]

Ah, ok. I suspect this is going to all be resolved by v5, so we may need to just wait for that to become available!

[Anon-136]

Does this patch help?
nativewind/nativewind#1560 (comment)

[Pejoal]

Does this patch help? #1560 (comment)

I tried it and it did NOT work.

[benszedlmayer]

Does this patch help? #1560 (comment)

it does work for me 🚀

[smoores-dev]

@Anon-136 this worked for me as well, thank you!! @Pejoal how are you applying the patch?

[Pejoal]

@Anon-136 this worked for me as well, thank you!! @Pejoal how are you applying the patch?

I may did not apply it correctly can you please explain how to do it right?

[smoores-dev]

What package manager are you using?

For yarn v2+, you can use yarn patch, which will output a temp directory with the contents of the package in it. Edit the file dist/runtime/native/api.js in that temp directory as described in @Anon-136's patch, run yarn patch-commit -s <path/to/tmp/dir>, and then run yarn to re-install the newly patched version.

For pnpm, the process is basically the same, but the patch-commit command looks like pnpm patch-commit <path/to/tmp/dir> (no -s flag)

For npm, there is no built-in mechanism for patching packages, but you can use the patch-package package to persist patches. Follow the instructions for that library.

In all cases, when you restart metro after making and applying the patch (make sure you've re-run your package manager's install command (yarn install/pnpm install/npm install)!!), make sure that you use the --clear flag, which will clear out metro's cache directory.

[Pejoal]

@smoores-dev thanks, now it works :) 👍

[tyhour]

Does this patch help? #1560 (comment)

It worked, thanks.

[danstepanov]

Thanks for the proposed solution @smoores-dev, I'll have Mark take a look at the patch and clarify whether this has been addressed or still needs to be in an upcoming version.

I'm not seeing a repro of the issue though, not sure if he'll need that.