FormInput with alignItems: 'center'

[Cretezy]

When using a FormInput and flexbox with alignItems: 'center', the input does not render at all, even with width/height set. How would you go to about centering inputs?

[dabit3]

Don't think this is possible. If you figure it out, feel free to submit a pr, thanks for the input.

[vladra]

@dabit3 Envountered exactly same issue. If I'm placing FromInput inside view with alignItems 'center', input is not rendered/visible. If I remove alignItems, it works fine.

Blank screen in this case:

  <View style={{ alignItems: 'center' }}>
    <FormInput />
  </View>

And I see input in this case:

  <View >
    <FormInput />
  </View>

@Cretezy Have you solved this?

[Monte9]

@vladra any ideas on what might be causing it/possible fixes?

[vladra]

@Monte9 Just encountered this. It's not working on blank new react-native project

[Monte9]

Reopening this issue since that's the case @vladra.

[binoy14]

@vladra @Monte9 I was trying to fix this and i think the problem when doing alignItems of center or even flex-start or flex-end is that the component is present but it has a width of 0. If you set a containerStyle or inputStyle with a width of not 0 then it does show up. I think the solution is to set the default width to be the device width. Thoughts?

[Monte9]

I think that's a decent solution. In the case that we add a default height, the user can always use the containerStyle to override the height if need be.
@binoy14 if you have it working on your end, go ahead a push a hot-fix to master?