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

const Card = ({ title, description }) => {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.description}>{description}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    padding: 16,
    backgroundColor: 'white',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  description: {
    fontSize: 14,
    color: '#666',
  },
});

import { Image, ImageBackground } from 'react-native';

const ProfileHeader = ({ user }) => (
  <ImageBackground
    source={require('../assets/header-bg.jpg')}
    style={styles.headerBg}
  >
    <Image
      source={{ uri: user.avatar }}
      style={styles.avatar}
    />
    <Text style={styles.username}>{user.name}</Text>
  </ImageBackground>
);

import {
  TouchableOpacity,
  TouchableHighlight,
  TouchableWithoutFeedback,
} from 'react-native';

const Button = ({ onPress, title }) => (
  <TouchableOpacity
    onPress={onPress}
    style={styles.button}
  >
    <Text style={styles.buttonText}>{title}</Text>
  </TouchableOpacity>
);

import { FlatList } from 'react-native';

const ItemList = ({ data }) => (
  <FlatList
    data={data}
    keyExtractor={(item) => item.id}
    renderItem={({ item }) => (
      <ListItem
        title={item.title}
        description={item.description}
      />
    )}
    refreshing={false}
    onRefresh={() => {
      // Handle refresh
    }}
    onEndReached={() => {
      // Load more data
    }}
    onEndReachedThreshold={0.5}
  />
);

import { SectionList } from 'react-native';

const GroupedList = ({ sections }) => (
  <SectionList
    sections={sections}
    keyExtractor={(item) => item.id}
    renderItem={({ item }) => (
      <ListItem {...item} />
    )}
    renderSectionHeader={({ section: { title } }) => (
      <Text style={styles.sectionHeader}>{title}</Text>
    )}
  />
);

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const AppNavigator = () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: 'Welcome',
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
        }}
      />
      <Stack.Screen
        name="Details"
        component={DetailsScreen}
      />
    </Stack.Navigator>
  </NavigationContainer>
);

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/MaterialIcons';

const Tab = createBottomTabNavigator();

const TabNavigator = () => (
  <Tab.Navigator
    screenOptions={({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {
        let iconName;
        if (route.name === 'Home') {
          iconName = 'home';
        } else if (route.name === 'Profile') {
          iconName = 'person';
        }
        return <Icon name={iconName} size={size} color={color} />;
      },
    })}
  >
    <Tab.Screen name="Home" component={HomeScreen} />
    <Tab.Screen name="Profile" component={ProfileScreen} />
  </Tab.Navigator>
);

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

const DrawerNavigator = () => (
  <Drawer.Navigator
    initialRouteName="Home"
    drawerContent={(props) => <CustomDrawerContent {...props} />}
  >
    <Drawer.Screen name="Home" component={HomeScreen} />
    <Drawer.Screen name="Settings" component={SettingsScreen} />
  </Drawer.Navigator>
);

import { TextInput } from 'react-native';

const LoginForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <View style={styles.form}>
      <TextInput
        style={styles.input}
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
      />
      <TextInput
        style={styles.input}
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <Button title="Login" onPress={handleLogin} />
    </View>
  );
};

const FeedScreen = () => {
  const [posts, setPosts] = useState([]);
  
  useEffect(() => {
    fetchPosts();
  }, []);

  return (
    <FlatList
      data={posts}
      renderItem={({ item }) => <PostCard post={item} />}
      keyExtractor={(item) => item.id}
    />
  );
};

const PostCard = ({ post }) => (
  <View style={styles.postCard}>
    <View style={styles.header}>
      <Image
        source={{ uri: post.author.avatar }}
        style={styles.avatar}
      />
      <Text style={styles.author}>{post.author.name}</Text>
    </View>
    <Image
      source={{ uri: post.image }}
      style={styles.postImage}
    />
    <View style={styles.footer}>
      <TouchableOpacity onPress={() => handleLike(post.id)}>
        <Icon name="heart" size={24} color="red" />
      </TouchableOpacity>
      <Text>{post.likes} likes</Text>
    </View>
  </View>
);

const FeedNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen
      name="Feed"
      component={FeedScreen}
      options={{
        headerRight: () => (
          <TouchableOpacity onPress={() => navigation.navigate('NewPost')}>
            <Icon name="add" size={24} />
          </TouchableOpacity>
        ),
      }}
    />
    <Stack.Screen name="Comments" component={CommentsScreen} />
  </Stack.Navigator>
);