Mobile apps rely on touch input. React Native provides TextInput for text and gesture handlers for swipes, pinches, and more.

TextInput Basics 

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

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

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

Keyboard Types and Behavior 

  <TextInput
    keyboardType="email-address"
    autoCapitalize="none"
    autoCorrect={false}
    secureTextEntry={true}       // password field
    returnKeyType="search"
    onSubmitEditing={() => handleSearch()}
/>

Multiline Input 

  <TextInput
    multiline
    numberOfLines={4}
    style={{ height: 100, textAlignVertical: 'top' }}
    placeholder="Write a comment..."
/>

KeyboardAvoidingView

Prevent the keyboard from covering inputs:

  import { KeyboardAvoidingView, Platform } from 'react-native';

<KeyboardAvoidingView
    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    style={{ flex: 1 }}
>
    <TextInput placeholder="Email" />
    <TextInput placeholder="Password" secureTextEntry />
</KeyboardAvoidingView>

Buttons

React Native has no <button> element. Use Pressable:

  import { Pressable, Text, StyleSheet } from 'react-native';

<Pressable
    style={({ pressed }) => [styles.button, pressed && styles.pressed]}
    onPress={handleSubmit}
>
    <Text style={styles.buttonText}>Submit</Text>
</Pressable>

const styles = StyleSheet.create({
    button: { backgroundColor: '#007AFF', padding: 14, borderRadius: 8, alignItems: 'center' },
    pressed: { opacity: 0.7 },
    buttonText: { color: '#fff', fontSize: 16, fontWeight: '600' },
});

Switch 

  import { Switch } from 'react-native';

<Switch value={enabled} onValueChange={setEnabled} />

Next: fetch data from APIs and display it in your app.