Border width is removed when changing state

[kevinpvh]

Description

I have 2 styles
box: {
height: 200,
borderWidth: 1,
borderColor: 'red',
},
boxSelected: {
borderBottomWidth: 3,
},

And a view specifying styles as follows
<View style={[styles.box, selected && styles.boxSelected]}/>

When selected = true, border width has value 1, and border bottom width has value 3
But when selected = false, only border width of top, left, right = 1, and bottom is deleted to 0

Steps to reproduce

import React from 'react';
import {View, StyleSheet, TouchableOpacity, Text} from "react-native";

interface Props {
}

const App: React.FC<Props> = () => {

  const [selected, setSelected] = React.useState(false);

  return (
    <View style={styles.container}>
      <View style={[styles.box, selected && styles.boxSelected]}/>

      <TouchableOpacity onPress={() => {
        setSelected(prev => !prev)
      }}>
        <View style={styles.button}>
          <Text style={styles.text}>Click me</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    paddingTop: 100,
    paddingHorizontal: 16
  },
  box: {
    height: 200,
    borderWidth: 1,
    borderColor: 'red',
  },
  boxSelected: {
    borderBottomWidth: 3,
  },
  button: {
    marginTop: 24,
    height: 50,
    backgroundColor: 'blue',
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    color: 'white',
    fontSize: 20
  }
})

React Native Version

0.80.2

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

System:
  OS: macOS 15.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 184.81 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.19.0
    path: ~/.nvm/versions/node/v18.19.0/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v18.19.0/bin/yarn
  npm:
    version: 10.2.3
    path: ~/.nvm/versions/node/v18.19.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.15.2
    path: ~/.rvm/gems/ruby-2.7.6/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK:
    API Levels:
      - "30"
      - "31"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
      - 34.0.0
      - 35.0.0
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.3 AI-243.24978.46.2431.13208083
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.14
    path: ~/.jenv/shims/javac
  Ruby:
    version: 2.7.6
    path: ~/.rvm/rubies/ruby-2.7.6/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 19.1.1
    wanted: 19.1.1
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.80.2
    wanted: 0.80.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

No log

MANDATORY Reproducer

Please see description

Screenshots and Videos

Screen.Recording.2025-09-11.at.16.17.37.mov

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Reproducers are mandatory and we can accept only one of those as a valid reproducer:

• For majority of bugs: send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.
• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template

You can read more about about it on our website: How to report a bug.

[kevinpvh]

Can someone help me in this case.
I have about 200 style files with similar usage, accessing each file to edit is not a good solution

[kevinpvh]

I found the workaround to override the feature flag of enableNewBackgroundAndBorderDrawables to be false.
But not sure if there is any impact if go with this way

class MyFeatureFlagsProvider(
  private val defaults: ReactNativeFeatureFlagsProvider = ReactNativeFeatureFlagsDefaults()
) : ReactNativeFeatureFlagsProvider by defaults {
  override fun enableNewBackgroundAndBorderDrawables(): Boolean = false
}

class MainApplication : Application(), ReactApplication {
...
override fun onCreate() {
    super.onCreate()
    loadReactNative(this)
    ReactNativeFeatureFlags.dangerouslyForceOverride(MyFeatureFlagsProvider())
  }
...
}

[react-native-bot]

This issue is stale because it has been open for 180 days with no activity. It will be closed in 7 days unless you comment on it or remove the "Stale" label.