0

I am fairly new to coding and am trying out Nativewind for my react native app, I'm using expo and testing live with the web compiler as well as an Android emulator.

The following code works fine on the android emulator, both the text showing as red and the **image displaying **correctly.

    <SafeAreaView style={{ flex: 1 }}>
      <Text className="text-red-500">HomeScreen</Text>
      {/* Header */}
      <View>
        <Image
          source={{ uri: "https://..." }}
          className="h-7 w-7"
        />
      </View>
    </SafeAreaView>

On the web localhost:10000 the "HomeScreen" text shows as red using the className tailwind but for some reason the same thing under <Image className="...."/> does not apply any styling and therefore no height or width and no image is displayed. If I manually add a style={{...}} to <Image> with width and height, then it works on the web.

Also if I use a <img src=""> that works as well but I don't want to use an if statement to check for platform with every image and also defeats the purpose of using tailwind for efficiency.

Are there any suggestions on the right way to do this?

If anyone else is struggling with this, I've figured out the issue. The following needs to be placed in your root component App.js: NativeWindStyleSheet.setOutput({ web: "native", default: "native", });

foreff
  • 33
  • 5
  • If anyone else is struggling with this, I've figured out the issue. The following needs to be placed in your root component App.js: ```NativeWindStyleSheet.setOutput({ web: "native", default: "native", });``` – foreff Apr 12 '23 at 06:06

0 Answers0