floatinglableinput v0.1.2

Floating Label Input

This lib is use for creating Floating Input layout.

About

This is React-Native TextInput component, containing a floating placeholder.

Install

npm i floatinglableinput

How to use

import React, {useState} from 'react';
import {View,TouchableOpacity, Text} from 'react-native';
import FloatingLabelInput from 'floatinglableinput';


const App = () => {
  const [values, setValues] = useState('');
  const [newValue, setNewValue] = useState('');

  const handleTextChange = (newText) => {
    setValues(newText);
  };

  const handleSetText = () => {
    if (values == '') {
      setNewValue('Filed can not be blank') 
    }else{
      setNewValue("Thanks for enter Name")
    }
  };
  
  return (
    <View>
      <FloatingLabelInput
      errorMessage={newValue} 
      onChangeText={value => handleTextChange(value)} />
      
      <TouchableOpacity
        onPress={() => handleSetText()}
        style={{
          height: 50,
          marginTop: 10,
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: 'red',
          borderRadius: 4,
          marginLeft: 10,
          marginRight: 10,
          flexDirection: 'row',
        }}>
        <Text
          style={{
            color: 'white',
            fontSize: 15,
          }}>
          Submit
        </Text>
      </TouchableOpacity>
    </View>
  );
};
export default App;