FormControl | NativeBase | Universal Components for React and React Native

Playground
const Example = () => {
  return <FormControl isRequired isInvalid>
      <Stack mx={4}>
        <FormControl.Label>Favorite framework</FormControl.Label>
        <Input p={2} placeholder="Is it react?" />
        <FormControl.HelperText>
          We'll keep this between us.
        </FormControl.HelperText>
        <FormControl.ErrorMessage>Something is wrong.</FormControl.ErrorMessage>
      </Stack>
    </FormControl>;
};
const Example = () => {
  return <FormControl isRequired isInvalid>
      <Stack mx={4}>
        <FormControl.Label>Favorite framework</FormControl.Label>
        <Input p={2} placeholder="Is it react?" />
        <FormControl.HelperText>
          We'll keep this between us.
        </FormControl.HelperText>
        <FormControl.ErrorMessage>Something is wrong.</FormControl.ErrorMessage>
      </Stack>
    </FormControl>;
};

Playground
const Example = () => {
  return <ScrollView>
      <Stack space={4} px={4} safeArea mt={6}>
        <Text bold underline>
          Default:
        </Text>
        <FormControl>
          <FormControl.Label>Favorite framework</FormControl.Label>
          <Input />
          <FormControl.HelperText>
            We'll keep this between us.
          </FormControl.HelperText>
          <FormControl.ErrorMessage>
            Something is wrong.
          </FormControl.ErrorMessage>
        </FormControl>
        <Text bold underline>
          Custom style for disable:
        </Text>
        <FormControl isDisabled>
          <FormControl.Label _disabled={{
          _text: {
            color: "gray.400",
            fontWeight: "bold"
          }
        }}>
            Favorite framework
          </FormControl.Label>
          <Input />
          <FormControl.HelperText _disabled={{
          borderLeftWidth: 1,
          mt: 1,
          px: 1,
          pl: 2,
          borderColor: "gray.400"
        }}>
            We'll keep this between us.
          </FormControl.HelperText>
          <FormControl.ErrorMessage>
            Something is wrong.
          </FormControl.ErrorMessage>
        </FormControl>
        <Text bold underline>
          Custom style for invalid:
        </Text>
        <FormControl isRequired isInvalid>
          <FormControl.Label _invalid={{
          _text: {
            color: "rose.500",
            fontWeight: "bold"
          }
        }}>
            Favorite framework
          </FormControl.Label>
          <Input />
          <FormControl.HelperText _invalid={{
          _text: {
            color: "red.400",
            underline: true
          }
        }}>
            We'll keep this between us.
          </FormControl.HelperText>
          <FormControl.ErrorMessage>
            Something is wrong.
          </FormControl.ErrorMessage>
        </FormControl>
      </Stack>
    </ScrollView>;
};
const Example = () => {
  return <ScrollView>
      <Stack space={4} px={4} safeArea mt={6}>
        <Text bold underline>
          Default:
        </Text>
        <FormControl>
          <FormControl.Label>Favorite framework</FormControl.Label>
          <Input />
          <FormControl.HelperText>
            We'll keep this between us.
          </FormControl.HelperText>
          <FormControl.ErrorMessage>
            Something is wrong.
          </FormControl.ErrorMessage>
        </FormControl>
        <Text bold underline>
          Custom style for disable:
        </Text>
        <FormControl isDisabled>
          <FormControl.Label _disabled={{
          _text: {
            color: "gray.400",
            fontWeight: "bold"
          }
        }}>
            Favorite framework
          </FormControl.Label>
          <Input />
          <FormControl.HelperText _disabled={{
          borderLeftWidth: 1,
          mt: 1,
          px: 1,
          pl: 2,
          borderColor: "gray.400"
        }}>
            We'll keep this between us.
          </FormControl.HelperText>
          <FormControl.ErrorMessage>
            Something is wrong.
          </FormControl.ErrorMessage>
        </FormControl>
        <Text bold underline>
          Custom style for invalid:
        </Text>
        <FormControl isRequired isInvalid>
          <FormControl.Label _invalid={{
          _text: {
            color: "rose.500",
            fontWeight: "bold"
          }
        }}>
            Favorite framework
          </FormControl.Label>
          <Input />
          <FormControl.HelperText _invalid={{
          _text: {
            color: "red.400",
            underline: true
          }
        }}>
            We'll keep this between us.
          </FormControl.HelperText>
          <FormControl.ErrorMessage>
            Something is wrong.
          </FormControl.ErrorMessage>
        </FormControl>
      </Stack>
    </ScrollView>;
};