Floating Label Input for React Native using

AJ-FLOATING-LABEL-INPUT @ https://www.npmjs.com/package/aj-floating-label-input

Run this example

• clone this repository
• install the npm dependencies by npm install, npm install react-native-cli'
• create local.properties file in android folder and define sdk path like sdk.dir= C:\android\sdk

Run on Emulator

react-native run-android

Installation

For react native project.

$ npm install aj-floating-label-input

Usage

For react native project follow the following steps

1) Import Library

import FloatingLabelInput from 'aj-floating-label-input'

2) add the Input Field as following

<FloatingLabel
            onChangeText={value => setUsername(value)}
            focusBorderColor={ThemeColors.ThemeColorPrimary}
            focusLabelColor={ThemeColors.ThemeColorPrimary}
            blurBorderColor="#AAA"
            blurLabelColor="#AAA"
            floatingLabel="Username"
            inputStyle={{}}
            labelStyle={{}}
            floatedStyle={{ fontSize: 10, top: 3, }}
            unfloatedStyle={{ fontSize: 11, top: 12, }}
            containerStyle={{ borderRadius: 50, borderWidth: 0.5 }}/>

Demo

Contributions

Contributions, issues and feature requests are welcome. Feel free to check issues page if you want to contribute.

About Me

My name is Abid Jamil from Pakistan, I am Senior Software Engineer at Nextbridge Ltd Pakistan. I have expertise in Native Android | React - Native | IOS | Android | Java | Kotlin | Javascript | MVVM | MVP | RxJava | Dagger | Material Design | Live Data | Data Binding. Futhermore, I am open source contribution and computer science researcher. I have published 17 research paper which is avaiable on Google Scholar Profile. I have delivered many talks in different national and International universities around the globe.

• Github : abidjamil
• Youtube : Abid Jamil
• Facebook : Abid Jamil