React Native Mantine › Miscellaneous

FloatingIndicator

Animated indicator that slides between targets

Import: import { FloatingIndicator } from 'react-native-mantine';

Usage

import { FloatingIndicator } from 'react-native-mantine';
import type { FloatingIndicatorTarget } from 'react-native-mantine';

const [active, setActive] = useState(0);
const [rects, setRects] = useState<
  (FloatingIndicatorTarget | null)[]
>([null, null, null]);

// Parent uses the default relative positioning
<View style={{ flexDirection: 'row', borderWidth: 1 }}>
  {/* Rendered first, sits behind the labels */}
  <FloatingIndicator target={rects[active] ?? null} color="blue" />

  {labels.map((label, index) => (
    <Pressable
      key={label}
      // Transparent background + zIndex above the indicator
      style={{ flex: 1, zIndex: 1 }}
      onLayout={(event) => {
        const { x, y, width, height } = event.nativeEvent.layout;
        setRects((current) => {
          const next = [...current];
          next[index] = { x, y, width, height };
          return next;
        });
      }}
      onPress={() => setActive(index)}
    >
      <Text>{label}</Text>
    </Pressable>
  ))}
</View>

Props

Source on GitHub · npm