react-brackets icon indicating copy to clipboard operation
react-brackets copied to clipboard

Help with mobile

Open MWTuttle opened this issue 2 years ago • 7 comments

Hello and thank you for making such a nice looking library.

I am trying to get this working with React Native. I was hoping someone could give me some hints on how to get started. I tried getting the minimal first example working but it is breaking my build, and I don't have experience getting web libraries working on mobile.

MWTuttle avatar Jun 25 '23 09:06 MWTuttle

What error are you getting? I have just opened a pr to update the examples, https://github.com/mohux/react-brackets/pull/26

The working first example would now be:

import { Bracket, IRoundProps } from 'react-brackets';

const rounds: IRoundProps[] = [
  {
    title: 'Round one',
    seeds: [
      {
        id: 1,
        date: new Date().toDateString(),
        teams: [{ name: 'Team A' }, { name: 'Team B' }],
      },
      {
        id: 2,
        date: new Date().toDateString(),
        teams: [{ name: 'Team C' }, { name: 'Team D' }],
      },
    ],
  },
  {
    title: 'Round one',
    seeds: [
      {
        id: 3,
        date: new Date().toDateString(),
        teams: [{ name: 'Team A' }, { name: 'Team C' }],
      },
    ],
  },
];
const Component = () => {
  return <Bracket rounds={rounds} />;
};

Oliver-Looney avatar Jun 25 '23 20:06 Oliver-Looney

Here's what I have in NewBracket.tsx:

import { View, Text } from 'react-native';
import { Bracket, IRoundProps } from 'react-brackets';

const rounds: IRoundProps[] = [
  {
    title: 'Round one',
    seeds: [
      {
        id: 1,
        date: new Date().toDateString(),
        teams: [{ name: 'Team A' }, { name: 'Team B' }],
      },
      {
        id: 2,
        date: new Date().toDateString(),
        teams: [{ name: 'Team C' }, { name: 'Team D' }],
      },
    ],
  },
  {
    title: 'Round one',
    seeds: [
      {
        id: 3,
        date: new Date().toDateString(),
        teams: [{ name: 'Team A' }, { name: 'Team C' }],
      },
    ],
  },
];

const NewBracket = () => {
    return <Bracket rounds={rounds} />;
};
export default NewBracket;

and I get the following: Screen Shot 2023-06-27 at 10 32 42

MWTuttle avatar Jun 27 '23 08:06 MWTuttle

It looks like NewBracket returns undefined

Does it work if you do:

const NewBracket = () => {
  return <Bracket rounds={rounds} />;
};

Oliver-Looney avatar Jun 27 '23 10:06 Oliver-Looney

Sorry @Oliver-Looney , I'm not sure if I follow your suggestion. That const statement looks identical to what I have, unless you are suggesting I remove the export?

MWTuttle avatar Jun 27 '23 16:06 MWTuttle

I replied before you edited your code example, Screenshot_20230627_202821

Oliver-Looney avatar Jun 27 '23 19:06 Oliver-Looney

Ha, sorry for the mixup.

Screen Shot 2023-06-27 at 21 39 56

MWTuttle avatar Jun 27 '23 19:06 MWTuttle

Hi @Oliver-Looney, I was wondering if you had any more insights you could share.

MWTuttle avatar Jun 30 '23 13:06 MWTuttle