Define numeric style properties (border-bottom-width, height, width and etc.) in react-native via styled components

0
votes

I'm trying to build a react-native component using styled components. Here is the snippet

import { View } from 'react-native'
import styled from 'styled-components'

const StyledPromocode = styled(View)`
  border-bottom-width: 1,
  borderColor: #CCCCCC,
  borderStyle: solid
`

But if I use this component in my render method I always get an error

Invariant Violation: Invalid prop borderBottomWidth of type string supplied to StyleSheet generated, expected number. StyleSheet generated: { "borderBottomWidth": "1,", "borderColor": "#CCCCCC,", "borderStyle": "solid" }

As you can see from the code above, border-bottom-width equals 1, which is a number value.

Do styled-components convert all values to a string under the hood?

I know that I can use StyleSheet.create to get what I need, but I also would like to know if there is any way to define properties like border-bottom-width, height, width and etc via styled-components.

If not, then does it mean that it doesn't make sense to use styled-components in react-native, because, obviously, errors like this would appear all the time?

2
javascriptreact-nativefrontendstyled-componentsmobile-development

2 Answers

1
votes

I think you have to separate your values with ; instead of ,.

Try this: 

const StyledPromocode = styled(View)`
  border-bottom-width: 1;
  borderColor: #CCCCCC;
  borderStyle: solid;
`
0
votes

It can be done in more shorter way:

 const StyledPromocode = styled(View)`
   border-bottom: 1px solid #CCCCCC;
 `