Version 4.0 with api refactoring and dynamic tabs

[andreialecu]

Third alternative to #90 or #91 😆

Introduces a <Tabs.Tab /> component for defining the tabs.

      <Tabs.Container ref={ref} headerHeight={HEADER_HEIGHT} {...props}>
        <Tabs.Tab name="article">
          <Article />
        </Tabs.Tab>
        <Tabs.Tab name="albums">
          <Albums />
        </Tabs.Tab>
        <Tabs.Tab name="contacts">
          <Contacts emptyContacts={emptyContacts} />
        </Tabs.Tab>
      </Tabs.Container>

I think I like this the best personally. Seems most idiomatic with React practices in general.

Another benefit is that there's no more need to define the tabs twice (and to make sure the order matches).

[andreialecu]

This may have an additional benefit that it would make it possible to add/remove tabs at runtime dynamically. I'm not sure if the dynamic part works, because I haven't tested it. But if it doesn't, it should be fixable.

[andreialecu]

Also, this is a breaking change so it would need to bump the package to 4.0.

[PedroBern]

These changes are so awesome 🎉 🚀 Makes the API much more idiomatic, I really like it.

Just one concern, how do we get the ref from a parent component? Maybe a simple solution is to somehow map the refMap to an object inside the useImperativeHandle. So we can access like this: ref.current.article.current... or ref.current.tabs.article.current....

Would be awesome if it were possible to pass props to the Tab and send it to TabBarComponent or HeaderComponent. Just like react-navigation. But that's another story...

[PedroBern]

I'm thinking about how could we achieve an expo preview for PRs other than mine. The github secrets can't be shared between forks, so seems there is no right solution for this. Would be great if it were possible. Right now I need to fetch every PR and test locally.

[PedroBern]

@andreialecu we can add something like this:

// utility hook
const useTabsOptions = (children: typeof Tab[] | typeof Tab) => {
  const options = React.useMemo(() => {
    const tabsOptions = {}
    React.Children.forEach(children, (element, index) => {
      const { options, name } = element.props
      tabsOptions[name] = options
    })
    return tabsOptions
  }, [children])
  return options
}

// inside the Container:

// extract the props passed to each Tab component and map to the tab names
const tabOptions = useTabsOptions(children)

// pass the tab options to the TabBar
<TabBarComponent options={tabOptions} ... />

And then use like this:

      <Tabs.Container ref={ref} headerHeight={HEADER_HEIGHT} {...props}>

        // direct props
        <Tabs.Tab name="article" options={{ label: ...}}>
          <Article />
        </Tabs.Tab>

        // or options
        <Tabs.Tab name="albums" options={{ label: ... }}>
          <Albums />
        </Tabs.Tab>

      </Tabs.Container>

It will grab the props before rendering the tab bar. We can pass it to the header too. In this example the TabBar would receive:

{
    article: { label: ... },
    albums: { label: ... }
} 

[PedroBern]

I have just added the options 🚀 Please review and make necessary changes if needed, including the naming conventions.

tried the preview after having commits from me, but still don't work

[PedroBern]

I changed to type instead of interface because the docs script doesn't like interfaces, and doesn't matter anyway.

[PedroBern]

this type can probably be narrowed down.

[PedroBern]

Do you have a better name for this? FinalTabOptions is awkward.

[andreialecu]

I'm working on this at the moment btw. Will report back in a few.

[dan-fein]

I'm not using in a production app so I don't mind if it's incomplete, happy to report bugs here. What's the best way to use these latest changes?

[andreialecu]

@danielfein I already replied to your previous comment here with instructions. Scroll up a bit. Feedback would be greatly appreciated.

There are some issues on android with the latest commit which are being worked on (related to snapping and flatlists)

[alexpchin]

@danielfein I already replied to your previous comment here with instructions. Scroll up a bit. Feedback would be greatly appreciated.

There are some issues on android with the latest commit which are being worked on (related to snapping and flatlists)

Hi @andreialecu did as you said to use your version in my project. However, it seems like the prepack script doesn't automatically run. When adding this to my postinstall script.

npm i --prefix ./node_modules/react-native-collapsible-tab-view && npm run prepack --prefix ./node_modules/react-native-collapsible-tab-view

I see these errors:

> react-native-collapsible-tab-view@3.7.1 prepack /Users/alexchin/ReactNative/iynk-react-app/node_modules/react-native-collapsible-tab-view
> bob build

ℹ Building target commonjs
ℹ Cleaning up previous build at lib/commonjs
ℹ Compiling 15 files in src with babel
✓ Wrote files to lib/commonjs
ℹ Building target module
ℹ Cleaning up previous build at lib/module
ℹ Compiling 15 files in src with babel
✓ Wrote files to lib/module
ℹ Building target typescript
ℹ Cleaning up previous build at lib/typescript
ℹ Generating type definitions with tsc
src/helpers.tsx:18:14 - error TS2742: The inferred type of 'AnimatedFlatList' cannot be named without a reference to 'react-native-collapsible-tab-view/node_modules/@types/react'. This is likely not portable. A type annotation is necessary.

18 export const AnimatedFlatList = Animated.createAnimatedComponent(FlatList)
                ~~~~~~~~~~~~~~~~

src/hooks.tsx:34:17 - error TS2742: The inferred type of 'useContainerRef' cannot be named without a reference to 'react-native-collapsible-tab-view/node_modules/@types/react'. This is likely not portable. A type annotation is necessary.

34 export function useContainerRef() {
                   ~~~~~~~~~~~~~~~

src/hooks.tsx:481:17 - error TS2742: The inferred type of 'useSharedAnimatedRef' cannot be named without a reference to 'react-native-collapsible-tab-view/node_modules/@types/react'. This is likely not portable. A type annotation is necessary.

481 export function useSharedAnimatedRef<T extends RefComponent>(
                    ~~~~~~~~~~~~~~~~~~~~

src/index.tsx:27:14 - error TS2742: The inferred type of 'Tabs' cannot be named without a reference to 'react-native-collapsible-tab-view/node_modules/@types/react'. This is likely not portable. A type annotation is necessary.

27 export const Tabs = {
                ~~~~


Found 4 errors.

Also:

• This package has been renamed to 'react-native-builder-bob'. Please use it instead.

Propose releasing as @next ?

[andreialecu]

react-native-collapsible-tab-view-v3.7.1.tgz.zip

I ran pack on the current tip of this PR. Extract the zip, and add it as file:react-native-collapsible-tab-view-v3.7.1.tgz (or check npm's documentation)

(or clone this PR, and run yarn && yarn pack to generate the file above)

[andreialecu]

There is a known issue with RefreshControl + FlatList + Snapping on Android (iOS works fine). The issue also affects the current published version though.

We believe it's a reanimated bug: software-mansion/react-native-reanimated#1703

[alexpchin]

Hi @andreialecu I'm now setup with the new version in my project. Just getting to grips with the new setup but currently when I scroll up on iOS, the header does not scroll with the list. Also I'm seeing [Object Map Iterator] in the TabBar as per:

I will continue to have a look. (I previously had a few pages to update to the new version).

[andreialecu]

Make sure to use the scrollview or flatlist exported from this package. Not the react native ones.

If the problem persists, a code sample of how you're using it would be helpful.