bundling failed: SyntaxError Unexpected token, expected react-native

Question

renderScene ={SceneMap({
'1':() =>  <FirstRoute {...this.state.data}/>,
'2':() =>  <SecondRoute {...this.state.data,...this.props.navigation}/>

here is full code

render() {

  if(!this.state.loading){
      return (
        <View
          style={{
            flex: 1,
          }}>
          <StatusBar
             backgroundColor="mediumpurple"
             barStyle="light-content"/>
          <TabView
            style={styles.container}
            navigationState={this.state}
            renderScene ={SceneMap({
              '1':() =>  <FirstRoute {...this.state.data}/>,
              '2':() =>  <SecondRoute {...this.state.data, ...this.props.navigation}/>,
            })}
            renderHeader={this._renderHeader}
            onIndexChange={index => this.setState({ index })}
          />

        </View>
      );

  }else{
    return (
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color="#0000ff" />
        </View>
    );
  }
 }
}

Answer 1

This {...a, ...b} is not a javascript expression, therefore, it throws the Unexpected Token , error.

You can either use one of the following:

• <SecondRoute {...{...this.state.data,...this.props.navigation}} />

• const mergedObjects = {...this.state.data,...this.props.navigation}

  <SecondRoute {...mergedObjects}/>

• <SecondRoute {...this.state.data} {...this.props.navigation} />