Usage

Here is a simple Sortable Flex usage example. For more specific usage scenarios, see the Examples section.

There are no required props for the Sortable.Flex component and you can render anything within it. Items don't have to be the same components and don't need to have the same height.

Basic Example

import { Text, View, StyleSheet } from 'react-native';
import Sortable from 'react-native-sortables';

const DATA = [
  'Poland',
  'Germany',
  'France',
  'Italy',
  'Spain',
  'Portugal',
  'Greece',
  'Great Britain',
  'United States',
  'Canada',
  'Australia',
  'New Zealand'
];

export default function Flex() {
  return (
    <Sortable.Flex gap={10} padding={10}>
      {/* You can render anything within the Sortable.Flex component */}
      {DATA.map(item => (
        <View style={styles.cell} key={item}>
          <Text>{item}</Text>
        </View>
      ))}
    </Sortable.Flex>
  );
}

const styles = StyleSheet.create({
  cell: {
    backgroundColor: '#36877F',
    borderRadius: 9999,
    padding: 10,
    alignItems: 'center',
    justifyContent: 'center'
  }
});

Details

To create a grid, you need to import the Sortable object from the react-native-sortables package and then, use the Sortable.Grid component.

The Sortable.Grid component requires the following props which are similar to the ones in the FlatList component:

• data: The data to render in the grid.
• renderItem: A function that renders a single item in the grid.

You can customize the grid appearance and behavior by using other props. See the Props section for more information.

important

Remember to to wrap your renderItem function in a useCallback hook to avoid unnecessary re-renders.