Fetch story details

src/screens/Home.screen.tsx

@@ -17,7 +17,6 @@ const STORIES_QUERY = gql`
     stories {
       id
       title
-      author
       summary
     }
   }
@@ -52,7 +51,13 @@ export const HomeScreen: React.FC = () => {
       keyExtractor={item => item.id}
       ItemSeparatorComponent={() => <View style={styles.separator} />}
       renderItem={({ item }) => (
-        <Pressable onPress={() => navigation.navigate('StoryDetailsModal')}>
+        <Pressable
+          onPress={() =>
+            navigation.navigate('StoryDetailsModal', {
+              id: item.id,
+              title: item.title,
+            })
+          }>
           <Text style={styles.title}>{item.title}</Text>
           <Text style={styles.summary}>{item.summary}</Text>
         </Pressable>

src/screens/Root.navigator.tsx

@@ -17,7 +17,10 @@ export const RootNavigator: React.FC = () => {
       <RootStack.Screen
         name="StoryDetailsModal"
         component={StoryDetailsModal}
-        options={{ presentation: 'modal' }}
+        options={({ route }) => ({
+          presentation: 'modal',
+          title: route.params.title,
+        })}
       />
     </RootStack.Navigator>
   );

src/screens/StoryDetailsModal.screen.tsx

@@ -1,11 +1,56 @@
 import * as React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ActivityIndicator,
+  ScrollView,
+} from 'react-native';
+import { useRoute, RouteProp } from '@react-navigation/core';
+import { RootStackParamList } from '../types';
+import { useQuery, gql } from 'urql';
+
+const STORY_BY_ID = gql`
+  query StoryById($id: ID!) {
+    story(id: $id) {
+      id
+      title
+      author
+      summary
+      text
+    }
+  }
+`;
 
 export const StoryDetailsModal: React.FC = () => {
+  const route = useRoute<RouteProp<RootStackParamList, 'StoryDetailsModal'>>();
+  const [{ data, fetching, error }] = useQuery({
+    query: STORY_BY_ID,
+    variables: { id: route.params.id },
+  });
+
+  if (fetching) {
+    return (
+      <View style={styles.container}>
+        <ActivityIndicator color="grey" />
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={styles.container}>
+        <Text>Something went wrong {error.message}</Text>
+      </View>
+    );
+  }
+
   return (
-    <View style={styles.container}>
-      <Text>Story Details</Text>
-    </View>
+    <ScrollView style={styles.scrollView}>
+      <Text style={styles.author}>by {data.story.author}</Text>
+      <Text style={styles.summary}>{data.story.summary}</Text>
+      <Text style={styles.text}>{data.story.text}</Text>
+    </ScrollView>
   );
 };
 
@@ -15,4 +60,24 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     flex: 1,
   },
+  scrollView: {
+    padding: 20,
+  },
+  author: {
+    fontStyle: 'italic',
+    fontSize: 16,
+    color: 'grey',
+    marginBottom: 20,
+  },
+  summary: {
+    fontSize: 16,
+    marginBottom: 20,
+    lineHeight: 25,
+    textAlign: 'justify',
+  },
+  text: {
+    fontSize: 16,
+    lineHeight: 25,
+    textAlign: 'justify',
+  },
 });

src/types.ts

@@ -7,5 +7,5 @@ export type BottomTabParamList = {
 
 export type RootStackParamList = {
   BottomTabs: NavigatorScreenParams<BottomTabParamList>;
-  StoryDetailsModal: undefined;
+  StoryDetailsModal: { id: string; title: string };
 };