Style does not work stably.

Description

Description

Style does not work stably.

CodeSandbox/Snack link

I am sorry. I tried to create a new snack but I failed.

Steps to reproduce

1. Write some Style at a NativeBase component
2. Save code and reload an app
3. Style does not work
4. Reload the app again
5. It works well this time
6. Reload the app again
7. It works well again.
8. Edit code and reload the app
9. It DOES NOT work again
10. It happens over and over again

※I wrote my style without NativeBase, however, the problem is still happening. So I think that the the problem comes from React Native.

Platform

• Android
• CRA
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

Hello. I developing my app with React Native, technically, Expo.

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>
    )
  }
}

Version

0.64

Output of npx react-native info

❯ npx react-native info ─╯ warn Package concurrently has been ignored because it contains invalid configuration. Reason: Package subpath ‘./package.json’ is not defined by “exports” in /Users/mac_toshi/Documents/1.Coding/5.dust_map/dust_map/node_modules/concurrently/package.json info Fetching system and libraries information… System: OS: macOS 12.2.1 CPU: (8) arm64 Apple M1 Memory: 3.69 GB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.13.1 - ~/.nodebrew/current/bin/node Yarn: 1.22.17 - ~/.nodebrew/current/bin/yarn npm: 8.1.2 - ~/.nodebrew/current/bin/npm Watchman: 2022.03.21.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: Not Found SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5 Android SDK: Not Found IDEs: Android Studio: Not Found Xcode: 13.3/13E113 - /usr/bin/xcodebuild Languages: Java: Not Found npmPackages: @react-native-community/cli: Not Found react: 17.0.1 => 17.0.1 react-native: 0.64.3 => 0.64.3 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

1. Write some Style at a NativeBase component
2. Save code and reload an app
3. Style does not work
4. Reload the app again
5. It works well this time
6. Reload the app again
7. It works well again.
8. Edit code and reload the app
9. It DOES NOT work again
10. It happens over and over again

Snack, code example, screenshot, or link to a repository

I am sorry. I couldn’t prepare Snack.

[Jol4g]

@Toshiyuki023Hori The problem i faced using expo, while all style in iOS work nicely and android ignore it. like ignore condition {{display: isSelected ? 'none' :'flex' }} on android Always showen and i had problem also when style in brackets [ ], i solve some of my issues with inline styles

[Jol4g]

Good for you 🙏