feat: added animated header

babel.config.js

@@ -5,6 +5,7 @@ module.exports = function (api) {
     presets: ['babel-preset-expo'],
     plugins: [
       'nativewind/babel',
+      'react-native-reanimated/plugin',
       [
         'module-resolver',
         {

package.json

@@ -31,11 +31,12 @@
     "nativewind": "^2.0.11",
     "react": "18.2.0",
     "react-native": "0.72.6",
+    "react-native-reanimated": "~3.3.0",
     "react-native-render-html": "^6.3.4",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
-    "react-native-svg": "^14.1.0",
-    "react-native-webview": "^13.6.4",
+    "react-native-svg": "13.9.0",
+    "react-native-webview": "13.2.2",
     "wretch": "^2.8.0"
   },
   "devDependencies": {

src/components/HtmlToNativeViewer.tsx

@@ -1,7 +1,7 @@
 import IframeRenderer, { iframeModel } from '@native-html/iframe-plugin';
 import colors from '@theme/colors';
 import { width } from '@utils/helpers';
-import { observer } from 'mobx-react-lite';
+import { memo } from 'react';
 import { StyleSheet } from 'react-native';
 import RenderHtml from 'react-native-render-html';
 import { WebView } from 'react-native-webview';
@@ -90,4 +90,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default observer(HtmlToNativeViewer);
+export default memo(HtmlToNativeViewer);

src/components/PostDetail/PostDetailHeader.tsx

@@ -36,7 +36,7 @@ const PostDetailHeader = ({
 
 const styles = StyleSheet.create({
   header: {
-    height: width * 0.6,
+    height: width * 0.9,
   },
 });
 

src/screens/Blog/PostDetailScreen.tsx

@@ -6,31 +6,58 @@ import savedStore from '@store/SavedStore';
 import { text } from '@theme/text';
 import { width } from '@utils/helpers';
 import { observer } from 'mobx-react-lite';
-import { SafeAreaView, ScrollView, Text, View } from 'react-native';
+import { Text, View } from 'react-native';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedScrollHandler,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const HEADER_HEIGHT = width * 0.6;
-const CONTENT_MARGIN_TOP = HEADER_HEIGHT * 0.5;
+const CONTENT_MARGIN_TOP = HEADER_HEIGHT * 0.9;
 
 const PostDetailScreen = () => {
   const {
     params: { post },
   } = useRoute<RouteProp<BlogStackNavigatorParamList, 'PostDetail'>>();
   const { goBack } = useNavigation();
   const { top } = useSafeAreaInsets();
+  const scrollY = useSharedValue(0);
+  const scrollableContentMarginTop = CONTENT_MARGIN_TOP + top;
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    marginTop: interpolate(
+      scrollY.value,
+      [0, 200],
+      [scrollableContentMarginTop, top + 48],
+      Extrapolation.CLAMP,
+    ),
+  }));
+
+  const scrollHandler = useAnimatedScrollHandler(event => {
+    scrollY.value = event.contentOffset.y;
+  });
+
   const onPressSave = () => post && savedStore.addPost(post);
 
   return (
-    <SafeAreaView className="bg-zinc-50 flex-1">
+    <View className="bg-zinc-50 flex-1">
       <PostDetailHeader
         topMargin={top}
         onPressBack={goBack}
         onPressSave={onPressSave}
         headerImage={post?.headerImage}
         isSavedPost={savedStore.isSavedPost(post.id)}
       />
-      <ScrollView className="rounded-md bg-zinc-50" style={{ marginTop: CONTENT_MARGIN_TOP + top }}>
-        <View className="px-5 pb-8">
+      <Animated.ScrollView
+        scrollEventThrottle={16}
+        onScroll={scrollHandler}
+        className="rounded-md bg-zinc-50"
+        style={[{ marginTop: scrollableContentMarginTop }, animatedStyle]}>
+        <View renderToHardwareTextureAndroid className="px-5 pb-8">
           <Text className={text({ type: 'subhead', class: 'text-zinc-500 mt-4 mb-1' })}>
             {post?.category}
           </Text>
@@ -39,8 +66,8 @@ const PostDetailScreen = () => {
           </Text>
           <HtmlToNativeViewer html={post?.content} />
         </View>
-      </ScrollView>
-    </SafeAreaView>
+      </Animated.ScrollView>
+    </View>
   );
 };
 

src/store/PostStore.ts

@@ -23,7 +23,7 @@ export const Post = t
       const media = yield api.getMediaByUrl(self.mediaUrl);
 
       self.image = media?.media_details?.sizes?.medium?.source_url || media?.guid?.rendered;
-      self.headerImage = media?.guid?.rendered;
+      self.headerImage = media?.media_details?.sizes?.large?.source_url || media?.guid?.rendered;
       self.imageLoaded = true;
     }),