react-native-web: Inline style flex properties are ignored by React
Do you want to request a feature or report a bug?
a bug.
What is the current behavior?
If the current behavior is a bug, please provide the steps to reproduce
Currently setting any flex-box props with style property <View style={{ flexGrow: 0, flexBasis: '33.333%', }} /> will result in !important to be added to the properties, which means that the properties get ignored by React.
Setting flex props with style prop works just fine in React Native.
My use case is that I want to do a responsive layout where flex-basis gets changed based on the viewport width. That is why I need to use the style property.
What is the expected behavior?
react-native-web should match the behavior in React native and support setting flex props using inline styles.
Environment (include versions). Did this work in previous versions?
- OS: OS X
- Device:
- Browser: Chrome
- React Native for Web (version): 0.4.0
- React (version): 16.2.0
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 16 (16 by maintainers)
Commits related to this issue
- [fix] setNativeProps can apply flex styles Updates the 'setValueForStyle' implementation to support style values that contain "!important". This allows the 'flex{Basis,Grow,Shrink}' values created by... — committed to necolas/react-native-web by necolas 6 years ago
- [fix] setNativeProps can apply flex styles Updates the 'setValueForStyle' implementation to support style values that contain "!important". This allows the 'flex{Basis,Grow,Shrink}' values created by... — committed to necolas/react-native-web by necolas 6 years ago
- [fix] setNativeProps can apply flex styles Updates the 'setValueForStyle' implementation to support style values that contain "!important". This allows the 'flex{Basis,Grow,Shrink}' values created by... — committed to necolas/react-native-web by necolas 6 years ago
This will be fixed in the next release.
There are also warnings thrown when
!importantis included in user-land styles: StyleSheetValidation. This already ensures the information is communicated to developers without needing to patch React DOM’s warnings.And
setNativePropswill support!importantas an escape hatch for any rare cases where that might be required: setValueForStyles.