Requiring module error

[abdullahIsa]

Hello i am getting this error when i import import {TabView} from 'showtime-tab-view';

Error: Requiring module "node_modules\showtime-tab-view\src\index.tsx",
which threw an exception: TypeError: undefined is not a function

[alantoa]

@abdullahIsa can you share an example with me?

[abdullahIsa]

@abdullahIsa can you share an example with me?

I am following the example, using latest version "showtime-tab-view": "^0.1.2" whenever i enter the screen to see the result of DiscussionProfileTest it just throws errors regarding showtime-tab-view

import React, {useCallback, useState} from 'react';
import {StatusBar, Text, View} from 'react-native';
import {useSharedValue} from 'react-native-reanimated';
import {TabView} from 'showtime-tab-view';
import {TabFlashList} from './TabFlashListComponent';

const StatusBarHeight = StatusBar.currentHeight ?? 0;
const TabScene = ({route}) => {
  return (
    <TabFlashList
      index={route.index}
      data={new Array(20).fill(0)}
      estimatedItemSize={60}
      renderItem={({index}) => {
        return (
          <View
            style={{
              height: 60,
              backgroundColor: '#fff',
              marginBottom: 8,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Text>{`${route.title}-Item-${index}`}</Text>
          </View>
        );
      }}
    />
  );
};

const DiscussionProfileTest = () => {
  const [isRefreshing, setIsRefreshing] = useState(false);
  const [routes] = useState([
    {key: 'like', title: 'Like', index: 0},
    {key: 'owner', title: 'Owner', index: 1},
    {key: 'created', title: 'Created', index: 2},
  ]);
  const [index, setIndex] = useState(0);
  const animationHeaderPosition = useSharedValue(0);
  const animationHeaderHeight = useSharedValue(0);

  const renderScene = useCallback(({route}) => {
    switch (route.key) {
      case 'like':
        return <TabScene route={route} index={0} />;
      case 'owner':
        return <TabScene route={route} index={1} />;
      case 'created':
        return <TabScene route={route} index={2} />;
      default:
        return null;
    }
  }, []);

  const onStartRefresh = async () => {
    setIsRefreshing(true);
    setTimeout(() => {
      console.log('onStartRefresh');
      setIsRefreshing(false);
    }, 300);
  };
  const renderHeader = () => (
    <View style={{height: 300, backgroundColor: '#000'}}></View>
  );

  return (
    <TabView
      onStartRefresh={onStartRefresh}
      isRefreshing={isRefreshing}
      navigationState={{index, routes}}
      renderScene={renderScene}
      onIndexChange={setIndex}
      lazy
      renderScrollHeader={renderHeader}
      minHeaderHeight={44 + StatusBarHeight}
      animationHeaderPosition={animationHeaderPosition}
      animationHeaderHeight={animationHeaderHeight}
    />
  );
};
export default React.memo(DiscussionProfileTest);

[alantoa]

looks like it's related to Reanimated, what's your version of reanimted?

[abdullahIsa]

using latest "react-native-reanimated": "^3.1.0"

[alantoa]

@abdullahIsa gotcha, it doesn't support Reanimated v3 yet because Reanimated has an issue with this, i have already created an issue report here https://github.com/software-mansion/react-native-reanimated/issues/4405, so you have to downgrade it to v2 before you can use it.

[abdullahIsa]

@abdullahIsa gotcha, it doesn't support Reanimated v3 yet because Reanimated has an issue with this, i'm have already created a issue report here software-mansion/react-native-reanimated#4405, so you have to downgrade it to v2 before you can use it.

ah i see but dont think i can downgrade as other things using it too, once fixed please ping here will test out, thanks.

[frozencap]

yeah so incompatibility with Reanimated v3 and react-native-gesture-handler > 2.8.0 makes a difficult case for adoption. We can't downgrade a bunch of libs just to support a few features on top of TabView.

Great lib tho. Hoping for a ping when things get fixed

[alantoa]

Good news! Reanimated has already fixed this issue, but they haven't released the fix yet! I have already updated the example code and tested it, and it is working well. If you guys need it, just use this patch and it will work! https://github.com/showtime-xyz/showtime-tab-view/blob/v0.1.4/example/patches/react-native-reanimated%2B3.1.0.patch