Overview
What you can change, and the lightest way to change it.
Everything the bracket draws can be restyled or replaced, one piece at a time. Start with the lightest tool that does the job; each step down the list gives you more control and asks for a little more code.
| You want to | Use | Where |
|---|---|---|
| Change colours, sizes, gaps, radius or line width | theme, createTheme, BracketThemeProvider | Theme |
| Style parts with StyleSheet, Uniwind, NativeWind or Unistyles | Each part's style | Parts and styles |
| Style by state: winners, live matches, the highlighted path | style as a function of the part's state | Parts and styles |
| Draw your own match card, with logos, seeds or a live badge | renderMatch | Match cards |
| Change the colour, width and corners of the lines | colors.line, lineWidth, connectorRadius | Connector lines |
| Dash, dot, colour or point each line, or draw curves | renderConnector with Bracket.Connector | Connector lines |
| Add dates to round titles, or rename rounds | renderRoundTitle | Titles and labels |
| Move, restyle or replace the round tabs and zoom buttons | renderPagination, renderZoomControls, or the parts | Navigation and zoom |
| Control every element and where it goes | The Bracket.* parts | Building from parts |
How customising works
<Bracket> is a shortcut that renders a set of parts for you: a root, the group's title, a viewport with the rounds and their lines, the round tabs under the paged view, and the zoom buttons over a zoomable tree. Every part:
- takes
styleas a style, or as a function of its state, - takes children, or a function of its state, in place of what it draws,
- reads its strings from
labels, so it can be translated, and sets an accessibility role.
When a shortcut prop isn't enough, swap the one part you need and keep the rest. renderMatch replaces the card but keeps the lines, swiping, highlighting and presses. renderConnector restyles the lines but keeps them moving with the cards. renderPagination replaces the round tabs but keeps paging. Compose the parts yourself only when you need to change the structure, like putting the round tabs above the bracket.
A style for every state
Each part's style can be a function. It receives the part's state, so you can style from data without extra code:
<Bracket.Match style={({ live, highlighted }) => [styles.card, live && styles.live, highlighted && styles.ring]} />| Part | style receives |
|---|---|
Bracket.Match | MatchState |
Bracket.Participant | ParticipantState |
Bracket.PageButton | PageButtonState |
Bracket.PreviousPage, Bracket.NextPage | StepButtonState |
Bracket.ZoomIn, Bracket.ZoomOut, Bracket.ZoomReset | ZoomButtonState |
Bracket.ZoomLevel, Bracket.GroupTitle | Their own state, with the text they show |
Your own data
Anything you put in meta on a participant, a match or a group comes back to you wherever you render it: a logo, a country, a seed, a venue or a stream link. The data model is the same on both platforms: see your own data.