I have just setup my React-native project using typescript.
I get the error below. Any ideas?
bundling failed: SyntaxError: C:\Users\Matt\sites\IAapp\navigation\AppNavigator.ts: Unexpected token, expected "," (60:30)
58 | screen,
59 | navigationOptions: ({routeName, props}) => ({
60 | header: props => <Header {...props} />
| ^
61 | }),
62 | },
AppNavigator:
import React, {Component} from 'react';
import {
...
} from 'react-native';
...
const config = {
contentOptions: {
activeTintColor: '#e91e63',
inactiveTintColor: '#ffffff',
itemStyle: {
flexDirection: 'row-reverse',
},
},
drawerWidth: Dimensions.get('window').width,
drawerPosition: 'left',
contentComponent: SideMenu,
drawerBackgroundColor: '#00000020',
cardStyle: {
backgroundColor: 'transparent',
opacity: 1,
},
};
const withHeader = (
screen: Function,
routeName: string,
Header,
): StackNavigator =>
createStackNavigator(
{
[routeName]: {
screen,
navigationOptions: ({routeName, props}) => ({
header: props => <Header {...props} />
}),
},
},
{
initialRoute: 'Home',
cardStyle: {
backgroundColor: 'transparent',
opacity: 1,
},
transitionConfig: () => ({
containerStyle: {
backgroundColor: 'transparent',
},
}),
},
);
const routes = {
VideoEpisodes: {
screen: withHeader(VideoEpisodesScreen, 'Video Episodes', DrawerHeader),
},
TestYourself: {
screen: withHeader(TestYourselfScreen, 'Test Yourself', DrawerHeader),
navigationOptions: {
drawerLabel: () => null,
},
},
MyResults: {
screen: withHeader(MyResultsScreen, 'My Results', DrawerHeader),
},
About: {
screen: withHeader(AboutScreen, 'About', DrawerHeader),
},
Tests: {
screen: withHeader(TestsScreen, 'Test Yourself', DrawerHeader),
},
BookmarkedVideos: {
screen: withHeader(
BookmarkedVideosScreen,
'Bookmarked Videos',
DrawerHeader,
),
},
};
const NestedDrawer = createDrawerNavigator(routes, config);
const MainStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: ({props}) => ({
header: props => <HomeHeader {...props} />,
}),
},
Drawer: {
screen: NestedDrawer,
navigationOptions: ({props}) => ({
header: () => null,
}),
},
VideoPlayer: {
screen: VideoPlayerScreen,
navigationOptions: ({props}) => ({
header: props => <VideoHeader {...props} />,
}),
},
},
{
initialRoute: 'Home',
cardStyle: {
backgroundColor: 'transparent',
opacity: 1,
},
},
);
export default createAppContainer(MainStack);
Babel config:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};