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:

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

preview

basic example:

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

full example:

1<FictionFloatingLabelInput
2    label="First Name" // label itself
3    value={x} // just a state variable
4
5    labelFocusedTop={-5} // Y position of label when focused
6    labelUnFocusedTop={10} // Y position of label when un-focused
7
8    containerStyle={{}} // container style
9    focusedContainerStyle={{}} // container style when focused
10    unFocusedContainerStyle={{}} // container style when un-focused
11
12    subContainerStyle={{}} // child container style
13    focusedSubContainerStyle={{}} // child container style when focused
14    unfocusedSubContainerStyle={{}} // child container style when un-focused
15
16    labelStyle={{}} // label style
17    focusedLabelStyle={{}} // label style when focused
18    unfocusedLabelStyle={{}} // label style when un-focused
19
20    textInputStyle={{}} // text input style
21    focusedTextInputStyle={{}} // text input style when focused
22    unFocusedTextInputStyle={{}} // text input style when un-focused
23
24    labelFontSizeUnFocused={14} // label font size when un-focused
25    labelFontSizeFocused={10} // label font size when focused
26
27    labelColorUnFocused={"red"} // label color when un-focused
28    labelColorFocused={"green"} // label color when focused
29
30    underlineColorAndroid={"transparent"} // you know this one, right?
31
32    selectionColor={"red"} // cursor and selection color
33
34    onChangeText={(value)=>setX(value)} // setting state variable
35
36    // all other text input props are supported too, Except onFocus and onBlur, instead below focus and blur events are explained
37
38    preOnFocus={()=>{ 
39      // gets called before the animation starts , focusing
40    }}
41
42    postOnFocus={()=>{ 
43      // gets called after the animation ends , focusing
44    }}
45
46    preOnBlur={()=>{ 
47      // gets called before the animation starts , unfocusing
48    }}
49
50    postOnBlur={()=>{ 
51      // gets called after the animation ends, unfocusing
52    }}
53
54/>

Prop	Explaination
Content Cell	String label itself
value	`string
labelFocusedTop	number Y position of label when focused
labelUnFocusedTop	number Y position of label when un-focused
containerStyle	Style container style i.e {padding:2}
focusedContainerStyle	Style container style when focused i.e {padding:2}
unFocusedContainerStyle	Style container style when un-focused i.e {padding:2}
subContainerStyle	Style child container style i.e {padding:2}
focusedSubContainerStyle	Style child container style when focused i.e {padding:2}
unfocusedSubContainerStyle	Style child container style when un-focused i.e {padding:2}
labelStyle	Style label style i.e {padding:2}
focusedLabelStyle	Style label style when focused i.e {padding:2}
unfocusedLabelStyle	Style label style when un-focused i.e {padding:2}
textInputStyle	Style text input style i.e {padding:2}
focusedTextInputStyle	Style text input style when focused i.e {padding:2}
unFocusedTextInputStyle	Style text input style when un-focused i.e {padding:2}
labelFontSizeUnFocused	number label font size when un-focused i.e 12
labelFontSizeFocused	number label font size when focused i.e 12
labelColorUnFocused	string label color when un-focused i.e red or #000
labelColorFocused	string label color when focused i.e red or #000
underlineColorAndroid	string android input underline default: transparent
selectionColor	string cursor and selection color
preOnFocus	()=>{ // YOUR CODE HERE } gets called before the animation starts , focusing
postOnFocus	()=>{ // YOUR CODE HERE } gets called after the animation ends , focusing
preOnBlur	()=>{ // YOUR CODE HERE } gets called before the animation starts , unfocusing
postOnBlur	()=>{ // YOUR CODE HERE } gets called after the animation ends, unfocusing
all props	any All of the text input props are also supported except onFocus & onBlur, instead above 4 lines explain these two

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

Buy me coffee? BTC Wallet:

1NwhcTSq3RGFkN5AUfyYdnqbrsbiBEsoiq