Creating a simple Animated Scroll List in React Native

Deep Dive

In the ever-evolving world of mobile app development, providing a smooth and visually engaging user experience is crucial. React Native offers a powerful platform for achieving this through its robust API, allowing developers to create sophisticated animations that enhance the user interface. In this blog, we will explore how to build an animated scroll list in React Native using the Animated API. We’ll cover the tech stack, explain key concepts like interpolate, discuss advantages and disadvantages, and provide optimization tips to ensure your implementation is both performant and maintainable.

Tech Stack Overview

• React Native: The core framework for building cross-platform mobile applications using JavaScript.
• react-native-ui-lib: A library offering a collection of enhanced UI components.
• @freakycoder/react-native-bounceable: A library to create bounceable, interactive UI components with minimal configuration.
• @react-navigation/native: The navigation library handling theming and routing within the app.
• ColorPalette: A custom module for managing consistent color schemes across the application, I just used static constant colors set. Make it simple as possible.

Code Explanation

The code below demonstrates how to create an animated scroll list where each item scales and fades as it scrolls out of view. This is achieved using React Native’s Animated API, which allows for highly performant, smooth animations.

Setting Up the Animated Scroll List

import * as React from "react";
import { Image, Animated, StyleSheet } from "react-native";
import { FEATURES_DATA } from "components/data/FeatureData"; 
import ColorPalette from "@colors";
import { View, Text } from "react-native-ui-lib";
import RNBounceable from "@freakycoder/react-native-bounceable";
import { useTheme } from "@react-navigation/native";


const SPACING = 16;
const AVATAR_SIZE = 70;
const ITEM_SIZE = AVATAR_SIZE + SPACING * 3;

export const ScrollAnimatedList = () => {
  const scrollY = React.useRef(new Animated.Value(0)).current;
  const { colors } = useTheme();
  return (
    <View style={{ flex: 1, backgroundColor: colors.white }}>
      <Animated.FlatList
        data={FEATURES_DATA}
        keyExtractor={(item) => `${item.id} ${item?.title}`}
        contentContainerStyle={{
          padding: SPACING,
        }}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
          { useNativeDriver: true },
        )}
        renderItem={({ item, index }) => {
          const scale = scrollY.interpolate({
            inputRange: [-1, 0, ITEM_SIZE * index, ITEM_SIZE * (index + 2)],
            outputRange: [1, 1, 1, 0],
          });
          const opacity = scrollY.interpolate({
            inputRange: [-1, 0, ITEM_SIZE * index, ITEM_SIZE * (index + 1)],
            outputRange: [1, 1, 1, 0],
          });
          return (
            <RNBounceable>
              <Animated.View
                style={[
                  style.containerItem,
                  {
                    backgroundColor: colors.itemBackgrounds.purple,
                    opacity,
                    transform: [{ scale }],
                  },
                ]}
              >
                <Image
                  source={item.icon3D}
                  style={style.img}
                  resizeMode="contain"
                  resizeMethod="resize"
                />
                <View flex>
                  <Text title3Med>{item.title}</Text>
                  <Text
                    tagline
                    color={colors.blackOverlay}
                    marginT-2
                    numberOfLines={3}
                  >
                    {item.desc}
                  </Text>
                </View>
              </Animated.View>
            </RNBounceable>
          );
        }}
      />
    </View>
  );
};

Understanding Key Concepts: Animated and interpolate

• Animated API: React Native’s Animated API allows you to create smooth animations by using declarative interpolations. This API is optimized for high performance by leveraging the native driver, ensuring that animations run smoothly without blocking the main thread.
• interpolate: The interpolate method is crucial in creating smooth transitions between different values based on the scroll position. For example, in the code snippet, interpolate is used to adjust the scale and opacity of each list item as it scrolls in and out of view.
  const scale = scrollY.interpolate({ inputRange: [-1, 0, ITEM_SIZE * index, ITEM_SIZE * (index + 2)], outputRange: [1, 1, 1, 0], });
  Here, inputRange specifies the points at which the animation should start, stop, and how it progresses. The outputRange corresponds to the resulting scale value based on the scroll position.
  Similarly, the opacity of each item is interpolated:
  const opacity = scrollY.interpolate({ inputRange: [-1, 0, ITEM_SIZE * index, ITEM_SIZE * (index + 1)], outputRange: [1, 1, 1, 0], });
  This ensures that items gradually fade out as they scroll out of view.

Advantages of This Approach

1. Smooth User Experience: Leveraging the Animated API with useNativeDriver results in a smooth and responsive user experience, crucial for mobile applications.
2. Customizability: By using a modular approach with libraries like react-native-ui-lib and RNBounceable, developers can easily customize the look and feel of the list.
3. Scalability: This method works well with long lists, as FlatList optimizes rendering by only loading visible items.

Disadvantages

1. Steeper Learning Curve: For developers new to React Native or animations, understanding and implementing interpolate and Animated can be challenging.
2. Potential Performance Bottlenecks: Although performant, poorly optimized components or large datasets can still lead to performance issues. Proper testing is essential.

Optimization Tips

1. Enable useNativeDriver: Always use the useNativeDriver option for animations. This ensures animations run on the UI thread, providing better performance.
2. Component Memoization: Use React.memo to avoid unnecessary re-renders of static components.
3. Lazy Loading Images: If dealing with large images, consider lazy loading or optimizing image sizes to reduce memory usage and improve performance.

Versioning and Compatibility

• React Native: Ensure compatibility with React Native 0.63 and above to take advantage of the latest features and performance improvements.
• Libraries:
  • react-native-ui-lib: Compatible with version 5.0 and above.
  • @freakycoder/react-native-bounceable: Use the latest version for the most up-to-date features and bug fixes.

Conclusion

Creating an animated scroll list in React Native is a powerful way to enhance the user experience with smooth transitions and interactive UI elements. By leveraging the Animated API and understanding key concepts like interpolate, you can create visually appealing and performant applications. Always consider the balance between complexity and performance, and continuously test your implementation on different devices to ensure a consistent user experience