refactor: rename details screen

Author: NuclearRedeye

src/screens/details.tsx src/screens/about.tsxsrc/screens/details.tsx renamed to src/screens/about.tsx

@@ -2,22 +2,19 @@ import { useNavigation, useRoute } from '@react-navigation/native';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
 
-export type DetailsScreenProps = {
+export type AboutScreenProps = {
   depth: number;
 };
 
-export function DetailsScreen() {
+export function AboutScreen() {
   const navigation = useNavigation();
   const route = useRoute();
 
-  const { depth } = route.params as DetailsScreenProps;
+  const { depth } = route.params as AboutScreenProps;
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>You are currently {depth} screens deep</Text>
-      <Button onPress={() => navigation.setParams({depth: (depth + 1)})}>Increment Depth</Button>
-      <Button onPress={() => navigation.push('Details', {depth: (depth + 1)})}>Go Deeper</Button>
-      <Button onPress={() => navigation.goBack('Details')}>Go Back</Button>
       <Button onPress={() => navigation.popTo('Home')}>Go Home</Button>
     </View>
   );

src/screens/home.tsx

@@ -1,5 +1,5 @@
 import { useNavigation, useRoute } from '@react-navigation/native';
-import { View, Text } from 'react-native';
+import { View, Text, StyleSheet } from 'react-native';
 import { Button } from '@react-navigation/elements';
 
 export type HomeScreenProps = {
@@ -13,9 +13,21 @@ export function HomeScreen() {
   const { message } = route.params as HomeScreenProps;
 
   return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+    <View style={styles.container}>
       <Text>{message}</Text>
-      <Button onPress={() => navigation.push('Details')}>Go to Details</Button>
+      <Button style={styles.bottom} onPress={() => navigation.push('About')}>Go to Details</Button>
     </View>
   );
-}
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  bottom: {
+    alignSelf: 'flex-end',
+  }
+});