fiction-expo-floating-label v1.0.2

Fully Customizable Floating Label Input By Fiction Developers

Developed with passion by Fiction Developers to support a very dynamic floating action label, you can modify almost everything by just passing some params, i.e, label Y position when focused, and when unFocused, label's color, fontsize both when focused and unfocused, also the container style, text inptu style with focused/unfocused, and you can even modify the courser/selection color

Note: all text input props are supported too, Except onFocus and onBlur, instead focus and blur events are explained in Full Example below

Expo 40 Supported Now!

Install:

$ npm i fiction-expo-floating-label-input

Usage:

import {FictionFloatingLabelInput} from "fiction-expo-floating-label";

preview

basic example:

<FictionFloatingLabelInput
    label="First Name"
    value={x} // just a state variable
    labelFocusedTop={10} // Y position of label when focused
    labelUnFocusedTop={-5} // Y position of label when un-focused
    onChangeText={(t)=>setX(t)} // setting state variable
/>

full example:

<FictionFloatingLabelInput
    label="First Name" // label itself
    value={x} // just a state variable

    labelFocusedTop={-5} // Y position of label when focused
    labelUnFocusedTop={10} // Y position of label when un-focused

    containerStyle={{}} // container style
    focusedContainerStyle={{}} // container style when focused
    unFocusedContainerStyle={{}} // container style when un-focused

    subContainerStyle={{}} // child container style
    focusedSubContainerStyle={{}} // child container style when focused
    unfocusedSubContainerStyle={{}} // child container style when un-focused

    labelStyle={{}} // label style
    focusedLabelStyle={{}} // label style when focused
    unfocusedLabelStyle={{}} // label style when un-focused

    textInputStyle={{}} // text input style
    focusedTextInputStyle={{}} // text input style when focused
    unFocusedTextInputStyle={{}} // text input style when un-focused

    labelFontSizeUnFocused={14} // label font size when un-focused
    labelFontSizeFocused={10} // label font size when focused

    labelColorUnFocused={"red"} // label color when un-focused
    labelColorFocused={"green"} // label color when focused

    underlineColorAndroid={"transparent"} // you know this one, right?

    selectionColor={"red"} // cursor and selection color

    onChangeText={(value)=>setX(value)} // setting state variable

    // all other text input props are supported too, Except onFocus and onBlur, instead below focus and blur events are explained

    preOnFocus={()=>{ 
      // gets called before the animation starts , focusing
    }}

    postOnFocus={()=>{ 
      // gets called after the animation ends , focusing
    }}

    preOnBlur={()=>{ 
      // gets called before the animation starts , unfocusing
    }}

    postOnBlur={()=>{ 
      // gets called after the animation ends, unfocusing
    }}

/>

Ping me if you have any problems at: whatsapp: +923009550284 email: csgenius786@gmail.com skype: faisal284hr

Buy me coffee? BTC Wallet:

1NwhcTSq3RGFkN5AUfyYdnqbrsbiBEsoiq