Neoclassical Programming Multitude

    react-native-form-inputs

    0.0.5 • Public • Published

    Status : Pending work with defining style object structure

    📜React Native Inputs

    A customisable input library to quickly build complex forms in React Native

    Install

    npm install react-native-inputs

    Usage

    import { ParentComponent, FieldInput, DatePickerInput, OptionInput } from ‘react-native-inputs’;

    Passing text props and state handling

    These components are built with the Formik API in mind and we recommend they are used as such. Support for other form-related APIs is more than welcome, just submit a PR! A short example for the formik-based use cases

    <FieldInput 
        label="Email" 
        value={formik.values.email} 
        onChangeText={formik.handleChange('email')} 
        />
    <FieldInput 
        label="First name" 
        value={formik.values.firstName} 
        onChangeText={formik.handleChange('firstName')} 
        />
    <FieldInput 
        label="Last name" 
        value={formik.values.lastName} 
        onChangeText={formik.handleChange('lastName')} 
        />
    <FieldInput 
        label="Phone number" 
        value={formik.values.phoneNumber} 
        editable={false}  
        inputStyle={{ marginBottom: 0 }} />
    <DateTimeInput 
        value={formik.values.birthdate} 
        onChangeValue={handleChange('birthdate')}
          />
    <OptionInput
            value={formik.values.relationship}
            label="Relationship"
            extraNote="(optional)"
            onChangeValue={handleChange('relationship')}
            options={relationshipOptions}
          />
    

    Styling via Context

    This library implements styles through the React Context API. Any component you want to provide custom styles to should be a child component of a <ParentComponent value={customStyleObject}> with the customStyleObject attribute fed to the value prop.

    The components will catch style attributes only meant for them, for eg. if we want to style the a FieldInput instance

        <ParentComponent value={{fieldInputStyle:{ fontSize : 20}}>
             <FieldInput
                onBlur={onFocusChange('email', false)}
                onFocus={onFocusChange('email', true)}
                placeholder={'Email'}
                value={formik.values.email}
                keyboardType="email-address"
                autoCapitalize="none"
                autoCorrect={false}
                returnKeyType="go"
                contextMenuHidden
                onSubmitEditing={() => passwordInputRef.current.focus()}
                onChangeText={formik.handleChange('email')}
                label={'Email'}
                editable={!formik.isSubmitting}>
        </ParentComponent>
    

    Install

    npm i react-native-form-inputs

    DownloadsWeekly Downloads

    0

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    58.8 kB

    Total Files

    31

    Last publish

    Collaborators

    • amogh-jrules