Getting Started

API Reference

Examples

Text Input Examples

The FormInput component provides extensive customization options for text inputs. Here are some common examples to help you implement various text input configurations.

Basic Text Input

A simple text input with a label and placeholder:

tsx
import { useState } from 'react';
import { View } from 'react-native';
import { FormInput } from '@react-native-utils/forminput';

const BasicExample = () => {
  const [text, setText] = useState('');
  
  return (
    <View style={{ padding: 16 }}>
      <FormInput
        text={{
          labelText: "Simple Text Input",
          placeholderText: "Type something...",
          value: text,
        }}
        core={{
          onTextChange: setText,
        }}
      />
    </View>
  );
};

With Icons

Add left and right icons to enhance your input fields. The right icon can include a press handler, which is useful for creating clear buttons or other actions:

tsx
import { useState } from 'react';
import { View } from 'react-native';
import { FormInput } from '@react-native-utils/forminput';

const WithIconsExample = () => {
  const [email, setEmail] = useState('');
  
  return (
    <View style={{ padding: 16 }}>
      <FormInput
        text={{
          labelText: "Email Address",
          placeholderText: "Enter your email",
          value: email,
        }}
        icon={{
          leftIcon: "envelope",  // FontAwesome icon name
          rightIcon: "times-circle",
          rightIconColor: email ? "#999" : "#CCC",
          rightIconOnPress: () => setEmail(""),
        }}
        core={{
          onTextChange: setEmail,
          inputType: "email-address",
        }}
      />
    </View>
  );
};

With Character Limit

Add a character limit with visual feedback for inputs like bios or comments:

tsx
import { useState } from 'react';
import { View } from 'react-native';
import { FormInput } from '@react-native-utils/forminput';

const CharacterLimitExample = () => {
  const [bio, setBio] = useState('');
  
  return (
    <View style={{ padding: 16 }}>
      <FormInput
        text={{
          labelText: "Bio",
          placeholderText: "Tell us about yourself",
          value: bio,
          characterLimit: 100,
          showCharacterLimit: true,
        }}
        style={{
          inputStyle: { height: 100 },
        }}
        core={{
          onTextChange: setBio,
          multiline: true,
          numberOfLines: 4
        }}
      />
    </View>
  );
};

Styling Tips

  • Use the style prop group to customize the appearance of your inputs:
    style={{
  inputContainerStyle: { borderRadius: 8, borderColor: '#3B82F6' },
  labelTextStyle: { fontWeight: 'bold', color: '#3B82F6' }
}}
  • For multiline inputs, set core.multiline to true and adjuststyle.inputStyle to customize the height and appearance
  • When using icons, you can set their size and color through the icon prop group:
    icon={{
  leftIcon: "user",
  leftIconSize: 20,
  leftIconColor: "#3B82F6"
}}

See the Text Props and Style Propsdocumentation for more customization options.