Styling

[manikantag]

Hi,

Styled using styled-components. Easily extendible.

Can you give a example about customising the style? I m not able to get it correct.

I've tried customing the Label to not occupy half of the screen, but 1/3 of it.

const Label2 = Label`
  flex: 1
`
const Input2 = Input`
  flex: 2
`

render() {
  return (
    <FormGroup>
      <Label2>First name</Label2>
      <Input2 placeholder="Esben" onChangeText={this.onFirstNameChange} />
    </FormGroup>
  )
}

And the forms look different in Android compared to the one seen in the README. Is it expected? for native look?

[manikantag]

After setting the screen bg color to white, it looks like below:

How to get rid of the line under the input field. It looks ugly and not aligned with the label.

Seems style is not working with components.

<Label style={{ color: 'red' }}>First name Test</Label> is not styling the text in red color.

[joshuapinter]

I agree with this. One of the main reasons why I came to this library is because of the clean, default styling. Even the name has "clean" in it, but on Android it looks terrible.

Any tips on making this look as good as the screenshots on your README would be great.

Thanks!

[manikantag]

@joshuapinter Set the style to backgroudColor: '#fff'

[joshuapinter]

@manikantag Still not great, though, is it?

[thienpow]

try remove border-radius: ${props => props.theme.FormGroup.borderRadius}; from FormGroup.js this line crash the Android border, making it unable to show the underline on Android... removing it will allow Android and IOS have same long underline under the input and label.