useItemContext

Overview

The useItemContext hook provides context with useful item-related values.

Usage

import { useItemContext } from 'react-native-sortables';

const ctx = useItemContext(); // inside a sortable item component

Return Values

The useItemContext hook returns an object with the following properties:

• itemKey - key of the item within which the hook is called
• isActive - whether the item is currently being dragged
• activeItemKey - key of the currently active item
• prevActiveItemKey - key of the previously active item
• activationAnimationProgress - progress of the activation animation (0 to 1) of the currently active item
• activationState - current drag activation state of the sortable component
• indexToKey - array of keys in the order of the items
• keyToIndex - object mapping item keys to their current order indices
• gesture - gesture object used for item dragging gesture (can be used on custom drag handle components, custom pressables, etc.)

Type definitions

type ItemContextType = {
  gesture: GestureType;
  itemKey: string;
  isActive: ReadonlySharedValue<boolean>;
  activationAnimationProgress: ReadonlySharedValue<number>;
  activationState: ReadonlySharedValue<DragActivationState>;
  activeItemKey: ReadonlySharedValue<null | string>;
  prevActiveItemKey: ReadonlySharedValue<null | string>;
  indexToKey: ReadonlySharedValue<Array<string>>;
  keyToIndex: ReadonlySharedValue<Record<string, number>>;
};

where ReadonlySharedValue has the same type as DerivedValue from react-native-reanimated and works in a similar way to the SharedValue type but it doesn't allow setting the value.

type ReadonlySharedValue<V> = Readonly<Omit<SharedValue<V>, 'set'>>;

Example

Here's an example of how to use the useItemContext hook to create a custom item component that responds to drag states:

function GridItem({ item }: { item: string }) {
  const { activationAnimationProgress, activationState } = useItemContext();

  const colorStyle = useAnimatedStyle(() => ({
    backgroundColor: interpolateColor(
      activationAnimationProgress.value,
      [0, 1],
      ['#36877F', '#063934']
    )
  }));

  const shakeStyle = useAnimatedStyle(() => {
    const easeOut = Easing.out(Easing.quad);

    return {
      transform: [
        activationState.value === DragActivationState.ACTIVE
          ? {
              rotate: withSequence(
                withTiming('0.08rad', { duration: 80, easing: Easing.linear }),
                withTiming('-0.08rad', { duration: 80, easing: Easing.linear }),
                withTiming('0.08rad', { duration: 80, easing: Easing.linear }),
                withTiming('-0.06rad', { duration: 80, easing: Easing.linear }),
                withTiming('0.06rad', { duration: 80, easing: Easing.linear }),
                withTiming('-0.04rad', { duration: 80, easing: Easing.linear }),
                withTiming('0.04rad', { duration: 80, easing: Easing.linear }),
                withTiming('0rad', { duration: 100, easing: easeOut })
              )
            }
          : { rotate: withTiming('0rad', { duration: 100, easing: easeOut }) }
      ]
    };
  });

  return (
    <Animated.View style={[styles.card, colorStyle, shakeStyle]}>
      <Text style={styles.text}>{item}</Text>
    </Animated.View>
  );
}

Result

Remarks

• The useItemContext hook must be used within a component that is rendered as part of a sortable item.

info

If you need to access other values, please request them in the GitHub Discussions. There are other properties that can be exposed in the ItemContextType type.