Hooks and types

Everything here is exported from @react-brackets/native. The data types, like Stage, Match and Participant, come from the core and are the same as on the web: see Data model.

usePagination()Copy Anchor Link

Paging for your own round tabs, dots or buttons. Works anywhere inside Bracket.Root. position is a Reanimated shared value that moves under the finger during a swipe, so an indicator built from it in useAnimatedStyle moves on the UI thread. See Navigation and zoom.

const { paged, rounds, page, setPage, previous, next, canPrevious, canNext, position } =
  usePagination();

paged is true while the bracket shows one round at a time, and false while it shows the whole tree, so controls placed outside the viewport can hide themselves on a wide screen:

function RoundDots() {
  const { paged, rounds, page, setPage } = usePagination();
  if (!paged) return null;
  return rounds.map((round, index) => (
    <Pressable key={round.id} onPress={() => setPage(index)}>
      <Text>{index === page ? '●' : '○'}</Text>
    </Pressable>
  ));
}

useZoom()Copy Anchor Link

Pan and zoom for your own zoom buttons, anywhere inside Bracket.Root. Returns null while the tree isn't panned and zoomed: in the paged view, or in scroll and fit modes.

const zoom = useZoom();
if (!zoom) return null;
zoom.zoomTo(zoom.maxScale);

useConnector()Copy Anchor Link

The line being drawn, inside renderConnector: its matches, whether it is highlighted, and points, a shared value with where it starts and ends. Use it in a component of your own that draws the line from scratch. See Connector lines.

function Straight() {
  const { points } = useConnector();
  const line = useAnimatedStyle(() => {
    const { start, end, opacity } = points.value;
    // A view one point long, stretched with a transform, moves in the same frame as the cards.
    return {
      opacity,
      transform: [
        { translateX: start.x },
        { translateY: start.y },
        { rotate: `${Math.atan2(end.y - start.y, end.x - start.x)}rad` },
        { scaleX: Math.hypot(end.x - start.x, end.y - start.y) },
      ],
    };
  });
  return (
    <Animated.View
      style={[
        { position: 'absolute', width: 1, height: 2, backgroundColor: '#a1a1aa' },
        { transformOrigin: 'left center' },
        line,
      ]}
    />
  );
}

connectorPath(start, end, radius) returns the bracket's own elbow as SVG path data. It runs on the UI thread too, so it works in useAnimatedProps.

useBracket()Copy Anchor Link

The bracket's context: the stage, the group, the theme, the labels and the highlight. Use it in your own components inside a card, a round title or anything else inside the bracket.

useMatch()Copy Anchor Link

The match being drawn, inside renderMatch. Useful in a component of your own deep inside a card, without passing the match down.

function Venue() {
  const match = useMatch();
  return <Text>{venues[match.id]}</Text>;
}

useBracketTheme()Copy Anchor Link

The theme a bracket would use here: the nearest BracketThemeProvider, or the light or dark theme from the system's appearance, with any overrides you pass applied on top. Use it to match your own views to the bracket.

const theme = useBracketTheme();
<View style={{ backgroundColor: theme.colors.surface, borderRadius: theme.radius }} />;

ZoomOptionsCopy Anchor Link

The zoom option on <Bracket> and Bracket.Root: how pan and zoom behaves in pan-zoom mode. How it feels shows each one in use.

SwipeOptionsCopy Anchor Link

The swipe option: how a swipe pages in the paged view.

LabelsCopy Anchor Link

Every built-in string, for translation and screen readers. Pass any of them to labels. See Right to left.

Other typesCopy Anchor Link