Convert to styled-components

[lex111]

After discuss in the issue #480, we begin the gradual migration of the codebase to styled-components. This is a good and easy task for those who want to participate in Hacktoberfest or just start contributing to the project. The only rule is: one component or screen converted to styled-components in your PR.

You can see the example of migration in PR #495.

[agatac]

Hi, I'm a new contributor. I can start with Badge Component.

[lex111]

@agatac fine, we will wait for PR, if there are problems, please contact to chat on Gitter.

[housseindjirdeh]

Agreed @lex111, I love the one component rule for now 🙌

Welcome @agatac! The badge component is a great place to start :)

As per our discussion in #480, we can keep those styles in the same file for now. We can definitely look into moving them into separate files at a later point if need be. Any questions you have at any time, please don't hesitate to ask 🙏

[nimadera]

I'd like to help with this. Should I choose a component or is there a recommended component to tackle next?

[lex111]

@nimadera no, you can choose any component you like, just write it here so that others know about it.

[pdong]

I took a shot at the view container, label-list-item, and notification icon styles. I went through some other ones but got stuck at some spots or wasn't sure where the components were used. I'm not sure if there is an easy way to reload certain views either as I'm pretty new to react native.

A couple of notes:
For fonts, the project is currently bringing them in as a spread operator in the StyleSheet. I'm assuming we'd now be importing them as ${fonts.fontPrimarySemiBold.fontFamily} (I looked at the config and fontFamily was the only property so this seems safe).

For a component like label-button-component which takes props to conditionally apply styles, I wasn't really sure what approach should be made here. The props can be passed into the styled container (e.g. ${( { largeWithTag }: Props) => {}}) but I was thinking an approach like

const ButtonContainer = styled(Button).attrs({
  'padding-right': props => props.large ? 10 : 5,
  'padding-left': props => props.large ? 10 : 5,
  'padding-top': props => props.large ? 5 : 3,
  'padding-bottom': props => props.large ? 5 : 3,
  'margin-right': props => props.large ? 0 : 10,
  'min-width': props => props.large ? 'unset' : 70,
})`
  border-radius: 3;
  margin-left: 0;
  padding-right: ${props => props['padding-right']}
  padding-left: ${props => props['padding-left']}
  padding-top: ${props => props['padding-top']}
  padding-bottom: ${props => props['padding-bottom']}
  margin-right: ${props => props['margin-right']}
  min-width: ${props => props['min-width']}
`;

might be cleaner. I wasn't able to get this working though as I ran into some issues with my simulator before I could test so I don't know if I'm on the right track. Some input would be great there.

Also I took a stab at repository-section-title. I'm used to being able to do something like const Badge = styled(StateBadge) but for some reason it's telling me StateBadge is an undefined component when I reload. Not sure if this is a react-native thing or how to get around it as I'm pretty new to react-native.

Anyway let me know if I'm on the right track with my current PRs. Thanks 👋

[agatac]

Unfortunately I'm unable to configure my dev environment. It took too much time so far and I have no experience with React Native so I'm giving up, sorry guys! :/

[josenaranjo]

Hello, I'm a new contributor and I'm working in the code-line.component.js.

@pdong for the fonts I created a new file called styledfonts.js under the config folder and this properties file has only the names of the fonts. I think it would be better if we start with a fresh font file while we migrate all the components, later we can deprecate/delete fonts.js

Also, I've noticed that some component's styles are handled through style arrays (override mechanism), which makes a little bit trickier this migration. I need to analyze better this scenario and will post here again once I have an idea on how to solve it. I hope we can discuss it.

Thanks

[alejandronanez]

Hey @josenaranjo, welcome to the project and thanks for working on this. I agree with your idea of starting fresh with our fonts.
Do you mind creating an issue or a WIP PR that we can start looking at your progress?

[housseindjirdeh]

No worries @agatac, set up always is a hassle 😞 Please let us know anytime if you ever feel like trying again and we'll always be here to help

@pdong I personally prefer if props can be passed in just like you suggested :) Seems like a cleaner way to do things!

@josenaranjo Interesting, will like to see your approach as well. If having a separate fonts file makes things easier than definitely on board with that

[davidsonsns]

Hi, I'm new here too, I believe that implementing the styled components would be a good way to get in.

Since there are several components, I think it's okay if I help. To avoid problems, can I open another issue with the name of the component or just say here?

[chinesedfan]

In v2 we support percentages. To make this possible we need to enforce units for all shorthands. If you're migrating to v2, a codemod is available.

@lex111 @housseindjirdeh I found the latest master will crash due to above styled components restriction. Please pay attentions to this.

[lex111]

@chinesedfan where does the crash happen? I do not have one.

[chinesedfan]

@lex111 It has already been fixed by 133091.

[lex111]

Allright, then I close in favor of #532