Skip to content

Latest commit

 

History

History
63 lines (53 loc) · 1.7 KB

File metadata and controls

63 lines (53 loc) · 1.7 KB

Expo Native TextInput

A fully-featured, native TextInput module for Expo with support for controlled input, right-side icons, secure text entry, and customizable borders. Built with Kotlin (Android) and Swift (iOS) for seamless cross-platform behavior.


Android demo iOS Demo

✨ Features

  • Controlled input with stable keyboard behavior.
  • 🔒 Secure text entry toggle (show/hide password).
  • 🎨 Customizable borders for focused, unfocused, error, and disabled states.
  • 🖼️ Right-side icon support with adjustable size and proper alignment.

🚀 Usage

import { NativeInputView, NativeInputViewRef } from 'native-input';
import { useRef, useState } from 'react';

export default function App() {
  const [text, setText] = useState("")
  const [error, setError] = useState(false)
  const [showPassword, setShowPassword] = useState(true)

  const inputRef = useRef<NativeInputViewRef>(null)

  return (
    <NativeInputView
      ref={inputRef}
      borderColors={{
        focused: "#0b278c",
        unfocused: "#000000",
        error: "#9d0606",
      }}
      text={text}
      onChangeText={setText}
      secureTextEntry={showPassword}
      rightIcon={{ 
        source: require("./assets/eye.png"), 
        size: 24 
      }}
      onRightIconClick={() => {
        setShowPassword(state => !state)
      }}
    />
  )
}