Initial commit

screens/DetailsScreen.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+export default function DetailsScreen({ route }: any) {
+  const { event } = route.params;
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{event.name}</Text>
+      <Text style={styles.date}>{new Date(event.date).toLocaleDateString()}</Text>
+      <Text style={styles.description}>{event.description}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, padding: 16 },
+  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 8 },
+  date: { fontSize: 14, color: '#666', marginBottom: 16 },
+  description: { fontSize: 16 },
+});

screens/EventsScreen.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect } from 'react';
+import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import { setEvents, toggleFavorite } from '../store/eventsSlice';
+import { RootState } from '../store/store';
+
+export default function EventsScreen({ navigation }: any) {
+  const dispatch = useDispatch();
+  const { events, favorites } = useSelector((state: RootState) => state.events);
+
+  useEffect(() => {
+    fetch('https://jsonplaceholder.typicode.com/posts')
+      .then(res => res.json())
+      .then(data => {
+        const mappedEvents = data.slice(0, 20).map((item: any) => ({
+          id: item.id.toString(),
+          name: item.title,
+          description: item.body,
+          date: new Date().toISOString(),
+        }));
+        dispatch(setEvents(mappedEvents));
+      });
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={events}
+        keyExtractor={item => item.id}
+        renderItem={({ item }) => (
+          <TouchableOpacity
+            style={styles.item}
+            onPress={() => navigation.navigate('Details', { event: item })}
+          >
+            <Text style={styles.title}>{item.name}</Text>
+            <TouchableOpacity
+              onPress={() => dispatch(toggleFavorite(item.id))}
+              style={styles.favBtn}
+            >
+              <Text>{favorites.includes(item.id) ? '❤️' : '🤍'}</Text>
+            </TouchableOpacity>
+          </TouchableOpacity>
+        )}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, padding: 16, backgroundColor: '#000000' },
+  item: { padding: 16, borderBottomWidth: 1, borderBottomColor: '#333333', flexDirection: 'row', justifyContent: 'space-between' },
+  title: { fontSize: 16, flex: 1, color: '#ffffff' },
+  favBtn: { padding: 8 },
+});

screens/FavoritesScreen.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+import { RootState } from '../store/store';
+
+export default function FavoritesScreen({ navigation }: any) {
+  const { events, favorites } = useSelector((state: RootState) => state.events);
+  const favoriteEvents = events.filter(e => favorites.includes(e.id));
+
+  return (
+    <View style={styles.container}>
+      {favoriteEvents.length === 0 ? (
+        <Text style={styles.empty}>Nincs kedvenc esemény</Text>
+      ) : (
+        <FlatList
+          data={favoriteEvents}
+          keyExtractor={item => item.id}
+          renderItem={({ item }) => (
+            <TouchableOpacity
+              style={styles.item}
+              onPress={() => navigation.navigate('Details', { event: item })}
+            >
+              <Text style={styles.title}>{item.name}</Text>
+            </TouchableOpacity>
+          )}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, padding: 16 },
+  item: { padding: 16, borderBottomWidth: 1 },
+  title: { fontSize: 16 },
+  empty: { textAlign: 'center', marginTop: 50, fontSize: 16, color: '#666' },
+});