Comprehensive React Native Code Snippet: Exploring Essential UI Components 🚀

    import React, { useState } from 'react';
    import {View, Text, Image, Button, Pressable,
    TouchableOpacity,
    StyleSheet,
    ScrollView,
    FlatList,
    TextInput,
    } from 'react-native';
 
    const App = () => {
    const [inputValue, setInputValue] = useState('');
    const [flatListData, setFlatListData] = useState([
        { id: '1', title: 'Item 1' },
        { id: '2', title: 'Item 2' },
        { id: '3', title: 'Item 3' },
    ]);
 
    const handlePress = () => alert('Button Pressed!');
    const handleCustomButtonPress = () => alert('Custom Button Pressed!');
    const handleFlatListItemPress = (item) => alert(`You clicked ${item.title}`);
 
    return (
        <ScrollView>
        <View style={styles.container}>
            {/* Text Component */}
            <Text style={styles.heading}>React Native Components Demo 🚀</Text>
 
            {/* Image Component */}
            <Image
            source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
            style={styles.image}
            />
 
            {/* Button Component */}
            <Button title="Default Button" onPress={handlePress} color="#841584" />
 
            {/* Pressable Component */}
            <Pressable style={styles.customButton} onPress={handleCustomButtonPress}>
            <Text style={styles.customButtonText}>Custom Button (Pressable)</Text>
            </Pressable>
 
            {/* TouchableOpacity Component */}
            <TouchableOpacity
            style={styles.touchable}
            onPress={() => alert('TouchableOpacity Pressed!')}
            >
            <Text style={styles.touchableText}>Touchable Button</Text>
            </TouchableOpacity>
 
            {/* TextInput Component */}
            <TextInput
            style={styles.input}
            placeholder="Enter your text here"
            value={inputValue}
            onChangeText={(text) => setInputValue(text)}
            />
            <Text style={styles.inputDisplay}>You typed: {inputValue}</Text>
 
            {/* FlatList Component */}
            <Text style={styles.subHeading}>FlatList Example:</Text>
            <FlatList
            data={flatListData}
            renderItem={({ item }) => (
                <Pressable onPress={() => handleFlatListItemPress(item)}>
                <Text style={styles.listItem}>{item.title}</Text>
                </Pressable>
            )}
            keyExtractor={(item) => item.id}
            />
 
            {/* ScrollView Component */}
            <Text style={styles.subHeading}>ScrollView Example:</Text>
            <ScrollView horizontal>
            <View style={styles.scrollItem}>
                <Text>Horizontal Item 1</Text>
            </View>
            <View style={styles.scrollItem}>
                <Text>Horizontal Item 2</Text>
            </View>
            <View style={styles.scrollItem}>
                <Text>Horizontal Item 3</Text>
            </View>
            </ScrollView>
        </View>
        </ScrollView>
    );
    };
 
    const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
    },
    heading: {
        fontSize: 24,
        fontWeight: 'bold',
        marginBottom: 20,
    },
    image: {
        width: 100,
        height: 100,
        marginBottom: 20,
    },
    customButton: {
        backgroundColor: '#841584',
        padding: 10,
        borderRadius: 5,
        marginBottom: 20,
    },
    customButtonText: {
        color: 'white',
        fontWeight: 'bold',
        textAlign: 'center',
    },
    touchable: {
        backgroundColor: '#009688',
        padding: 10,
        borderRadius: 5,
        marginBottom: 20,
    },
    touchableText: {
        color: 'white',
        fontWeight: 'bold',
        textAlign: 'center',
    },
    input: {
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 5,
        padding: 10,
        marginBottom: 10,
    },
    inputDisplay: {
        fontSize: 16,
        marginBottom: 20,
    },
    subHeading: {
        fontSize: 18,
        fontWeight: 'bold',
        marginTop: 20,
        marginBottom: 10,
    },
    listItem: {
        fontSize: 16,
        padding: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#ccc',
    },
    scrollItem: {
        backgroundColor: '#f0f0f0',
        padding: 20,
        marginRight: 10,
        borderRadius: 5,
    },
    });
 
    export default App;