Using Custom Components

[ahmetkuslular]

Feature request

Is it possible to set up a structure where we can pass custom components instead of adding all components? New components such as FlatGrid and FlashList are coming out. I want to use these components with this package.

Note: I simply tried and succeeded. But it has to be done in a controlled way.

FlatGrid: https://github.com/saleel/react-native-super-grid FlashList: https://github.com/Shopify/flash-list

Example:

<Tabs.Custom
  component={FlashList}
   ...
/> 

[baronha]

same +1

[linleiqin]

same +1

[ursnj]

Same +1

[ricardopacheco]

Any news? +1

[pfcodes]

Bump

edit: @ahmetkuslular you said you tried and succeeded. how'd you do it?

[ahmetkuslular]

I just made it for testing purposes. I checked if it works or not. I have not done detailed testing.

1. Copy FlatList.tsx -> CustomList.tsx

CustomList.tsx

const CustomListMemo = React.memo(
    React.forwardRef<RNFlatList, React.PropsWithChildren<FlatListProps<unknown>>>(
        ({component, ...props}, passRef) => {
            const AnimatedCustomList = Animated.createAnimatedComponent(component)
            return <AnimatedCustomList ref={passRef} {...props} />
        }
    )
)

//the rest are the same. Here, component-specific props need to be managed separately.
...

Example.tsx

import { FlatGrid } from 'react-native-super-grid';

<Tabs.CustomList
      component={FlatGrid}
      ...props
/>

Bump

edit: @ahmetkuslular you said you tried and succeeded. how'd you do it?