Refactor to use `styled-components`

[fr3fou]

Using styled-components can greatly reduce some headaches when writing styling for React Native. It also has the benefit of you writing vanilla css compared to css in an object.

import styled from 'styled-components/native'

const Input = styled(TextInput)`
    color: #fafafa;
    background-color: pink;
    border-radius: 5px;
`
...
return <Input />

vs

import { Stylesheet } from 'react-native'

const Styles = Stylesheet.Create({
        Input: {
            color: "#fafafa",
            backgroundColor: "pink",
            borderRadius: 5
        }
})
...
return <TextInput style={Styles.Input} />

http://styled-components.com/

It has great support for react-native, just import it and you are ready to use it. Highly suggest also installing the vscode extension for working with styled-components as it helps greatly.

[adilanchian]

Still trying to figure out if this makes the most sense. I think it does, but still not 100%