Enabling Stacked Mode

[indivisable]

How would one go about enable stacked mode?

[esbenp]

Set inlineLabel to false on FormGroup

<FormGroup inlineLabel={false}>
   <Label>Label</Label>
   <Input />
</FormGroup>

if you use redux-form elements you can set it directly on the element

import { Input } from 'react-native-clean-form/redux-form'

<Input inlineLabel={false} name="hello" />

let me know if it works out.

[indivisable]

Hrmm, using the example code I do not see any FormGroups, do I have to wrap them?

 <Form>
        <FieldsContainer>
          <Fieldset label="Contact details" >
            <Input name="first_name" label="First name" placeholder="John" />
            <Input name="last_name" label="Last name" placeholder="Doe" />
            <Input name="email" label="Email" placeholder="something@domain.com" />
            <Input name="telephone" label="Phone" placeholder="+45 88 88 88 88" />
          </Fieldset>
          <Fieldset label="Shipping details" last>
            <Input name="address" label="Address" placeholder="Hejrevej 33" />
            <Input name="city" label="City" placeholder="Copenhagen" />
            <Input name="zip" label="ZIP Code" placeholder="2400" />
            <Select
              name="country"
              label="Country"
              options={countryOptions}
              placeholder="Denmark"
            />
            <Switch label="Save my details" border={false} name="save_details" />
          </Fieldset>
        </FieldsContainer>
        <ActionsContainer>
          <Button icon="md-checkmark" iconPlacement="right" onPress={handleSubmit(onSubmit)} submitting={submitting}>Save</Button>
        </ActionsContainer>
      </Form>

[esbenp]

No basically the elements you use (the ones you import from react-native-clean-form/redux-form are already wrapped in FormGroup.

You should only use FormGroup if you make the form without redux-form.

Your code should look like this

<Form>
    <FieldsContainer>
        <Fieldset label="Contact details" >
        <Input inlineLabel={false} name="first_name" label="First name" placeholder="John" />
        <Input inlineLabel={false} name="last_name" label="Last name" placeholder="Doe" />
        <Input inlineLabel={false} name="email" label="Email" placeholder="something@domain.com" />
        <Input inlineLabel={false} name="telephone" label="Phone" placeholder="+45 88 88 88 88" />
        </Fieldset>
        <Fieldset label="Shipping details" last>
        <Input inlineLabel={false} name="address" label="Address" placeholder="Hejrevej 33" />
        <Input inlineLabel={false} name="city" label="City" placeholder="Copenhagen" />
        <Input inlineLabel={false} name="zip" label="ZIP Code" placeholder="2400" />
        <Select 
            inlineLabel={false} 
            name="country"
            label="Country"
            options={countryOptions}
            placeholder="Denmark"
        />
        <Switch inlineLabel={false} label="Save my details" border={false} name="save_details" />
        </Fieldset>
    </FieldsContainer>
    <ActionsContainer>
        <Button icon="md-checkmark" iconPlacement="right" onPress={handleSubmit(onSubmit)} submitting={submitting}>Save</Button>
    </ActionsContainer>
</Form>

[indivisable]

Nice, works for me - I would put this in docs as it is not apparent. Thanks really great project!

[esbenp]

Do you want to add it? Feel free to PR. If not I think I can look at it later