Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6211

React native typescript syntax error, unexpected token

$
0
0

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'],
};

Viewing all articles
Browse latest Browse all 6211

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>