Unexpected token (9:13) error when trying to launch react app in terminal-CodePudding

I am newer to the scene and I am currently working on converting my website to a mobile app using React Native and I am coming across this error. If anyone could help, I would greatly appreciate it! :)

Here is the error I am getting:

iOS Bundling failed 790ms
SyntaxError: /Users/jj/nurse-job/App.js: 
Unexpected token (9:13)



7 |             <WebView
8 |                 source={{ url: { 
https://www.praecuro.com }}}
9 |     style = {{ marginTop: 20 }}
 |              ^
10 | />
11 |     );
12 |   }

Here is the full code in app.js

import * as React from "react";
import { WebView } from "react-native- 
webview"; export default class App extends 
React.Component {
render() {``
    return 
        <WebView
            source={{ url: { 
https://www.praecuro.com }}}
style = {{ marginTop: 20 }}
/>
);
}
}

CodePudding user response：

I'm not experienced in react native but Your URL is supposed to be a string?. Take a look at the documentation

 <WebView
   source={{
          uri: 'https://github.com/facebook/react-native'
        }}
style = {{ marginTop: 20 }}
/>

CodePudding user response：

I think you are setting your url incorrectly. Inside the {{ it is a json literal and you should use '' to set the value.

source={{ url: 'https://www.praecuro.com' }}

CodePudding user response：

Try this

 return (
      <WebView
        source={{ uri: "https://www.praecuro.com" }}
        style={{ marginTop: 20 }}
      />
    );

CodePudding user response：

Removing {} within the url will solve the issue, also use your WebView inside a <View></View>. And in the Usage guide of react-native-webview it says to the in source prop you've to use uri not url.

Also, make sure your code doesn't have extra spacing in your code between package name or anything.

Your code should look like this:

import * as React from "react";
import { View } from "react-native";
import { WebView } from "react-native-webview"; 
export default class App extends React.Component {
render() {
    return (
      <View>
        <WebView
            source = {{ uri: "https://www.praecuro.com" }}
            style = {{ marginTop: 20 }}
        />
      </View>
    );
  }
}

Hope this works for you.