NativeWind in React Native Expo does not work inside React Navigation Container

Question

Nativewind work's perfectly when components are not wrapped in the a Navigation Container, but when they are, the styles stop working. Yes, I have already tried restarting the server and clearing my cache with "expo start -c" but that does not work. For example -

`<View style={{ flex: 1 }}>
  <Text className="font-extrabold">
    Hello
  </Text>
  <NavigationContainer>
    <Stack.Navigator>
       <Text className="font-extrabold">
          Hello
       </Text>
    </Stack.Navigator>
  </NavigationContainer>
</View>`

The text outside the NavigationContaainer is being bolded, but not the text wrapped in the Navigation Container. I have tried using NVM to try different versions of node.js. Any suggestions would be much appreciated!

restarting the server and clearing my cache with "expo start -c"

Answer 1

What do you want to achieve? your need to change your code, you shouldn't added some addition to main top navigator, when you should put it all inside new screen component, e.g Home

<View style={{ flex: 1 }}>
  <Text className="font-extrabold">
    Hello
  </Text>
  <NavigationContainer>
    <Stack.Navigator>
       <Text className="font-extrabold">
          Hello
       </Text>
    </Stack.Navigator>
  </NavigationContainer>
</View>

should be like this:

<Stack.Navigator>
   <Stack.Screen name="Home" component={Home} />
</Stack.Navigator>

and Home.js component

import { View, Text } from 'react-native'
import React from 'react'

const Home = () => {
  return (
    <View >
      <Text className="font-extrabold">
          Hello
      </Text>
    </View>
  )
}

export default Home

reference: https://reactnavigation.org/docs/stack-navigator