{"id":43742,"date":"2024-10-29T11:37:08","date_gmt":"2024-10-29T11:37:08","guid":{"rendered":"https:\/\/www.carmatec.com\/?p=43742"},"modified":"2024-10-30T06:42:03","modified_gmt":"2024-10-30T06:42:03","slug":"implementing-a-scale-decorator-in-a-draggable-flatlist-in-react-native","status":"publish","type":"post","link":"https:\/\/www.carmatec.com\/blog\/implementing-a-scale-decorator-in-a-draggable-flatlist-in-react-native\/","title":{"rendered":"Implementing a Scale Decorator in a Draggable FlatList in React Native"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Creating a visually interactive and user-friendly experience is key in mobile app development<\/a>. React Native’s FlatList is highly versatile and efficient, commonly used for rendering large lists. With the added benefit of drag-and-drop functionality, you can make your FlatList even more engaging. In this article, we’ll explore how to implement a draggable FlatList in React Native, complete with a scale decorator to make items pop and respond to touch.<\/p>

Prerequisites<\/strong><\/h2>

Before starting, ensure you have basic knowledge of React Native and some familiarity with animations in React Native<\/a>. You’ll also need to install the following libraries:<\/p>

  1. react-native-reanimated<\/strong> – for animations.<\/li>
  2. react-native-gesture-handler<\/strong> – for handling touch gestures.<\/li>
  3. react-native-draggable-flatlist<\/strong> – for draggable list functionality.<\/li><\/ol>
    npm install react-native-reanimated react-native-gesture-handler react-native-draggable-flatlist<\/pre>
    Step 1: Set Up Draggable FlatList<\/strong><\/h5>
    Begin by importing the necessary components and setting up a simple draggable FlatList<\/code>.<\/p>
    import React from 'react';\nimport { StyleSheet, View, Text } from 'react-native';\nimport DraggableFlatList, { ScaleDecorator } from 'react-native-draggable-flatlist';\n\nconst data = Array.from({ length: 10 }, (v, i) => ({\n    key: `item-${i}`,\n    label: `Item ${i + 1}`,\n}));\n\nconst DraggableList = () => {\n    const [items, setItems] = React.useState(data);\n    const renderItem = ({ item, drag, isActive }) => {\n        return (\n            <ScaleDecorator activeScale={1.1}>\n                <View\n                    style={[\n                        styles.itemContainer,\n                        { backgroundColor: isActive ? '#e0f7fa' : '#fafafa' },\n                    ]}\n                >\n                    <Text style={styles.text} onLongPress={drag}>\n                        {item.label}\n                    <\/Text>\n                <\/View>\n            <\/ScaleDecorator>\n        );\n    };\n    return (\n        <DraggableFlatList\n            data={items}\n            onDragEnd={({ data }) => setItems(data)}\n            keyExtractor={(item) => item.key}\n            renderItem={renderItem}\n        \/>\n    );\n};\nexport default DraggableList;<\/pre>
    Here\u2019s what\u2019s happening:<\/p>
    1. Data Array<\/strong>: We set up an array of items to render in the list.<\/li>
    2. DraggableFlatList<\/code> Component<\/strong>: This renders a list where items can be dragged.<\/li>
    3. Render Item<\/strong>: Each item displays text and uses drag<\/code> from the render prop to enable dragging on long-press.<\/li>
    4. ScaleDecorator<\/strong>: Wraps each list item and provides a scaling effect when active.<\/li><\/ol>
      Step 2: Apply the Scale Decorator<\/strong><\/h5>
      The ScaleDecorator<\/code> from react-native-draggable-flatlist<\/code> is a powerful tool for providing visual feedback on item selection. Setting activeScale<\/code> controls the scale size when an item is being dragged.<\/p>
      <ScaleDecorator activeScale={1.1}><\/pre>
      In this example, setting activeScale={1.1}<\/code> scales the item to 110% of its original size when active. Adjust the scale factor as needed for your UI.<\/p>
      Step 3: Add Custom Styles<\/strong><\/h5>
      Enhance the appearance and interaction by adding some custom styles.<\/p>
      const styles = StyleSheet.create({\n  itemContainer: {\n \u00a0\u00a0 padding: 20,\n \u00a0\u00a0 marginVertical: 8,\n \u00a0\u00a0 marginHorizontal: 16,\n \u00a0\u00a0 borderRadius: 8,\n \u00a0\u00a0 borderWidth: 1,\n \u00a0\u00a0 borderColor: '#ddd',\n  },\n  text: {\n \u00a0\u00a0 fontSize: 18,\n \u00a0\u00a0 fontWeight: 'bold',\n  },\n});<\/pre>
      These styles define padding, margin, and basic colors, giving each item a card-like appearance.<\/p>
      Step 4: Animations with <\/strong>react-native-reanimated<\/code><\/strong> (Optional)<\/strong><\/h5>
      If you\u2019d like more control over scaling or want to animate other properties during dragging, consider integrating react-native-reanimated<\/code>. Here\u2019s a quick example of how to achieve a smooth scale-in and scale-out effect with Reanimated<\/code>.<\/p>
      1. Install Reanimated and import it.<\/li>
      2. Wrap each item in an Animated.View<\/code>, where the scale value changes based on dragging state.<\/li><\/ol>
        import Animated, { useAnimatedStyle, withSpring } from ‘react-native-reanimated’;<\/p>
        const renderItem = ({ item, drag, isActive }) => {\n  const scale = isActive ? withSpring(1.1) : withSpring(1);\n  const animatedStyle = useAnimatedStyle(() => ({\n \u00a0\u00a0 transform: [{ scale }],\n\u00a0 }));\n\n  return (\n \u00a0\u00a0 <Animated.View style={[styles.itemContainer, animatedStyle]}>\n \u00a0\u00a0\u00a0\u00a0 <Text style={styles.text} onLongPress={drag}>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {item.label}\n \u00a0\u00a0\u00a0\u00a0 <\/Text>\n \u00a0\u00a0 <\/Animated.View>\n  );\n};<\/pre>
        Testing and Troubleshooting<\/strong><\/h4>
        Run the app on a device or emulator, and test the drag-and-drop functionality by pressing and holding an item, then moving it around.<\/p>
        Tips<\/strong><\/p>