refactor(badge): refactor badge component to use styled-components#535
refactor(badge): refactor badge component to use styled-components#535alejandronanez merged 6 commits intogitpoint:masterfrom hirejohnsalcedo:refactor/532-badge-component
Conversation
| @@ -1,5 +1,5 @@ | |||
| import React from 'react'; | |||
| import { StyleSheet, View, Text } from 'react-native'; | |||
| import styled from 'styled-components'; | |||
There was a problem hiding this comment.
Please import from 'styled-components/native'.
…s93/git-point into refactor/532-badge-component
alejandronanez
left a comment
There was a problem hiding this comment.
Can you address these two changes before merging?
Thanks @jpls93 and welcome to Gitpoint!
| height: 18; | ||
| border-color: ${colors.alabaster}; | ||
| border-width: 1; | ||
| ${({ backgroundColor }) => `background-color: ${backgroundColor};`}; |
There was a problem hiding this comment.
I think you can do background-color: ${backgroundColor} instead,
| const BadgeText = styled.Text` | ||
| ${{ ...fonts.fontPrimaryBold }}; | ||
| background-color: 'transparent'; | ||
| ${({ largeText }) => |
There was a problem hiding this comment.
Same goes for this font-size: ${largeText ? normalize(9.5) : normalize(7)}
There was a problem hiding this comment.
Hi @alejandronanez , might not work since unlike border-color: ${colors.alabaster};, colors is a file-wide variable whereas backgroundColor and largeText are props passed down to the styled components. https://www.styled-components.com/docs/basics#adapting-based-on-props
There was a problem hiding this comment.
@alejandronanez , let me know if I can help you with anything else
There was a problem hiding this comment.
Oh yeah, you're right. I missed that, sorry.
Thanks!
There was a problem hiding this comment.
the usual way would be this though:
...
font-size: ${({largeText}) => largeText ? normalize(9.5) : normalize(7)};
There was a problem hiding this comment.
I agree that would be more concise. I guess I just made the code style more consistent by making it parallel to how I wrote BadgeContainer's backgroundColor which doesn't have a default value. Since writing something without a default value that way would make it background-color: undefined which, without tree-shaking, would yield dead code.
Related to #532