reactnatively
reactnatively

TextInput

A styled text input with animated floating labels, helper and error text, icon slots, addons, and a glass variant that integrates with the Liquid Glass surface system. Accepts all native React Native TextInput props.

Import

typescript
import { TextInput } from 'reactnatively';

Interactive preview

Full Name
Email Address
ProfileForm.tsx
1import { useState } from 'react';2import { View, StyleSheet } from 'react-native';3import { TextInput } from 'reactnatively';45export function ProfileForm() {6  const [name, setName] = useState('');7  const [email, setEmail] = useState('');89  return (10    <View style={styles.form}>11      <TextInput12        label="Full Name"13        value={name}14        onChangeText={setName}15      />16      <TextInput17        label="Email Address"18        value={email}19        onChangeText={setEmail}20        keyboardType="email-address"21        autoCapitalize="none"22      />23    </View>24  );25}2627const styles = StyleSheet.create({28  form: { gap: 16, padding: 24 },29});

Sign-up form

SignUpScreen.tsx
1import { useState } from 'react';2import { View, StyleSheet } from 'react-native';3import { Ionicons } from '@expo/vector-icons';4import { TextInput, Button, GlassView, Heading } from 'reactnatively';56export function SignUpScreen() {7  const [email, setEmail] = useState('');8  const [password, setPassword] = useState('');9  const [emailError, setEmailError] = useState('');1011  function validate() {12    if (!email.includes('@')) {13      setEmailError('Enter a valid email address');14      return false;15    }16    setEmailError('');17    return true;18  }1920  return (21    <View style={styles.root}>22      <GlassView elevation={2} borderRadius={24} style={styles.card}>23        <Heading level="h2" align="center">Create Account</Heading>24        <TextInput25          label="Full Name"26          leftIcon={<Ionicons name="person-outline" size={18} color="rgba(255,255,255,0.4)" />}27          isRequired28          autoCapitalize="words"29        />30        <TextInput31          label="Email"32          value={email}33          onChangeText={setEmail}34          keyboardType="email-address"35          autoCapitalize="none"36          leftIcon={<Ionicons name="mail-outline" size={18} color="rgba(255,255,255,0.4)" />}37          isInvalid={!!emailError}38          errorText={emailError}39          clearable40        />41        <TextInput42          label="Password"43          value={password}44          onChangeText={setPassword}45          secureTextEntry46          leftIcon={<Ionicons name="lock-closed-outline" size={18} color="rgba(255,255,255,0.4)" />}47          helperText="At least 8 characters"48          isRequired49        />50        <Button variant="solid" color="primary" size="lg" fullWidth onPress={validate}>51          Create Account52        </Button>53      </GlassView>54    </View>55  );56}5758const styles = StyleSheet.create({59  root: { flex: 1, justifyContent: 'center', padding: 24 },60  card: { padding: 28, gap: 16 },61});

Search bar (glass variant)

SearchBar.tsx
1import { View, StyleSheet } from 'react-native';2import { Ionicons } from '@expo/vector-icons';3import { TextInput } from 'reactnatively';45export function SearchBar({ value, onChangeText }) {6  return (7    <View style={styles.container}>8      <TextInput9        glass10        value={value}11        onChangeText={onChangeText}12        placeholder="Search anything..."13        leftIcon={<Ionicons name="search" size={18} color="rgba(255,255,255,0.4)" />}14        clearable15        onClear={() => onChangeText('')}16        size="lg"17        style={styles.input}18      />19    </View>20  );21}2223const styles = StyleSheet.create({24  container: { padding: 16 },25  input: { borderRadius: 28 },26});

Props

PropTypeDefaultDescription
labelstringundefinedFloating label that animates above the field on focus.
placeholderstringundefinedPlaceholder text shown when the field is empty.
helperTextstringundefinedDescriptive text rendered below the input.
errorTextstringundefinedError message shown below the input when isInvalid is true.
leftIconReactNodeundefinedIcon placed inside the left edge of the input.
rightIconReactNodeundefinedIcon placed inside the right edge of the input.
leftAddonReactNodeundefinedElement attached to the left exterior of the input.
rightAddonReactNodeundefinedElement attached to the right exterior of the input.
size'sm' | 'md' | 'lg'"md"Controls height and font size.
variant'outline' | 'filled' | 'glass' | 'underline'"outline"Visual style of the input container.
glassbooleanfalseShorthand for variant="glass".
isRequiredbooleanfalseMarks the field as required and adds an asterisk to the label.
isDisabledbooleanfalseDisables the input and reduces opacity.
isReadOnlybooleanfalseMakes the input non-editable.
isInvalidbooleanfalseApplies error styling and shows errorText.
clearablebooleanfalseShows a clear button when the input has content.
onClear() => voidundefinedCalled when the clear button is tapped.
styleStyleProp<ViewStyle>undefinedStyle applied to the outer wrapper.
inputStyleStyleProp<TextStyle>undefinedStyle applied directly to the text input element.
containerStyleStyleProp<ViewStyle>undefinedStyle applied to the inner input container.