made reaction button sticky, still need correct icon

calblueprint · Apr 22, 2024 · 8d6a6a7 · 8d6a6a7
1 parent 09cf9ec
commit 8d6a6a7
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 86 deletions.
diff --git a/src/app/(tabs)/story/index.tsx b/src/app/(tabs)/story/index.tsx
@@ -77,93 +77,95 @@ function StoryScreen() {
       {isLoading ? (
         <ActivityIndicator />
       ) : (
-        <ScrollView
-          bounces
-          ref={scrollRef}
-          showsVerticalScrollIndicator={false}
-        >
-          <View style={styles.container}>
-            {story?.featured_media ? (
-              <Image
-                style={styles.image}
-                source={{ uri: story.featured_media }}
-              />
-            ) : (
-              <Text>No image available</Text>
-            )}
-          </View>
-
-          <Text style={styles.title}>{story?.title}</Text>
-
-          <AuthorImage
-            author_name={story.author_name}
-            author_Uri={story.author_image}
-            author_id={story.author_id.toString()}
-          />
-
-          <View>
-            <FlatList
-              style={styles.genres}
-              horizontal
-              data={story.genre_medium}
-              keyExtractor={(item, index) => index.toString()} // Add a key extractor for performance optimization
-              renderItem={({ item, index }) => (
-                <View
-                  style={[
-                    styles.genresBorder,
-                    {
-                      backgroundColor: index % 2 === 0 ? '#E66E3F' : '#B49BC6',
-                    },
-                  ]}
-                >
-                  <Text style={styles.genresText}>{item}</Text>
-                </View>
+        <View>
+          <ScrollView
+            bounces
+            ref={scrollRef}
+            showsVerticalScrollIndicator={false}
+          >
+            <View style={styles.container}>
+              {story?.featured_media ? (
+                <Image
+                  style={styles.image}
+                  source={{ uri: story.featured_media }}
+                />
+              ) : (
+                <Text>No image available</Text>
               )}
+            </View>
+
+            <Text style={styles.title}>{story?.title}</Text>
+
+            <AuthorImage
+              author_name={story.author_name}
+              author_Uri={story.author_image}
+              author_id={story.author_id.toString()}
+            />
+
+            <View>
+              <FlatList
+                style={styles.genres}
+                horizontal
+                data={story.genre_medium}
+                keyExtractor={(item, index) => index.toString()} // Add a key extractor for performance optimization
+                renderItem={({ item, index }) => (
+                  <View
+                    style={[
+                      styles.genresBorder,
+                      {
+                        backgroundColor:
+                          index % 2 === 0 ? '#E66E3F' : '#B49BC6',
+                      },
+                    ]}
+                  >
+                    <Text style={styles.genresText}>{item}</Text>
+                  </View>
+                )}
+              />
+
+              <View style={styles.button_style}>
+                <Icon type="share_outline" />
+                <Text style={styles.shareButtonText}>Share Story</Text>
+              </View>
+            </View>
+
+            <RenderHTML
+              source={{ html: modifiedExcerpt }}
+              baseStyle={globalStyles.h2}
+              tagsStyles={{ p: globalStyles.h2 }}
+              ignoredStyles={['color', 'fontSize', 'fontWeight']} // Ignore these inline styles
             />
 
+            <RenderHTML source={story.content} baseStyle={styles.story} />
+
             <View style={styles.button_style}>
               <Icon type="share_outline" />
               <Text style={styles.shareButtonText}>Share Story</Text>
             </View>
-          </View>
-
-          <RenderHTML
-            source={{ html: modifiedExcerpt }}
-            baseStyle={globalStyles.h2}
-            tagsStyles={{ p: globalStyles.h2 }}
-            ignoredStyles={['color', 'fontSize', 'fontWeight']} // Ignore these inline styles
-          />
-
-          <RenderHTML source={story.content} baseStyle={styles.story} />
+            <Text style={styles.authorProcess}>Author's Process</Text>
 
-          <View style={styles.button_style}>
-            <Icon type="share_outline" />
-            <Text style={styles.shareButtonText}>Share Story</Text>
-          </View>
-          <Text style={styles.authorProcess}>Author's Process</Text>
+            <RenderHTML source={story.process} baseStyle={styles.process} />
 
-          <RenderHTML source={story.process} baseStyle={styles.process} />
+            <View style={styles.author}>
+              <Image
+                style={styles.authorImage}
+                source={{ uri: story.author_image }}
+              />
+              <Text style={styles.authorText}>By {story.author_name}</Text>
+            </View>
 
-          <View style={styles.author}>
-            <Image
-              style={styles.authorImage}
-              source={{ uri: story.author_image }}
-            />
-            <Text style={styles.authorText}>By {story.author_name}</Text>
-          </View>
-
-          <Button
-            textColor="black"
-            icon="arrow-up"
-            onPress={scrollUp}
-            style={{ width: 125, marginBottom: 16, borderRadius: 10 }}
-          >
-            <Text style={styles.backToTopButtonText}>Back To Top</Text>
-          </Button>
-          <View style={styles.bottomReactionContainer}>
-            <ReactionPicker />
-          </View>
-        </ScrollView>
+            <Button
+              textColor="black"
+              icon="arrow-up"
+              onPress={scrollUp}
+              style={{ width: 125, marginBottom: 16, borderRadius: 10 }}
+            >
+              <Text style={styles.backToTopButtonText}>Back To Top</Text>
+            </Button>
+            <View style={styles.bottomReactionContainer} />
+          </ScrollView>
+          <ReactionPicker />
+        </View>
       )}
     </SafeAreaView>
   );

diff --git a/src/app/(tabs)/story/styles.ts b/src/app/(tabs)/story/styles.ts
@@ -92,26 +92,27 @@ const styles = StyleSheet.create({
   authorProcess: {
     fontFamily: 'Manrope-Regular',
     fontSize: 20,
-    fontWeight: '900',
+    fontWeight: 'bold',
     textAlign: 'left',
     color: 'black',
     marginBottom: 5,
     marginTop: 10,
   },
   process: {
     fontFamily: 'Manrope-Regular',
-    fontSize: 12,
+    fontSize: 16,
     fontWeight: '400',
     textAlign: 'left',
     color: 'black',
     marginBottom: 16,
   },
   backToTopButtonText: {
     fontFamily: 'Manrope-Regular',
-    fontSize: 12,
+    fontSize: 15,
     fontWeight: '800',
     textAlign: 'left',
     color: 'black',
+    textDecorationLine: 'underline',
   },
   bottomReactionContainer: {
     flex: 1,

diff --git a/src/components/ReactionPicker/styles.ts b/src/components/ReactionPicker/styles.ts
@@ -5,24 +5,38 @@ import colors from '../../styles/colors';
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'flex-end',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'pink',
   },
   reactionView: {
+    flexDirection: 'row',
+    position: 'absolute',
     backgroundColor: '#D9D9D9',
+    display: 'flex',
     borderRadius: 20,
-    padding: 10,
-    alignSelf: 'center',
-    marginBottom: 10,
+    height: 40,
+    padding: 13,
+    alignSelf: 'flex-start',
   },
   reactionsContainer: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
+    position: 'absolute',
     padding: 10,
-    position: 'absolute', // Positioning the container above the toggle button
     bottom: 50,
     backgroundColor: '#D9D9D9',
     borderRadius: 20,
   },
+  icon_container: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    paddingBottom: 50,
+  },
+  font: {
+    color: 'white',
+    fontSize: 40,
+  },
 });
 
 export default styles;