mnky/Galaxies-my-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source 
Generated by create-expo-app 3.2.0.
This commit is contained in:
Dennis Hundertmark
2025-02-25 11:38:57 +01:00
commit 0e7f7e1dfd
31 changed files with 18794 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+38
View File
@@ -0,0 +1,38 @@
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
# dependencies
node_modules/
# Expo
.expo/
dist/
web-build/
expo-env.d.ts
# Native
*.orig.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision
# Metro
.metro-health-check*
# debug
npm-debug.*
yarn-debug.*
yarn-error.*
# macOS
.DS_Store
*.pem
# local env files
.env*.local
# typescript
*.tsbuildinfo
app-example
README.md
+50
View File
@@ -0,0 +1,50 @@
# Welcome to your Expo app 👋
This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
## Get started
1. Install dependencies
```bash
npm install
```
2. Start the app
```bash
npx expo start
```
In the output, you'll find options to open the app in a
- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
## Get a fresh project
When you're ready, run:
```bash
npm run reset-project
```
This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
## Learn more
To learn more about developing your project with Expo, look at the following resources:
- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
## Join the community
Join our community of developers creating universal apps.
- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
app.json
+43
View File
@@ -0,0 +1,43 @@
{
"expo": {
"name": "my-app",
"slug": "my-app",
"version": "1.0.0",
"jsEngine": "hermes",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"scheme": "myapp",
"userInterfaceStyle": "automatic",
"newArchEnabled": true,
"ios": {
"supportsTablet": true,
"jsEngine": "jsc"
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/images/adaptive-icon.png",
"backgroundColor": "#ffffff"
}
},
"web": {
"bundler": "metro",
"output": "static",
"favicon": "./assets/images/favicon.png"
},
"plugins": [
"expo-router",
[
"expo-splash-screen",
{
"image": "./assets/images/splash-icon.png",
"imageWidth": 200,
"resizeMode": "contain",
"backgroundColor": "#ffffff"
}
]
],
"experiments": {
"typedRoutes": true
}
}
}
app/_layout.tsx
+66
View File
@@ -0,0 +1,66 @@
import { COLORS } from "@/constants/colors";
import { Tabs } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import React from "react";
export default function RootLayout() {
return (
<Tabs
screenOptions={{
headerShadowVisible: false,
headerStyle: {
backgroundColor: COLORS.background,
},
headerTintColor: COLORS.text,
headerTitleStyle: {
fontWeight: "bold",
},
tabBarStyle: {
backgroundColor: COLORS.containerBackground,
borderTopColor: COLORS.text,
borderTopWidth: 1,
},
tabBarActiveTintColor: COLORS.text,
tabBarInactiveTintColor: COLORS.inactive,
}}
>
<Tabs.Screen
name={"index"}
options={{
href: null,
}}
></Tabs.Screen>
<Tabs.Screen
name="films"
options={{
title: "All Films",
headerShown: false,
tabBarLabel: "Films",
tabBarIcon: ({ color, size }) => (
<Ionicons name="film-outline" size={size} color={color} />
),
}}
></Tabs.Screen>
<Tabs.Screen
name="people"
options={{
title: "All Characters",
headerShown: false,
tabBarLabel: "People",
tabBarIcon: ({ color, size }) => (
<Ionicons name="person-outline" size={size} color={color} />
),
}}
></Tabs.Screen>
<Tabs.Screen
name="fav"
options={{
title: "Favorites",
tabBarIcon: ({ color, size }) => (
<Ionicons name="star-outline" size={size} color={color} />
),
}}
></Tabs.Screen>
</Tabs>
);
}
app/fav.tsx
+111
View File
@@ -0,0 +1,111 @@
import {
FlatList,
RefreshControl,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import React, { useEffect } from "react";
import { Film } from "@/types/film";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { FAVORITES_KEY } from "@/constants/keys";
import { COLORS } from "@/constants/colors";
import FilmItem from "@/components/FilmItem";
import ListEmptyComponent from "@/components/ListEmptyComponent";
import { Ionicons } from "@expo/vector-icons";
import { useFocusEffect } from "expo-router";
const Page = () => {
const [favorites, setFavorites] = React.useState<Film[]>([]);
const [refreshing, setRefreshing] = React.useState(false);
const fetchFavorites = async () => {
try {
const favorites = await AsyncStorage.getItem(FAVORITES_KEY);
if (favorites) {
setFavorites(JSON.parse(favorites) as Film[]);
}
} catch (error) {
} finally {
setRefreshing(false);
}
};
const onRefresh = () => {
setRefreshing(true);
fetchFavorites();
};
const removeFavorite = async (film: Film) => {
const updatedFavorites = favorites.filter(
(f) => f.episode_id !== film.episode_id,
);
try {
setFavorites(updatedFavorites);
await AsyncStorage.setItem(
FAVORITES_KEY,
JSON.stringify(updatedFavorites),
);
} catch (error) {
console.error(error);
}
};
const renderItem = ({ item }: { item: Film }) => (
<View style={styles.itemContainer}>
<Text style={styles.itemText}>{item.title}</Text>
<TouchableOpacity onPress={() => removeFavorite(item)}>
<Ionicons name="trash-outline" size={24} color={COLORS.text} />
</TouchableOpacity>
</View>
);
useFocusEffect(
React.useCallback(() => {
fetchFavorites();
}, []),
);
return (
<View style={styles.container}>
<FlatList
data={favorites}
renderItem={renderItem}
keyExtractor={(item) => item.episode_id.toString()}
refreshing={refreshing}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
tintColor={COLORS.text}
/>
}
ListEmptyComponent={() => <ListEmptyComponent loading={false} />}
/>
</View>
);
};
export default Page;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: COLORS.containerBackground,
},
itemContainer: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: COLORS.itemBackground,
padding: 16,
marginVertical: 8,
marginHorizontal: 16,
borderRadius: 8,
},
itemText: {
fontSize: 16,
color: COLORS.text,
},
});
app/films/[id].tsx
+133
View File
@@ -0,0 +1,133 @@
import { COLORS } from "@/constants/colors";
import { FAVORITES_KEY } from "@/constants/keys";
import { Film } from "@/types/film";
import { Ionicons } from "@expo/vector-icons";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { Stack, useLocalSearchParams } from "expo-router";
import React, { useEffect, useState } from "react";
import {
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
const Page = () => {
const { id } = useLocalSearchParams();
const [film, setFilm] = useState<Film | null>(null);
const [loading, setLoading] = useState(true);
const [isFavorite, setIsFavorite] = useState(false);
useEffect(() => {
const fetchFilm = async () => {
try {
setLoading(true);
const response = await fetch(`https://swapi.dev/api/films/${id}`);
const data = await response.json();
setFilm(data);
checkFavoriteStatus(data);
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
};
fetchFilm();
}, [id]);
const checkFavoriteStatus = async (film: Film) => {
try {
const favorites = await AsyncStorage.getItem(FAVORITES_KEY);
if (favorites) {
const favoriteFilms = JSON.parse(favorites) as Film[];
setIsFavorite(
favoriteFilms.some((f) => f.episode_id === film.episode_id),
);
}
} catch (error) {}
};
const toggleFavorite = async () => {
try {
const favorites = await AsyncStorage.getItem(FAVORITES_KEY);
let favoriteFilms = favorites ? JSON.parse(favorites) : [];
if (isFavorite) {
favoriteFilms = favoriteFilms.filter(
(f: Film) => f.episode_id !== film?.episode_id,
);
} else {
favoriteFilms.push(film);
}
await AsyncStorage.setItem(FAVORITES_KEY, JSON.stringify(favoriteFilms));
setIsFavorite(!isFavorite);
} catch (error) {}
};
if (loading) {
return (
<View>
<Text style={{ color: "#fff" }}>Loading...</Text>
</View>
);
}
if (!film) {
return (
<View style={styles.container}>
<Text style={{ color: "#fff" }}>Film not found</Text>
</View>
);
}
return (
<ScrollView style={styles.container}>
<Stack.Screen
options={{
headerRight: () => (
<TouchableOpacity onPress={toggleFavorite}>
<Ionicons
name={isFavorite ? "star" : "star-outline"}
size={24}
color={COLORS.text}
/>
</TouchableOpacity>
),
}}
/>
<Text style={styles.details}>Title: {film.title}</Text>
<Text style={styles.details}>Director: {film.director}</Text>
<Text style={styles.details}>Producer: {film.producer}</Text>
<Text style={styles.details}>Release Date: {film.release_date}</Text>
<Text style={styles.crawl}>{film.opening_crawl}</Text>
</ScrollView>
);
};
export default Page;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: COLORS.containerBackground,
padding: 16,
},
title: {
fontSize: 24,
fontWeight: "bold",
color: COLORS.text,
marginBottom: 16,
},
details: {
fontSize: 16,
color: COLORS.text,
marginBottom: 8,
},
crawl: {
fontSize: 16,
color: COLORS.text,
fontStyle: "italic",
marginTop: 16,
},
});
app/films/_layout.tsx
+36
View File
@@ -0,0 +1,36 @@
import { StyleSheet, Text, View } from "react-native";
import React from "react";
import { Stack } from "expo-router";
import { COLORS } from "@/constants/colors";
const Layout = () => {
return (
<Stack
screenOptions={{
headerShadowVisible: false,
headerStyle: {
backgroundColor: COLORS.background,
},
headerTintColor: COLORS.text,
headerTitleStyle: {
fontWeight: "bold",
},
contentStyle: {
backgroundColor: COLORS.background,
},
}}
>
<Stack.Screen name="index" options={{ title: "All Films" }} />
<Stack.Screen
name="[id]"
options={{
title: "Film Details",
}}
/>
</Stack>
);
};
export default Layout;
const styles = StyleSheet.create({});
app/films/index.tsx
+68
View File
@@ -0,0 +1,68 @@
import FilmItem from "@/components/FilmItem";
import ListEmptyComponent from "@/components/ListEmptyComponent";
import { COLORS } from "@/constants/colors";
import { Film } from "@/types/film";
import React, { useEffect } from "react";
import { FlatList, RefreshControl, StyleSheet, View } from "react-native";
const Page = () => {
const [films, setFilms] = React.useState<Film[]>([]);
const [refreshing, setRefreshing] = React.useState(false);
const [loading, setLoading] = React.useState(false);
const fetchFilms = async () => {
try {
setLoading(true);
const response = await fetch("https://swapi.dev/api/films/");
const data = await response.json();
setFilms(data.results);
} catch (error) {
console.error(error);
} finally {
setLoading(false);
setRefreshing(false);
}
};
useEffect(() => {
fetchFilms();
}, []);
const onRefresh = () => {
setRefreshing(true);
fetchFilms();
};
return (
<View style={styles.container}>
<FlatList
data={films}
keyExtractor={(item) => item.episode_id.toString()}
renderItem={({ item }) => <FilmItem item={item} />}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
tintColor={COLORS.text}
/>
}
ListEmptyComponent={
<ListEmptyComponent loading={loading} message="No films found" />
}
/>
</View>
);
};
export default Page;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: COLORS.containerBackground,
},
item: {
padding: 16,
borderBottomWidth: 1,
},
});
app/index.tsx
+6
View File
@@ -0,0 +1,6 @@
import { Redirect } from "expo-router";
import { Text, View } from "react-native";
export default function Index() {
return <Redirect href={"/films"} />;
}
app/people/[id].tsx
+89
View File
@@ -0,0 +1,89 @@
import { COLORS } from "@/constants/colors";
import { Person } from "@/types/person";
import { useLocalSearchParams } from "expo-router";
import React, { useEffect, useState } from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";
const Page = () => {
const { id } = useLocalSearchParams();
const [person, setPerson] = useState<Person | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchPeople = async () => {
try {
setLoading(true);
const response = await fetch(`https://swapi.dev/api/people/${id}`);
const data = await response.json();
setPerson(data);
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
};
fetchPeople();
}, [id]);
if (loading) {
return (
<View>
<Text style={{ color: "#fff" }}>Loading...</Text>
</View>
);
}
if (!person) {
return (
<View style={styles.container}>
<Text style={{ color: "#fff" }}>Film not found</Text>
</View>
);
}
return (
<ScrollView style={styles.container}>
<View style={styles.header}>
<Text style={styles.name}>{person.name}</Text>
</View>
<Text style={styles.detail}>Height: {person.height} cm</Text>
<Text style={styles.detail}>Mass: {person.mass} kg</Text>
<Text style={styles.detail}>Hair Color: {person.hair_color}</Text>
<Text style={styles.detail}>Skin Color: {person.skin_color}</Text>
<Text style={styles.detail}>Eye Color: {person.eye_color}</Text>
<Text style={styles.detail}>Birth Year: {person.birth_year}</Text>
<Text style={styles.detail}>Gender: {person.gender}</Text>
</ScrollView>
);
};
export default Page;
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 16,
backgroundColor: COLORS.background,
},
header: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 16,
},
name: {
fontSize: 24,
fontWeight: "bold",
color: COLORS.text,
flex: 1,
},
favoriteButton: {
padding: 8,
},
detail: {
fontSize: 16,
color: COLORS.text,
marginBottom: 8,
},
});
app/people/_layout.tsx
+36
View File
@@ -0,0 +1,36 @@
import { StyleSheet, Text, View } from "react-native";
import React from "react";
import { Stack } from "expo-router";
import { COLORS } from "@/constants/colors";
const Layout = () => {
return (
<Stack
screenOptions={{
headerShadowVisible: false,
headerStyle: {
backgroundColor: COLORS.background,
},
headerTintColor: COLORS.text,
headerTitleStyle: {
fontWeight: "bold",
},
contentStyle: {
backgroundColor: COLORS.background,
},
}}
>
<Stack.Screen name="index" options={{ title: "All Characters" }} />
<Stack.Screen
name="[id]"
options={{
title: "Character Details",
}}
/>
</Stack>
);
};
export default Layout;
const styles = StyleSheet.create({});
app/people/index.tsx
+158
View File
@@ -0,0 +1,158 @@
import ListEmptyComponent from "@/components/ListEmptyComponent";
import PersonItem from "@/components/PersonItem";
import { COLORS } from "@/constants/colors";
import { Person } from "@/types/person";
import React, { useEffect, useState } from "react";
import {
ActivityIndicator,
Button,
FlatList,
RefreshControl,
StyleSheet,
TextInput,
View,
} from "react-native";
interface ApiResponse {
results: Person[];
next: string | null;
result?: Person[];
}
const Page = () => {
const [people, setPeople] = useState<Person[]>([]);
const [refreshing, setRefreshing] = useState(false);
const [loading, setLoading] = useState(true);
const [searchQuery, setSearchQuery] = useState("");
const [nextPage, setNextPage] = useState<string | null>(null);
const [loadingMore, setLoadingMore] = useState(false);
const fetchPeople = async (query: string = "", url: string | null = null) => {
setLoading(true);
try {
let apiUrl = url || `https://swapi.dev/api/people`;
if (query) {
apiUrl = `https://swapi.tech/api/people/?name=${query}`;
}
const response = await fetch(apiUrl);
const data: ApiResponse = await response.json();
if (query && data.result) {
const transformedResults = data.result.map((item: any) => ({
name: item.properties.name,
birth_year: item.properties.birth_year,
gender: item.properties.gender,
url: item.properties.url,
}));
setPeople(transformedResults);
} else {
setPeople((prevPeople) =>
url ? [...prevPeople, ...data.results] : data.results,
);
}
setNextPage(data.next);
} catch (error) {
console.error("Error fetching people:", error);
} finally {
setRefreshing(false);
setLoading(false);
setLoadingMore(false);
}
};
useEffect(() => {
fetchPeople();
}, []);
const onRefresh = () => {
setRefreshing(true);
fetchPeople(searchQuery);
};
const handleSearch = () => {
fetchPeople(searchQuery);
};
const handleLoadMore = () => {
if (nextPage && !loadingMore) {
setLoadingMore(true);
fetchPeople(searchQuery, nextPage);
}
};
const renderFooter = () => {
if (!loadingMore) return null;
return (
<View style={styles.footerLoader}>
<ActivityIndicator size="small" color="#FFE81F" />
</View>
);
};
return (
<View style={styles.container}>
<View style={styles.searchContainer}>
<TextInput
style={styles.searchBar}
placeholder="Search characters..."
placeholderTextColor={COLORS.inactive}
value={searchQuery}
onChangeText={setSearchQuery}
/>
<Button title="Search" onPress={handleSearch} color={COLORS.text} />
</View>
<FlatList
data={people}
renderItem={({ item }) => <PersonItem item={item} />}
keyExtractor={(item) => item.url}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
tintColor={COLORS.text}
/>
}
ListEmptyComponent={
<ListEmptyComponent
loading={loading}
message={
searchQuery
? "No matching characters found"
: "No characters found"
}
/>
}
onEndReached={handleLoadMore}
onEndReachedThreshold={0.1}
ListFooterComponent={renderFooter}
/>
</View>
);
};
export default Page;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: COLORS.containerBackground,
},
searchContainer: {
flexDirection: "row",
alignItems: "center",
padding: 10,
},
searchBar: {
flex: 1,
backgroundColor: COLORS.itemBackground,
color: COLORS.text,
padding: 10,
marginRight: 10,
borderRadius: 5,
fontSize: 16,
},
footerLoader: {
alignItems: "center",
paddingVertical: 20,
},
});
assets/fonts/SpaceMono-Regular.ttf
Executable
BIN
View File
Binary file not shown.
assets/images/adaptive-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

