TextInput

TextInput is used to collect text from the user.

Controlled Input with useState

import React, { useState } from 'react'
import { View, TextInput, Text } from 'react-native'

const SearchBar = () => {
  const [query, setQuery] = useState('')

  return (
    <View>
      <TextInput
        value={query}
        onChangeText={setQuery}
        placeholder="Search..."
        style={{
          borderWidth: 1,
          borderColor: '#ccc',
          padding: 8,
          borderRadius: 6
        }}
      />
      <Text>You typed: {query}</Text>
    </View>
  )
}

Common Props

<TextInput
  value={text}
  onChangeText={setText}
  onSubmitEditing={handleSubmit}
  placeholder="Type here..."
  placeholderTextColor="#999"
  keyboardType="email-address"  // 'numeric', 'phone-pad', etc.
  secureTextEntry={true}        // for passwords
  autoCapitalize="none"
  multiline={true}
  numberOfLines={4}
  maxLength={100}
/>