Sample code in Readme file does not work with Expo, throwing `Did not expect type annotation here`

[selcuktoklucu]

Hello Everyone,
I'm not sure if you discuss the usage of this library here, but I'm stuck when I try to use this library for the first time. If this is not the place, please remove.

I would like to use this library in my Expo project and I initialized an expo library with minimal TypeScript template, and I want to add this library. However, I'm getting this error even before rendering with the initial code that has been shared in the readme section of this library.

Here is Main.tsx file

import React from 'react';
import { StyleSheet, Text, View, useWindowDimensions } from 'react-native';0

import { TabView, SceneMap } from 'react-native-tab-view';
import { TabViewVertical } from 'react-native-vertical-tab-view';
export default class Main extends PureComponent<PropsType, StateType> {
  static defaultProps = {
    orientation: 'PORTRAIT'
  };

  constructor(props: PropsType) {
    super(props);
    this.state = {
      index: 0,
      routes: [
        { key: '1', title: 'DASHBOARD', icon: 'tachometer', path: 'dashboard' },
        { key: '2', title: 'EMERGENCY', icon: 'phone', path: 'emergency' },
        { key: '3', title: 'FINANCE', icon: 'pie-chart', path: 'finance' },
        { key: '4', title: 'PERFORMANCE', icon: 'line-chart', path: 'performance' },
        { key: '5', title: 'FACILITIES', icon: 'building', path: 'facilities' },
        { key: '6', title: 'HUMAN RESOURCES', icon: 'users', path: 'human_resources' }
      ]
    };
  }

  _handleIndexChange = (index: number) => {
    this.setState({ index });
  };

  _renderLabelFactory = (props: TabScreenSceneRenderPropsType): TabBarCallbackType => (
    ({ route }: TabScreenSceneType): Element<*> => {
      const index = props.navigationState.routes.indexOf(route);
      const inputRange =
        props.navigationState.routes.map((x: TabScreenRouteType, i: number): number => i);
      const outputRange = inputRange.map((inputIndex: number): string =>
        (inputIndex === index ? Colors.lightBlue : Colors.dhsWhite));
      const color = props.position.interpolate({
        inputRange,
        outputRange
      });
      return <Animated.Text style={[styles.label, { color }]}>{route.title}</Animated.Text>;
    }
  );

  _renderIconFactory = (props: TabScreenSceneRenderPropsType): TabBarCallbackType => (
    ({ route }: TabScreenSceneType): Element<*> => {
      const index = props.navigationState.routes.indexOf(route);
      const inputRange =
        props.navigationState.routes.map((x: TabScreenRouteType, i: number): number => i);
      const outputRange = inputRange.map((inputIndex: number): string =>
        (inputIndex === index ? Colors.lightBlue : Colors.dhsWhite));
      const color = props.position.interpolate({
        inputRange,
        outputRange
      });
      const AnimatedIcon = Animated.createAnimatedComponent(Icon);
      return <AnimatedIcon name={route.icon} size={30} style={[styles.icon, { color }]} />;
    }
  );

  _renderTabs = (landscape: boolean, otherProps: SceneRendererProps): Element<*> => {
    const SelectedTabBar = landscape ? TabBarVertical : TabBar;
    return (
      <SelectedTabBar
        {...otherProps}
        renderLabel={this._renderLabelFactory(otherProps)}
        renderIcon={this._renderIconFactory(otherProps)}
        style={styles.tabbar}
        tabStyle={styles.tab}
        indicatorStyle={styles.indicator}
        scrollEnabled
      />
    );
  };

  _renderScene = SceneMap({
    '1': Screen1,
    '2': Screen2
  });

  render(): Element<*> {
    // Orientation coming in from react-native-orientation
    const landscape = this.props.orientation.split('-')[0] === 'LANDSCAPE';
    const SelectedTabView = landscape ? TabViewVertical : TabView;
    const initialLayout = { width: 600, height: 400 };
    return (
      <SelectedTabView
        initialLayout={initialLayout}
        renderTabBar={(props: SceneRendererProps) => this._renderTabs(landscape, props)}
        style={styles.container}
        navigationState={this.state}
        renderScene={this._renderScene}
        onIndexChange={this._handleIndexChange}
        swipeEnabled
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

and here is the error that I'm getting.

I guess it is something related to some kind of babel or something else. I tried to add @babel/plugin-transform-destructuring in my plugins but didn't help. Any idea what else I can try?

node version -> v16.7.0
expo version -> 4.10.0

Thank you so much 🙏

[dtaborda]

I think this project is dead, I setup the vertical tab with android but I created the app from scratch one year ago. The library is an extension to react-native-tab-view, and in my project, the dependencies installed are:
"react-native": "0.60.4",
"react-native-tab-view": "^2.10.0",

reading the new version of react-native-tab-view, you can see the screenshot

take a look if your dependencies are correct between react-native and react-native-tab-view, if it was fixed, let me know, or if do you have another vertical tab let me know too :D