Expo integration

[SamueleBarbiera]

Can it be used lime nativewind or even implementend in the t3-turbo stack?

[kavinvalli]

I was giving this a try once @SamueleBarbiera. Came across some error in the expo bundling process. I'll give it a go again today, and try it out.

[SamueleBarbiera]

Did u try it? I could even test it if u want

[kavinvalli]

@SamueleBarbiera I was trying it out, when I came across some issue, regarding Nativewind not being able to recognise the classes being generated by Typewind first. Would love it if you could give it a try, and let us know, if it works for you! Else, we'll try to look into what the issue is.

[Mokshit06]

Hi, so it looks like the typewind plugin is transforming the typewind expressions to tailwind class names, but isn't doing that before nativewind converts them to styles. This results in the classes being there, but the styles not working. Changing the order of plugins in the babel config doesn't fix this either.

Source:

import { Text, View } from 'react-native';
import { tw } from 'typewind';

export default function App() {
  return (
    <View className={`flex-1 ${tw.bg_black}`}>
      <Text>App.tsx to start working on your app!</Text>
    </View>
  );
}

Output:

Object.defineProperty(exports, '__esModule', { value: true });
exports.default = App;
var _nativewind = require('nativewind');
var _reactNative = require('react-native');
var _jsxRuntime = require('react/jsx-runtime');
function App() {
  return (0, _jsxRuntime.jsx)(_nativewind.StyledComponent, {
    className: 'flex-1 ' + 'bg-black',
    component: _reactNative.View,
    children: (0, _jsxRuntime.jsx)(_reactNative.Text, {
      children: 'App.tsx to start working on your app!',
    }),
  });
}
_nativewind.NativeWindStyleSheet.create({
  styles: {
    'flex-1': { flexGrow: 1, flexShrink: 1, flexBasis: '0%' },
  },
});

cc @marklawlor do you have an idea of what could be causing this? 🤔

[SamueleBarbiera]

i tried it also on this #31 (comment)