Make option bar sticky

assets/icons.tsx

@@ -23,7 +23,7 @@ export type IconType =
 
 const IconSvgs: Record<IconType, React.ReactElement> = {
   home_outline: <Ionicons name="home-outline" size={23} />,
-  share_outline: <Ionicons name="share-outline" size={23} color="white" />,
+  share_outline: <Ionicons name="share-outline" size={23} color="gray" />,
   search_outline: <Ionicons name="search-outline" size={23} />,
   document_outline: <Ionicons name="document-outline" size={23} />,
   settings_gear: <Ionicons name="settings-outline" size={32} />,

src/app/(tabs)/story/index.tsx

@@ -5,7 +5,6 @@ import {
   ActivityIndicator,
   FlatList,
   ScrollView,
-  Share,
   Text,
   View,
   useWindowDimensions,
@@ -18,14 +17,13 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import styles from './styles';
 import Icon from '../../../../assets/icons';
 import AuthorImage from '../../../components/AuthorImage/AuthorImage';
-import FavoriteStoryButton from '../../../components/FavoriteStoryButton/FavoriteStoryButton';
-import SaveStoryButton from '../../../components/SaveStoryButton/SaveStoryButton';
 import ReactionPicker from '../../../components/ReactionPicker/ReactionPicker';
 import { fetchStory } from '../../../queries/stories';
 import { Story } from '../../../queries/types';
 import globalStyles, { fonts } from '../../../styles/globalStyles';
 import BackButton from '../../../components/BackButton/BackButton';
-import colors from '../../../styles/colors';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import OptionBar from '../../../components/OptionBar/OptionBar';
 
 function StoryScreen() {
   const [isLoading, setLoading] = useState(true);
@@ -51,38 +49,20 @@ function StoryScreen() {
     });
   }, [storyId]);
 
