In modern mobile UI, creating dynamic and responsive layouts is key to a great user experience. Static screens can feel rigid, but layouts that respond to user input make an app feel alive and intuitive. Today, we'll dive deep into building a complex, interactive UI: a resizable split-screen view in React Native. This component features a draggable divider that allows users to resize two content panes. As the panes resize, the content within them intelligently animates to fit the available space. We'll also add some delightful micro-interactions. We'll be using the powerhouse combination of **React Native Reanimated** for smooth, performant animations and **React Native Gesture Handler** for fluid gesture control. ![Twitter Video Download.png](https://framerusercontent.com/images/yVlg8gH3tZI3sWvlsJWplVDuoU.png?width=1878&height=1472) ## Why Micro-animations Matter Before we jump into the code, let's briefly touch on *why* we're putting so much effort into these animations. Micro-animations are small, functional animations that serve a purpose. They: - **Provide Feedback:** Instantly confirm a user's action, like tapping a button or completing a task. - **Guide the User:** Direct attention and create a clear sense of spatial awareness within the app. - **Add Polish:** Elevate the user experience from merely functional to truly delightful, making the app feel more polished and professional. In our component, the spring-based snapping of the divider, the fading of the cards ***BUT***, there is always a but, these micro animations are great when you have a polished UI. Users can not feel or taste the micro animations if you do not have polished, consistent UI. Micro animations are great when you combine it with polished UI. ## Section 1: Setting Up the Layout and State First, let's lay the foundation. Our screen is divided into a **top section** and a **bottom section**. The height of the top section will be dynamic to update content based on dragging, controlled by a shared value from Reanimated. A **shared value** is a special type of variable that can be modified from the JavaScript thread and read on the UI thread without causing performance-killing re-renders. This is the secret sauce for smooth animations in Reanimated. We define some constants for our layout heights and animation physics. **Dos and Don'ts:** - **Do:** Use constants for layout values (**HEADER_HEIGHT**, **MIN_SECTION_HEIGHT**, etc.). This makes your code cleaner, easier to read, and much simpler to update later. - **Don't:** Hardcode magic numbers directly in your styles. ```tsx import Animated, { useSharedValue, useAnimatedStyle, withSpring, } from 'react-native-reanimated'; import { Dimensions, StyleSheet, View } from 'react-native'; // Screen and layout constants const { height: SCREEN_HEIGHT } = Dimensions.get('window'); const HEADER_HEIGHT = 60; const MIN_SECTION_HEIGHT = 100; const MAX_TOP_SECTION_HEIGHT = SCREEN_HEIGHT * 0.7; const DEFAULT_TOP_SECTION_HEIGHT = SCREEN_HEIGHT * 0.45; // Main Component Setup export default function ResizableSplitView() { // This shared value will drive our animations const topSectionHeight = useSharedValue(DEFAULT_TOP_SECTION_HEIGHT); // Animated styles for the top and bottom sections const topSectionAnimatedStyle = useAnimatedStyle(() => ({ height: topSectionHeight.value, })); const bottomSectionAnimatedStyle = useAnimatedStyle(() => ({ // The bottom section's height is derived from the top's height: SCREEN_HEIGHT - HEADER_HEIGHT - topSectionHeight.value - 100, })); return ( {/* ... Header ... */} {/* Top content*/} {/* ... Drag Handle ... */} {/* Bottom content*/} ); } ``` ![image.png](https://framerusercontent.com/images/jWDr4u6KohZOYeNUAZ22kaJzx0M.gif?width=1920&height=1080) ### Section 2: Making it Draggable with Gesture Handler Now for the core interaction: dragging the divider to update section heights. We use `Gesture.Pan()` from React Native Gesture Handler to capture the user's finger movement. The logic is broken into three parts: 1. `onStart`: When the user first touches the handle, we record the starting height of the top pane. 2. `onUpdate`: As the user drags, we calculate the new height by adding the translation distance to the starting height. We also "clamp" this value to ensure the user can't drag it beyond our defined `MIN_SECTION_HEIGHT` and `MAX_TOP_SECTION_HEIGHT`. 3. `onEnd`: This is where the magic happens. When the user lifts their finger, we want the pane to snap to one of **three predefined position**s (minimized, default, or maximized). - If the user "flicked" the handle (high velocity), we snap to the next logical position in the direction of the flick. - If it was a slow drag, we find the closest snap point and animate to it. We use **`withSpring()**` to drive the final animation, giving it a natural, physical feel. ```tsx // imports and constants import { Gesture, GestureDetector } from 'react-native-gesture-handler'; // Animation configuration const ANIMATION_CONFIG = { damping: 25, stiffness: 300, mass: 0.8, overshootClamping: false, restDisplacementThreshold: 0.01, restSpeedThreshold: 0.01, }; // Gesture constants const VELOCITY_THRESHOLD = 800; const HEIGHT_THRESHOLD = 50; // ResizableSplitView component const startY = useSharedValue(0); const panGesture = Gesture.Pan() .onStart(() => { startY.value = topSectionHeight.value; }) .onUpdate((event) => { let newHeight = startY.value + event.translationY; // Clamp the height between min and max values topSectionHeight.value = Math.max( MIN_SECTION_HEIGHT, Math.min(newHeight, MAX_TOP_SECTION_HEIGHT) ); }) .onEnd((event) => { // Snap-to-point logic based on velocity and position const velocity = event.velocityY; let targetHeight; if (Math.abs(velocity) > VELOCITY_THRESHOLD) { // High velocity flick targetHeight = velocity > 0 ? DEFAULT_TOP_SECTION_HEIGHT : MAX_TOP_SECTION_HEIGHT; } else { // Low velocity drag, snap to nearest const distanceToMin = Math.abs(topSectionHeight.value - MIN_SECTION_HEIGHT); const distanceToDefault = Math.abs(topSectionHeight.value - DEFAULT_TOP_SECTION_HEIGHT); const distanceToMax = Math.abs(topSectionHeight.value - MAX_TOP_SECTION_HEIGHT); if (distanceToMin < distanceToDefault && distanceToMin < distanceToMax) { targetHeight = MIN_SECTION_HEIGHT; } else if (distanceToDefault < distanceToMax) { targetHeight = DEFAULT_TOP_SECTION_HEIGHT; } else { targetHeight = MAX_TOP_SECTION_HEIGHT; } } isDragging.value = false; // Animate to the target height with a spring effect topSectionHeight.value = withSpring(targetHeight, ANIMATION_CONFIG); }); return ( {/* Top content */} {/* ... Drag Handle ... */} {/* Bottom content */} ); ``` ![splits.png](https://framerusercontent.com/images/aIKSZcntugFfg5jkUAn49vwGcuU.gif?width=1920&height=1080) Let's add one more delightful detail. When you start to drag the **drag handle**, it smoothly scales up a little. This small animation acts as a visual confirmation, giving the interaction a tangible, real-world feel. It's a subtle cue that the app is responding to your touch with haptic. To achieve this, we'll rely on `useSharedValue` and `useAnimatedStyle`. We create a shared value, `isDragging`, which we set to true inside the gesture's `onStart` event and back to false on `onEnd`. This boolean then drives the scale animation, making the handle grow and shrink at just the right moments. ```tsx // We need to keep the state of the user action const isDragging = useSharedValue(false); const dragIndicatorAnimatedStyle = useAnimatedStyle(() => ({ transform: [ { // if it is dragging, then make it scalled with withSpring. scale: withSpring(!isDragging.value ? 1 : 1.1, ANIMATION_CONFIG), }, ], })); ``` ![drag-handler.png](https://framerusercontent.com/images/1J193YN4yoPQGTn2BwdjycZsiic.gif?width=1920&height=1080) ## Section 3: Animating Content with interpolate A resizable view isn't very useful if the content inside it doesn't adapt. We'll create two states for our top pane: a compact summary view when it's minimized, and an expanded grid of notes when it's larger. We achieve this by using the interpolate function from Reanimated. interpolate maps a shared value from one range of numbers to another. Here, we map the `topSectionHeight` to style properties like opacity, scale, and translateY. - **Compact View:** As the height approaches `MIN_SECTION_HEIGHT`, we fade in the compact card and fade out the expanded grid. - **Expanded View:** As the height moves away from `MIN_SECTION_HEIGHT`, we do the opposite. **Dos and Don'ts:** - **Do:** Use interpolate to create complex, synchronized animations based on a single driver value (like a gesture or scroll position). It's incredibly powerful and performant. - **Do:** Use the 'clamp' option with interpolate to prevent the output values from exceeding the specified range, which avoids unexpected visual glitches. ```tsx const compactCardsAnimatedStyle = useAnimatedStyle(() => { const opacity = interpolate( topSectionHeight.value, [MIN_SECTION_HEIGHT, MIN_SECTION_HEIGHT + 100], [1, 0], // Fade out as the pane gets bigger 'clamp' ); // ... other properties like scale and translateY return { opacity: withSpring(opacity), /* ... */ }; }); // Animation for the expanded grid (visible when pane is large) const expandedCardsAnimatedStyle = useAnimatedStyle(() => { const opacity = interpolate( topSectionHeight.value, [MIN_SECTION_HEIGHT + 50, MIN_SECTION_HEIGHT + 150], [0, 1], // Fade in as the pane gets bigger 'clamp' ); // ... other properties like scale and translateY return { opacity: withSpring(opacity), /* ... */ }; }); // ... in the top section ... Hello , you have 10 tasks to do today. {/* ScrollView with NoteCard grid */} ``` ![top-section-wrapper.png](https://framerusercontent.com/images/1J193YN4yoPQGTn2BwdjycZsiic.gif?width=1920&height=1080) ## Conclusion We've successfully built a complex, interactive, and beautiful component from the ground up. Keep things consistent, clean and reusable. Always pay attention design before micro animations. If you do not have polished UI, micro animations does not cover it. Great micro animations come with polished UI. **Don't forget the details:** Small, polished micro-animations can elevate your app from good to great. [Here is the full code,](https://www.reactnativecomponents.com/components/screen-views/resizable-split-view)

Articles

Building an Interactive Resizable Split View in React Native