Style does not work stably when using Expo and NativeBase

Question

I developing my app with Expo and NativeBase.

Now this time, I would like you to help me with this weird Style problem.

Environment

  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.1",
    "babel-plugin-dotenv-import": "^2.2.0",
    "expo": "~44.0.0",
    "expo-location": "~14.0.1",
    "expo-permissions": "~13.1.0",
    "expo-status-bar": "~1.2.0",
    "native-base": "^3.3.11",
    "prettier": "^2.6.2",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-maps": "0.29.4",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-svg": "12.1.1",
    "react-native-web": "0.17.1",
    "tailwind-rn": "^4.2.0",
    "tailwindcss": "^3.0.23"
  },

Example

As I wrote above, Style dose not work stably for any reasons and it's the problem. I will show you my example.

• Expected Style

  This picture is my expected view in this case. What I want do is placing the white box that has texts and buttons inside on the center of the MapView.

  

• Actual Style

  This picture is the weird problem. Style works well and is displayed like the above picture sometimes, but the other times, like the below picture, it does not work. The weird thing is that every time I reload the app without editing my code, Style's appearance sometimes changes. This is the meaning of "Style does not work stably".

  NOTE: This picture looks different a bit from the above picture like the button color. Please don't care about details because this is just a developing view.

  

• What I did for fixing the problem

  • Clear cache and reload the app
  • Stop using my custom theme These does not fix the problem.

• code

Here is my code. WordBox is called by HomePresenter. When onPress is emitted, WordBox shows.

I'm not familiar with React Native and Expo very much, so I first faced this problem and am really troubled. My explanation must be complex because I am not used to use English, but if it is alright with you, please tell me how to fix it.

Thank you.

export const WordBox = (isShow: boolean): JSX.Element | null => {
  if (!isShow) {
    return null
  } else {
    return (
      <View width="full" height="full">
        <Center width="full" height="full">
          <Box
            width={sizes.Box.width}
            height={sizes.Box.height}
            backgroundColor={colors.Base.White}
            borderRadius="3xl"
            shadow="7"
          >
            <Text mt="4" fontSize="3xl" fontWeight="bold" textAlign="center">
              Set a new marker here?
            </Text>
            <Button
              fontWeight="bold"
              fontSize="2xl"
              borderRadius="3xl"
              width="28"
              height="10"
            >
              Yes
            </Button>
            <Button
              fontWeight="bold"
              fontSize="2xl"
              borderRadius="3xl"
              width="28"
              height="10"
            >
              No
            </Button>
          </Box>
        </Center>
      </View>
    )
  }
}

---

Additional Information(Without NativeBase code)

I styled my app again without NativeBase following great Abe's advise.

This issue still happens.

The minor appearance is different from above pictures a bit, but the view changes when reloading my app or rerunning it like these two pictures because Style doesn't work well.

Here is my code without using NativeBase but using tailwind-rn instead.

export const WordBox = (isShow: boolean): JSX.Element | null => {
  const tailwind = useTailwind()
  return (
    <View style={tailwind('m-auto bg-white rounded-3xl h-1/6 w-10/12')}>
      <Text style={tailwind('mt-2 text-2xl font-bold text-center')}>
        Set a marker here?
      </Text>
      <View style={tailwind('mt-4 gap-x-2 flex-row justify-center')}>
        <Pressable style={tailwind('rounded-3xl w-7 h-2.5 bg-emerald-600')}>
          <Text style={tailwind('font-bold text-base')}>Yes</Text>
        </Pressable>
        <Pressable style={tailwind('rounded-3xl w-7 h-2.5 bg-emerald-600')}>
          <Text style={tailwind('font-bold text-base')}>No</Text>
        </Pressable>
      </View>
    </View>
  )
}

---

Additional Information(Where WordBox is called)

WordBox is called inside MapView component which is wrapped by HomePresenter. newmarker is called when I press on the screen, so new marker is not related to this problem, I think.

export const HomePresenter: FC<HomeProps> = ({
  loading,
  location,
  newMarker,
  showAddModal,
  onPress,
}) => {
  const tailwind = useTailwind()

  return (
    <View>
      {loading ? (
        <View style={tailwind('text-center justify-center')}>
          <Text style={tailwind('font-bold text-2xl')}>Loading</Text>
        </View>
      ) : (
        <>
          <MapView
            key="mapview"
            provider={PROVIDER_GOOGLE}
            showsUserLocation={true}
            showsMyLocationButton={true}
            style={tailwind('h-full w-full')}
            region={location}
            onPress={(e: MapEvent) => {
              onPress(e)
            }}
          >
            {newMarker && newMarker}
            <WordBox />       // WordBox is called HERE
          </MapView>
        </>
      )}
    </View>
  )
  // }
}

Answer 1

I resolved this problem thanks to @Abe.

The source of this issue is placing Modal inside MapView component. I should've placed my modal underneath MapView. In fact, this is written in the react-native-maps Docs

I hope those who use react-native-maps do not make the same mistakes.