Units size expected with styled components

[rodrigodiasnoronha]

Hi there,

When I was using react-native-responsive-screen with styled-components, I have always getting warning messages like below:

[Sat Apr 25 2020 13:50:46.110] WARN Expected style "width: 119" to contain units in Context.Consumer (created by StyledNativeComponent) in StyledNativeComponent (created by Styled(Component)) in Styled(Component) (at Card/​index.js:12) in Card (at Dashboard/​index.js:43) in Dashboard (at SceneView.tsx:98) in SceneView (at useDescriptors.tsx:125) in CardContainer (at CardStack.tsx:561) in CardStack (at StackView.tsx:418) in KeyboardManager (at StackView.tsx:416) in Context.Consumer (at StackView.tsx:414) in StackView (at createStackNavigator.tsx:82) in StackNavigator (at routes.js:65) in DashboardRoutes (at SceneView.tsx:98) in SceneView (at useDescriptors.tsx:125) in BottomTabView (at createBottomTabNavigator.tsx:41) in BottomTabNavigator (at routes.js:165) in TabRoutes (at SceneView.tsx:98) in SceneView (at useDescriptors.tsx:125) in CardContainer (at CardStack.tsx:561) in CardStack (at StackView.tsx:418) in KeyboardManager (at StackView.tsx:416) in Context.Consumer (at StackView.tsx:414) in StackView (at createStackNavigator.tsx:82) in StackNavigator (at routes.js:212) in AppRoutes (at App.js:27) in App (at renderApplication.js:45) [Sat Apr 25 2020 13:50:46.130] WARN Expected style "height: 119" to contain units in Context.Consumer (created by StyledNativeComponent) in StyledNativeComponent (created by Styled(Component)) in Styled(Component) (at Card/​index.js:12) in Card (at Dashboard/​index.js:43) in Dashboard (at SceneView.tsx:98) in SceneView (at useDescriptors.tsx:125) in CardContainer (at CardStack.tsx:561) in CardStack (at StackView.tsx:418) in KeyboardManager (at StackView.tsx:416) in Context.Consumer (at StackView.tsx:414) in StackView (at createStackNavigator.tsx:82) in StackNavigator (at routes.js:65) in DashboardRoutes (at SceneView.tsx:98) in SceneView (at useDescriptors.tsx:125) in BottomTabView (at createBottomTabNavigator.tsx:41) in BottomTabNavigator (at routes.js:165) in TabRoutes (at SceneView.tsx:98) in SceneView (at useDescriptors.tsx:125) in CardContainer (at CardStack.tsx:561) in CardStack (at StackView.tsx:418) in KeyboardManager (at StackView.tsx:416) in Context.Consumer (at StackView.tsx:414) in StackView (at createStackNavigator.tsx:82) in StackNavigator (at routes.js:212) in AppRoutes (at App.js:27) in App (at renderApplication.js:45) [Sat Apr 25 2020 13:50:46.140] WARN Expected style "marginTop: 11" to contain units in Context.Consumer (created by StyledNativeComponent) in StyledNativeComponent (created by Styled(Component)) in Styled(Component) (at Card/​index.js:12) in Card (at Dashboard/​index.js:43) in Dashboard (at SceneView.tsx:98) in SceneView (at useDescriptors.tsx:125) in CardContainer (at CardStack.tsx:561) in CardStack (at StackView.tsx:418) in KeyboardManager (at StackView.tsx:416) in Context.Consumer (at StackView.tsx:414) in StackView (at createStackNavigator.tsx:82) in StackNavigator (at routes.js:65) in DashboardRoutes (at SceneView.tsx:98) in SceneView (at useDescriptors.tsx:125) in BottomTabView (at createBottomTabNavigator.tsx:41) in BottomTabNavigator (at routes.js:165) in TabRoutes (at SceneView.tsx:98) in SceneView (at useDescriptors.tsx:125) in CardContainer (at CardStack.tsx:561) in CardStack (at StackView.tsx:418) in KeyboardManager (at StackView.tsx:416) in Context.Consumer (at StackView.tsx:414) in StackView (at createStackNavigator.tsx:82) in StackNavigator (at routes.js:212) in AppRoutes (at App.js:27) in App (at renderApplication.js:45) [Sat Apr 25 2020 13:50:46.150] WARN Expected style "marginBottom: 18" to contain units in Context.Consumer (created by StyledNativeComponent) in StyledNativeComponent (created by Styled(Component)) in Styled(Component) (at Card/​index.js:12) in Card (at Dashboard/​index.js:43) in Dashboard (at SceneView.tsx:98) in SceneView (at useDescriptors.tsx:125) in CardContainer (at CardStack.tsx:561) in CardStack (at StackView.tsx:418) in KeyboardManager (at StackView.tsx:416) in Context.Consumer (at StackView.tsx:414) in StackView (at createStackNavigator.tsx:82) in StackNavigator (at routes.js:65) in DashboardRoutes (at SceneView.tsx:98) in SceneView (at useDescriptors.tsx:125) in BottomTabView (at createBottomTabNavigator.tsx:41) in BottomTabNavigator (at routes.js:165) in TabRoutes (at SceneView.tsx:98) in SceneView (at useDescriptors.tsx:125) in CardContainer (at CardStack.tsx:561) in CardStack (at StackView.tsx:418) in KeyboardManager (at StackView.tsx:416) in Context.Consumer (at StackView.tsx:414) in StackView (at createStackNavigator.tsx:82) in StackNavigator (at routes.js:212) in AppRoutes (at App.js:27) in App (at renderApplication.js:45) [Sat Apr 25 2020 13:50:46.170] WARN Expected style "marginRight: 11" to contain units in Context.Consumer (created by StyledNativeComponent) in StyledNativeComponent (created by Styled(Component)) in Styled(Component) (at Card/​index.js:12) in Card (at Dashboard/​index.js:43) in Dashboard (at SceneView.tsx:98) in SceneView (at useDescriptors.tsx:125) in CardContainer (at CardStack.tsx:561) in CardStack (at StackView.tsx:418) in KeyboardManager (at StackView.tsx:416) in Context.Consumer (at StackView.tsx:414) in StackView (at createStackNavigator.tsx:82) in StackNavigator (at routes.js:65) in DashboardRoutes (at SceneView.tsx:98) in SceneView (at useDescriptors.tsx:125) in BottomTabView (at createBottomTabNavigator.tsx:41) in BottomTabNavigator (at routes.js:165) in TabRoutes (at SceneView.tsx:98) in SceneView (at useDescriptors.tsx:125) in CardContainer (at CardStack.tsx:561) in CardStack (at StackView.tsx:418) in KeyboardManager (at StackView.tsx:416) in Context.Consumer (at StackView.tsx:414) in StackView (at createStackNavigator.tsx:82) in StackNavigator (at routes.js:212) in AppRoutes (at App.js:27) in App (at renderApplication.js:45) [Sat Apr 25 2020 13:50:46.180] WARN Expected style "marginLeft: 11" to contain units in Context.Consumer (created by StyledNativeComponent) in StyledNativeComponent (created by Styled(Component)) in Styled(Component) (at Card/​index.js:12) in Card (at Dashboard/​index.js:43) in Dashboard (at SceneView.tsx:98) in SceneView (at useDescriptors.tsx:125) in CardContainer (at CardStack.tsx:561) in CardStack (at StackView.tsx:418) in KeyboardManager (at StackView.tsx:416) in Context.Consumer (at StackView.tsx:414) in StackView (at createStackNavigator.tsx:82) in StackNavigator (at routes.js:65) in DashboardRoutes (at SceneView.tsx:98) in SceneView (at useDescriptors.tsx:125) in BottomTabView (at createBottomTabNavigator.tsx:41) in BottomTabNavigator (at routes.js:165) in TabRoutes (at SceneView.tsx:98) in SceneView (at useDescriptors.tsx:125) in CardContainer (at CardStack.tsx:561) in CardStack (at StackView.tsx:418) in KeyboardManager (at StackView.tsx:416) in Context.Consumer (at StackView.tsx:414) in StackView (at createStackNavigator.tsx:82) in StackNavigator (at routes.js:212) in AppRoutes (at App.js:27) in App (at renderApplication.js:45)

I'd always creating my styles like that:

` import styled from 'styled-components/native'; import colors from '../../../themes/colors'; import { heightPercentageToDP as hp, widthPercentageToDP as wp } from 'react-native-responsive-screen';

export const Wrapper = styled.View` flex: 1;

background-color: ${colors.bgPrimary};

`;

export const Header = styled.View` flex-direction: row; background-color: ${colors.purple};

width: ${wp('90%')};
margin-left: auto;
margin-right: auto;
margin-top: ${hp('3%')};
margin-bottom: ${hp('2%')};

padding-top: ${hp('2%')};
padding-bottom: ${hp('2.2%')};

border-radius: ${hp('2%')};

`;

`

[rbalbix]

I have the same issue.

[marudy]

@rodrigodiasnoronha @rbalbix according to the stack trace your code gets successfully transformed to: width: 119 which is appropriate as style properties in RN expect DP or %. That being said it looks like a styled-components issue as per the warning it expects units:

WARN Expected style "width: 119" to contain units