-  const onShare = async () => {
-    try {
-      const result = await Share.share({
-        message: `Check out this story from Girls Write Now!!!\n${story.link}/`,
-      });
-      if (result.action === Share.sharedAction) {
-        if (result.activityType) {
-          // shared with activity type of result.activityType
-        } else {
-          // shared
-        }
-      } else if (result.action === Share.dismissedAction) {
-        // dismissed
-      }
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
   return (
     <SafeAreaView style={[globalStyles.tabBarContainer, styles.container]}>
       {isLoading ? (
         <ActivityIndicator />
       ) : (
         <View>
           <ScrollView
+            stickyHeaderIndices={[5]}
             bounces
             ref={scrollRef}
             showsVerticalScrollIndicator={false}
           >
             <BackButton pressFunction={() => router.back()} />
-            <View >
+            <View style={styles.container}>
               {story?.featured_media ? (
                 <Image
                   style={styles.image}
@@ -93,7 +73,7 @@ function StoryScreen() {
               )}
             </View>
 
-            <Text style={styles.title}>{story?.title}</Text>
+            <Text style={[globalStyles.h1, styles.title]}>{story?.title}</Text>
 
             <AuthorImage
               author_name={story.author_name}
@@ -122,11 +102,8 @@ function StoryScreen() {
                 )}
               />
 
-              <View style={styles.button_style}>
-                <Icon type="share_outline" />
-                <Text style={styles.shareButtonText}>Share Story</Text>
-              </View>
             </View>
+            <OptionBar story={story} storyId={parseInt(storyId as string, 10)} />
 
             <RenderHTML
               source={{ html: `"${cheerio.load(story.excerpt.html ?? "").text()}"` }}
@@ -137,17 +114,26 @@ function StoryScreen() {
               ignoredStyles={['color', 'fontSize', 'fontWeight']} // Ignore these inline styles
             />
 
-            <RenderHTML systemFonts={fonts} source={story.content} contentWidth={width}
+            <View style={{ marginTop: 32 }} />
+
+            <RenderHTML
+              systemFonts={fonts}
+              source={story.content}
+              contentWidth={width}
               baseStyle={styles.story} />
 
-            <View style={styles.button_style}>
+            <TouchableOpacity>
               <Icon type="share_outline" />
-              <Text style={styles.shareButtonText}>Share Story</Text>
-            </View>
+            </TouchableOpacity>
+
             <Text style={styles.authorProcess}>Author's Process</Text>
 
-            <RenderHTML systemFonts={fonts} source={story.process} contentWidth={width}
-              baseStyle={styles.process} />
+            <RenderHTML
+              systemFonts={fonts}
+              source={story.process}
+              contentWidth={width}
+              baseStyle={styles.process}
+            />
 
             <View style={styles.author}>
               <Image
@@ -163,23 +149,9 @@ function StoryScreen() {
                 By {story.author_name}
               </Text>
             </View>
-            <View style={styles.options}>
-              <SaveStoryButton storyId={parseInt(storyId as string, 10)} />
-              <FavoriteStoryButton storyId={parseInt(storyId as string, 10)} />
-              <Button
-                textColor="black"
-                buttonColor={colors.gwnOrange}
-                icon="share"
-                onPress={onShare}
-                style={{ width: 125, marginBottom: 16, borderRadius: 10 }}
-              >
-                <Text
-                  style={[globalStyles.bodyUnderline, styles.shareButtonText]}
-                >
-                  Share Story
-                </Text>
-              </Button>
-            </View>
+
+            <OptionBar story={story} storyId={parseInt(storyId as string, 10)} />
+
             <Button
               textColor="black"
               icon="arrow-up"
@@ -190,7 +162,6 @@ function StoryScreen() {
             </Button>
             <View style={styles.bottomReactionContainer} />
           </ScrollView>
-          <ReactionPicker storyId={parseInt(storyId as string, 10)} />
         </View>
       )}
     </SafeAreaView>

src/app/(tabs)/story/styles.ts

@@ -38,6 +38,7 @@ const styles = StyleSheet.create({
   },
   genresBorder: {
     backgroundColor: '#D9D9D9',
+    padding: 10,
     paddingTop: 5,
     paddingBottom: 5,
     paddingLeft: 10,
@@ -48,13 +49,11 @@ const styles = StyleSheet.create({
   genresText: {
     fontFamily: 'Manrope-Regular',
     fontSize: 12,
-    fontWeight: '400',
     color: 'white',
   },
   shareButtonText: {
     fontFamily: 'Manrope-Regular',
     fontSize: 14,
-    fontWeight: '400',
     color: 'white',
     marginLeft: -5,
     textDecorationLine: 'underline',
@@ -68,15 +67,13 @@ const styles = StyleSheet.create({
   story: {
     fontFamily: 'Manrope-Regular',
     fontSize: 16,
-    fontWeight: '400',
     textAlign: 'left',
     color: 'black',
     marginBottom: 16,
   },
   authorProcess: {
-    fontFamily: 'Manrope-Regular',
+    fontFamily: 'Manrope-Bold',
     fontSize: 20,
-    fontWeight: 'bold',
     textAlign: 'left',
     color: 'black',
     marginBottom: 5,
@@ -85,20 +82,13 @@ const styles = StyleSheet.create({
   process: {
     fontFamily: 'Manrope-Regular',
     fontSize: 16,
-    fontWeight: '400',
     textAlign: 'left',
     color: 'black',
     marginBottom: 16,
   },
-  options: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-  },
   backToTopButtonText: {
-    fontFamily: 'Manrope-Regular',
+    fontFamily: 'Manrope-Bold',
     fontSize: 15,
-    fontWeight: '800',
     textAlign: 'left',
     color: 'black',
     textDecorationLine: 'underline',

src/components/AuthorImage/AuthorImage.tsx

@@ -1,13 +1,13 @@
 import { router } from 'expo-router';
 import {
-  GestureResponderEvent,
   Text,
   TouchableOpacity,
   View,
-  Image,
 } from 'react-native';
+import { Image } from 'expo-image';
 
 import styles from './styles';
+import globalStyles from '../../styles/globalStyles';
 
 type AuthorImageProps = {
   author_name: string;
@@ -31,7 +31,7 @@ function AuthorImage({
       }}
     >
       <View style={styles.author_container}>
-        <Text style={styles.author_text}>Authors:</Text>
+        <Text style={globalStyles.body1Bold}>Authors:</Text>
         <View style={styles.author}>
           <Image
             style={styles.author_image}

src/components/FavoriteStoryButton/FavoriteStoryButton.tsx

@@ -18,7 +18,7 @@ export default function FavoriteStoryButton({
   storyId,
 }: FavoriteStoryButtonProps) {
   const { user } = useSession();
-  const { publish } = usePubSub();
+  const { channels, publish } = usePubSub();
   const [storyIsFavorited, setStoryIsFavorited] = useState(false);
 
   useEffect(() => {
@@ -34,6 +34,15 @@ export default function FavoriteStoryButton({
     });
   }, [storyId]);
 
+  useEffect(() => {
+    const value = channels[Channel.FAVORITES][storyId];
+    if (value == undefined) {
+      return;
+    }
+
+    setStoryIsFavorited(value);
+  }, [channels[Channel.FAVORITES][storyId]])
+
   const favoriteStory = async (favorited: boolean) => {
     setStoryIsFavorited(favorited);
 

src/components/OptionBar/OptionBar.tsx

@@ -0,0 +1,52 @@
+import { Share } from 'react-native';
+import Icon from '../../../assets/icons';
+import { View } from "react-native";
+import ReactionPicker from "../ReactionPicker/ReactionPicker";
+import SaveStoryButton from "../SaveStoryButton/SaveStoryButton";
+import FavoriteStoryButton from "../FavoriteStoryButton/FavoriteStoryButton";
+import { TouchableOpacity } from "react-native-gesture-handler";
+import styles from "./styles";
+import { Story } from '../../queries/types';
+
+type OptionBarProps = {
+  storyId: number
+  story: Story
+}
+
+function OptionBar({ storyId, story }: OptionBarProps) {
+  const onShare = async () => {
+    try {
+      const result = await Share.share({
+        message: `Check out this story from Girls Write Now! \n${story.link}/`,
+      });
+      if (result.action === Share.sharedAction) {
+        if (result.activityType) {
+          // shared with activity type of result.activityType
+        } else {
+          // shared
+        }
+      } else if (result.action === Share.dismissedAction) {
+        // dismissed
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <View style={styles.options}>
+      <ReactionPicker storyId={storyId} />
+
+      <View style={styles.right}>
+        <SaveStoryButton storyId={storyId} />
+        <FavoriteStoryButton storyId={storyId} />
+        <TouchableOpacity onPress={onShare}>
+          <Icon type="share_outline" />
+        </TouchableOpacity>
+      </View>
+    </View>
+
+  )
+}
+
+export default OptionBar;

src/components/OptionBar/styles.ts

@@ -0,0 +1,20 @@
+
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  options: {
+    backgroundColor: 'white',
+    paddingTop: 16,
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingBottom: 22,
+  },
+  right: {
+    alignSelf: 'flex-end',
+    gap: 8,
+    flexDirection: 'row',
+  }
+});
+
+export default styles;

src/components/ReactionPicker/ReactionPicker.tsx

@@ -68,7 +68,7 @@ const ReactionPicker = ({ storyId }: ReactionPickerProps) => {
                 key={i}
                 onPress={() => handleReactionPress(reaction)}
               >
-                <Emoji name={reaction} />
+                <Emoji style={{ fontSize: 15 }} name={reaction} />
               </TouchableOpacity>
             ))}
           </>

src/components/ReactionPicker/styles.ts

@@ -12,15 +12,15 @@ const styles = StyleSheet.create({
     borderRadius: 20,
     padding: 10,
     alignSelf: 'center',
-    marginBottom: 10,
   },
   reactionsContainer: {
+    flex: 1,
     flexDirection: 'row',
     gap: 5,
     justifyContent: 'space-between',
     padding: 10,
     position: 'absolute', // Positioning the container above the toggle button
-    bottom: 50,
+    bottom: -2,
     backgroundColor: '#D9D9D9',
     borderRadius: 20,
   },