assets/images/favicon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

assets/images/icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

assets/images/partial-react-logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

assets/images/react-logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

assets/images/react-logo@2x.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

assets/images/react-logo@3x.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

assets/images/splash-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

components/FilmItem.tsx
+42
View File
@@ -0,0 +1,42 @@
import { COLORS } from "@/constants/colors";
import { Film } from "@/types/film";
import { Link } from "expo-router";
import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
const FilmItem: React.FC<{ item: Film }> = ({ item }) => {
const id = item.url.split("/").filter(Boolean).pop();
return (
<Link href={`/films/${id}`} asChild>
<TouchableOpacity>
<View style={styles.filmItem}>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.details}>Episode: {item.episode_id}</Text>
<Text style={styles.details}>Released: {item.release_date}</Text>
</View>
</TouchableOpacity>
</Link>
);
};
export default FilmItem;
const styles = StyleSheet.create({
filmItem: {
backgroundColor: COLORS.background,
padding: 16,
marginVertical: 8,
marginHorizontal: 16,
borderRadius: 8,
},
title: {
fontSize: 18,
fontWeight: "bold",
color: COLORS.text,
marginBottom: 8,
},
details: {
fontSize: 14,
color: "#fff",
},
});
components/ListEmptyComponent.tsx
+35
View File
@@ -0,0 +1,35 @@
import { COLORS } from "@/constants/colors";
import React from "react";
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
interface Props {
loading: boolean;
message?: string;
}
const ListEmptyComponent = ({ loading, message = "No items found" }: Props) => {
return (
<View style={styles.emptyContainer}>
{loading ? (
<ActivityIndicator size={"large"} color={COLORS.text} />
) : (
<Text style={styles.emptyText}>{message}</Text>
)}
</View>
);
};
export default ListEmptyComponent;
const styles = StyleSheet.create({
emptyContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
height: 200,
},
emptyText: {
fontSize: 18,
color: COLORS.inactive,
},
});
components/PersonItem.tsx
+42
View File
@@ -0,0 +1,42 @@
import { COLORS } from "@/constants/colors";
import { Person } from "@/types/person";
import { Link } from "expo-router";
import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
const PersonItem: React.FC<{ item: Person }> = ({ item }) => {
const id = item.url.split("/").filter(Boolean).pop();
return (
<Link href={`/people/${id}`} asChild>
<TouchableOpacity>
<View style={styles.peopleItem}>
<Text style={styles.title}>{item.name}</Text>
<Text style={styles.details}>Birth year: {item.birth_year}</Text>
<Text style={styles.details}>Gender: {item.gender}</Text>
</View>
</TouchableOpacity>
</Link>
);
};
export default PersonItem;
const styles = StyleSheet.create({
peopleItem: {
backgroundColor: COLORS.background,
padding: 16,
marginVertical: 8,
marginHorizontal: 16,
borderRadius: 8,
},
title: {
fontSize: 18,
fontWeight: "bold",
color: COLORS.text,
marginBottom: 8,
},
details: {
fontSize: 14,
color: "#fff",
},
});
constants/Colors.ts
+7
View File
@@ -0,0 +1,7 @@
export const COLORS = {
background: "#1a1a1a",
text: "#ffe81f",
inactive: "#888888",
itemBackground: "#333333",
containerBackground: "#222222",
};
constants/keys.ts
+1
View File
@@ -0,0 +1 @@
export const FAVORITES_KEY = "favorites";
package-lock.json
Generated
+17732
View File
File diff suppressed because it is too large Load Diff
package.json
+57
View File
@@ -0,0 +1,57 @@
{
"name": "my-app",
"main": "expo-router/entry",
"version": "1.0.0",
"scripts": {
"start": "expo start",
"reset-project": "node ./scripts/reset-project.js",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"test": "jest --watchAll",
"lint": "expo lint"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"@expo/vector-icons": "^14.0.2",
"@react-navigation/bottom-tabs": "^7.2.0",
"@react-navigation/native": "^7.0.14",
"expo": "~52.0.37",
"expo-blur": "~14.0.3",
"expo-constants": "~17.0.7",
"expo-font": "~13.0.4",
"expo-haptics": "~14.0.1",
"expo-linking": "~7.0.5",
"expo-router": "~4.0.17",
"expo-splash-screen": "~0.29.22",
"expo-status-bar": "~2.0.1",
"expo-symbols": "~0.2.2",
"expo-system-ui": "~4.0.8",
"expo-web-browser": "~14.0.2",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-native": "0.76.7",
"react-native-appwrite": "^0.7.0",
"react-native-gesture-handler": "~2.20.2",
"react-native-reanimated": "~3.16.1",
"react-native-safe-area-context": "4.12.0",
"react-native-screens": "~4.4.0",
"react-native-url-polyfill": "^2.0.0",
"react-native-web": "~0.19.13",
"react-native-webview": "13.12.5",
"@react-native-async-storage/async-storage": "1.23.1"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@types/jest": "^29.5.12",
"@types/react": "~18.3.12",
"@types/react-test-renderer": "^18.3.0",
"jest": "^29.2.1",
"jest-expo": "~52.0.5",
"react-test-renderer": "18.3.1",
"typescript": "^5.3.3"
},
"private": true
}
tsconfig.json
+10
View File
@@ -0,0 +1,10 @@
{
"extends": "expo/tsconfig.base",
"compilerOptions": {
"strict": true,
"paths": {
"@/*": ["./*"]
}
},
"include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
}
types/film.ts
+16
View File
@@ -0,0 +1,16 @@
export interface Film {
title: string;
episode_id: number;
opening_crawl: string;
director: string;
producer: string;
release_date: string;
characters: string[];
planets: string[];
starships: string[];
vehicles: string[];
species: string[];
created: string;
edited: string;
url: string;
}
types/person.ts
+18
View File
@@ -0,0 +1,18 @@
export interface Person {
name: string;
height: string;
mass: string;
hair_color: string;
skin_color: string;
eye_color: string;
birth_year: string;
gender: string;
homeworld: string;
films: string[];
species: any[];
vehicles: string[];
starships: string[];
created: string;
edited: string;
url: string;
}