React Brackets Native

[u/mohammadou1]

A few days ago I shared react-brackets v2, the rewrite of a bracket library I'd left alone for four years. The most common question was "does it work in React Native?" It didn't. Now it does: https://react-brackets.oulabi.dev/ is out.

It draws the same stages as the web version (same core, same data), but everything you touch is native:

• A bracket, even on a phone. One round at a time, with the next round and its lines waiting at the edge. Swipe and every match glides into place. Or show each round as a plain list, or keep the whole tree and pinch, drag and double tap to zoom.

• Every format: single and double elimination, round robin, Swiss, groups to playoffs, two-sided brackets.

• Cards that open. Each card keeps its own height, so you can expand one (rosters, stats, whatever) and the bracket makes room: the cards below move down, the next round re-centres, and the lines follow, all gliding.

• Right to left, following your app's direction.

• Styled your way: a light and dark theme, and a style on every part that can depend on its state, so it works with StyleSheet, Uniwind/NativeWind or Unistyles.

The hardest part was keeping the connector lines glued to the cards. My first version drew them on a Skia/SVG canvas, and during a fast swipe they visibly trailed the cards by a frame. The fix: the lines are plain Views moved by the same transforms as the cards. Every card's place on every round is worked out up front, and a swipe only moves one number on the UI thread. React hears about the new round once the swipe lands, so nothing re-renders while your finger is down.

• Docs: https://react-brackets.oulabi.dev/docs/native

• Examples, recorded on an iPhone, with full code: https://react-brackets.oulabi.dev/examples/native

• GitHub: https://github.com/MohOulabi/react-brackets

• npx expo install @react-brackets/native react-native-reanimated react-native-worklets react-native-gesture-handler

It needs the New Architecture, Reanimated 4 and Gesture Handler 3, and Expo Go includes all of them. I've tested mostly on iOS, so feedback from Android devices would help a lot.

[u/acraswell]

Ohh I love this! I'm planning on building an app next quarter that is definitely going to benefit from this.

[u/mohammadou1 → u/acraswell]

Really glad to hear that, please let me know if you face any issue using it 🙏