recording.mp4

Interactive Underlay Pattern with Bottom Sheet

This project demonstrates an interactive UI pattern where a main content view (an "article scroll") visually transforms as a bottom sheet slides up from the bottom of the screen. When the bottom sheet is collapsed, the article takes up most of the screen. As the bottom sheet expands, the article view animates, shrinking slightly, gaining rounded corners, and adding a shadow effect, creating the appearance of sliding underneath the bottom sheet area.

This effect is achieved using a combination of popular React Native libraries:

• @gorhom/bottom-sheet: Provides the core draggable bottom sheet component.
• react-native-reanimated: Powers the smooth animations that react to the bottom sheet's position.
• react-native-gesture-handler: Essential for handling touch gestures for both the bottom sheet and the animations, requiring the GestureHandlerRootView at the app's root.

Implementation Overview

1. GestureHandlerRootView: The entire application is wrapped in GestureHandlerRootView in app/index.tsx to enable gesture handling.

2. Bottom Sheet Setup (MyBottomSheet.tsx):

   • A standard @gorhom/bottom-sheet component is set up with desired snap points (e.g., ['10%', '50%']).
   • Crucially, the animatedIndex prop of the BottomSheet component is used. This prop provides a Reanimated SharedValue that represents the current animated position of the sheet, typically interpolating between the indices of the snapPoints array (e.g., 0 for the first snap point, 1 for the second, etc.).

3. Tracking Progress (app/index.tsx):

   • A SharedValue (named progress in the example) is created using useSharedValue(0).
   • This progress shared value is passed directly to the animatedIndex prop of the MyBottomSheet component. Reanimated and Gorhom Bottom Sheet handle the connection internally, so progress automatically updates as the sheet moves.

4. Animating the Article View (app/index.tsx & ArticleView.tsx):

   • An Animated.View (wrapped in the ArticleView component) contains the main scrollable content (ArticleScroll).
   • useAnimatedStyle is used to define styles for the ArticleView that depend on the progress shared value.
   • Inside useAnimatedStyle, the interpolate function from react-native-reanimated maps the progress.value (which changes from 0 to 1 as the sheet moves between the first two snap points) to desired style values:
     • margin, marginTop, marginBottom: Increase as the sheet goes up, shrinking the article view.
     • borderRadius: Increases to round the corners.
     • shadowOffset, shadowOpacity, shadowRadius, elevation (for Android): Increase to create the shadow/depth effect.
   • Extrapolation.CLAMP is used in interpolate to prevent the style values from going beyond the defined output range.

5. Component Structure:

   • app/index.tsx: The main screen, orchestrates the interaction, holds the progress shared value, and defines the animated styles.
   • components/ArticleView.tsx: An Animated.View wrapper that applies the dynamic styles.
   • components/ArticleScroll.tsx: A simple ScrollView to hold the main content. Made reusable by accepting children.
   • components/BottomSheet.tsx: Wraps the @gorhom/bottom-sheet logic. Made reusable by accepting children.
   • components/Content.tsx: Example content displayed within the bottom sheet.
   • components/TriggerButton.tsx: Custom handle for the bottom sheet.

This setup creates a fluid and engaging user experience where the background content reacts dynamically to the foreground bottom sheet's position.