diff --git a/README.md b/README.md
index 9948ab3..fd7a05a 100644
--- a/README.md
+++ b/README.md
@@ -273,30 +273,6 @@ Then let's define and style our guest item component. In `./components/GuestItem
import { Text, StyleSheet, View } from "react-native";
import { colors } from "../styles/constants";
-type Guest = {
- id: string;
- firstName: string;
- lastName: string;
- deadline?: string;
- attending: boolean;
-};
-
-type Props = {
- guest: Guest;
-};
-
-export default function GuestItem({ guest }: Props) {
- const { firstName, lastName, attending } = guest;
- return (
-
-
- {firstName} {lastName}
-
- {attending ? "Coming!" : "Not coming."}
-
- );
-}
-
const styles = StyleSheet.create({
right: {
textAlign: "right",
@@ -326,6 +302,30 @@ const styles = StyleSheet.create({
textAlign: "left",
},
});
+
+type Guest = {
+ id: string;
+ firstName: string;
+ lastName: string;
+ deadline?: string;
+ attending: boolean;
+};
+
+type Props = {
+ guest: Guest;
+};
+
+export default function GuestItem({ guest }: Props) {
+ const { firstName, lastName, attending } = guest;
+ return (
+
+
+ {firstName} {lastName}
+
+ {attending ? "Coming!" : "Not coming."}
+
+ );
+}
```
Still got one more undefined variable issue. Let's get right on it!
@@ -431,6 +431,31 @@ import GuestItem from '../components/GuestItem';
import { Link, useLocalSearchParams } from 'expo-router';
import { useEffect, useState } from 'react';
+const styles = StyleSheet.create({
+ button: {
+ marginTop: 30,
+ paddingTop: 10,
+ paddingBottom: 10,
+ width: '100%',
+ textAlign: 'center',
+ backgroundColor: colors.cardBackground,
+ fontSize: 24,
+ },
+ list: {
+ marginTop: 30,
+ paddingLeft: 30,
+ paddingRight: 30,
+ width: '100%',
+ },
+ container: {
+ flex: 1,
+ backgroundColor: colors.background,
+ },
+ text: {
+ color: colors.text,
+ },
+});
+
type Guest = {
id: string;
firstName: string;
@@ -486,8 +511,11 @@ export default function Index() {
>
);
}
+```
-const styles = StyleSheet.create({
+Add the following button styles:
+
+```typescript
button: {
marginTop: 30,
paddingTop: 10,
@@ -497,25 +525,29 @@ const styles = StyleSheet.create({
backgroundColor: colors.cardBackground,
fontSize: 24,
},
- list: {
- marginTop: 30,
- paddingLeft: 30,
- paddingRight: 30,
- width: '100%',
- },
+```
+
+Next, we'll add `app/new-guest.tsx`:
+
+```typescript
+import { useState } from 'react';
+import { StyleSheet, TextInput } from 'react-native';
+import { colors } from '../styles/constants';
+import { Link } from 'expo-router';
+
+const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.background,
+ alignItems: 'center',
+ justifyContent: 'center',
},
- text: {
- color: colors.text,
+ input: {
+ marginTop: 30,
+ paddingLeft: 30,
+ paddingRight: 30,
+ width: '100%',
},
-});
-```
-
-Add the following button styles:
-
-```typescript
button: {
marginTop: 30,
paddingTop: 10,
@@ -525,15 +557,7 @@ Add the following button styles:
backgroundColor: colors.cardBackground,
fontSize: 24,
},
-```
-
-Next, we'll add `app/new-guest.tsx`:
-
-```typescript
-import { useState } from 'react';
-import { StyleSheet, TextInput } from 'react-native';
-import { colors } from '../styles/constants';
-import { Link } from 'expo-router';
+});
export default function NewGuest() {
const [firstName, onFirstName] = useState('');
@@ -562,29 +586,6 @@ export default function NewGuest() {
);
}
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: colors.background,
- alignItems: 'center',
- justifyContent: 'center',
- },
- input: {
- marginTop: 30,
- paddingLeft: 30,
- paddingRight: 30,
- width: '100%',
- },
- button: {
- marginTop: 30,
- paddingTop: 10,
- paddingBottom: 10,
- width: '100%',
- textAlign: 'center',
- backgroundColor: colors.cardBackground,
- fontSize: 24,
- },
-});
```
Hold on, where'd our font and header go? Let's create `app/_layout.tsx`:
@@ -597,6 +598,19 @@ import { useFonts, Pacifico_400Regular } from '@expo-google-fonts/pacifico';
import { View, StyleSheet } from 'react-native';
import { colors } from '../styles/constants';
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: colors.background,
+ paddingBottom: 40,
+ },
+ slot: {
+ flex: 1,
+ paddingLeft: 30,
+ paddingRight: 30,
+ },
+});
+
function routeMapping(pathname: string) {
switch (pathname) {
case '/':
@@ -628,19 +642,6 @@ export default function HomeLayout() {
);
}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: colors.background,
- paddingBottom: 40,
- },
- slot: {
- flex: 1,
- paddingLeft: 30,
- paddingRight: 30,
- },
-});
```
## 💾 Saving to the API
diff --git a/guest-list-mobile/app/index.tsx b/guest-list-mobile/app/index.tsx
index f4c5939..7cb5cd0 100644
--- a/guest-list-mobile/app/index.tsx
+++ b/guest-list-mobile/app/index.tsx
@@ -60,16 +60,16 @@ export default function Index() {
},
body: JSON.stringify({ firstName, lastName }),
});
- try {
- const newGuest: Guest = await response.json();
- setGuests([...guests, newGuest]);
- } catch {}
+ const newGuest: Guest = await response.json();
+ setGuests([...guests, newGuest]);
}
if (typeof firstName === 'string' && typeof lastName === 'string') {
- postGuest({ id: '0', attending: false, firstName, lastName });
+ postGuest({ id: '0', attending: false, firstName, lastName }).catch(
+ () => {},
+ );
}
loadGuests();
- }, [firstName, lastName]);
+ }, [firstName, lastName]); /* eslint-disable-line*/
return (
<>