Sample code in Readme file does not work with Expo, throwing Did not expect type annotation here #11
Description
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 🙏