@mackscript/react-native-float-label-input v1.0.5

react-native-float-label-input

A customizable React Native input component with a floating label animation.

Installation

npm install @mackscript/react-native-float-label-input

Usage

import React, { useState } from 'react';
import { View, SafeAreaView } from 'react-native';
import FloatingLabelInput from '@mackscript/react-native-float-label-input';

export default function App() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
  });

  const handleChange = (key: string, value: string) => {
    setFormData((prev) => ({ ...prev, [key]: value }));
  };

  return (
    <SafeAreaView>
      <View style={{ margin: 20 }}>
        <FloatingLabelInput
          label='Full Name'
          value={formData.name}
          onChangeText={(text) => handleChange('name', text)}
        />
        <FloatingLabelInput
          label='Email'
          value={formData.email}
          keyboardType='email-address'
          onChangeText={(text) => handleChange('email', text)}
        />
        <FloatingLabelInput
          label='Phone Number'
          value={formData.phone}
          keyboardType='phone-pad'
          onChangeText={(text) => handleChange('phone', text)}
        />
      </View>
    </SafeAreaView>
  );
}

Props

Features

• Floating label animation when focusing or typing
• Customizable styles
• Supports different keyboard types
• Supports multiline input

License

MIT