Let me tell you i am totally new into react native and in fact this is my first app which i am building. I am dying by this annoying error . This error comes whenever i am adding any image to my project . The syntax i am using is
import React, { Component } from 'react';
import {
StyleSheet,
Image,
Text,
View
} from 'react-native';
export default class Login extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.splashlogo}>
<Image
source={require('../../images/splashscreenlogo.png')}
/>
<Text>
Modeloca
</Text>
</View>
</View>
);
}
}
but getting this error
com.facebook.react.common.JavascriptException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false' failed to load.
Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false' failed to load.
loadApplicationScript
WebsocketJavaScriptExecutor.java:173
run
NativeRunnable.java
handleCallback
Handler.java:739
dispatchMessage
Handler.java:95
dispatchMessage
MessageQueueThreadHandler.java:31
loop
Looper.java:135
run
MessageQueueThreadImpl.java:194
run
Thread.java:818
any suggestion!
Related
I have an image slider component to display images from my Firebase database as follows ,
import React from 'react';
import Swiper from 'react-native-swiper';
import { View, StyleSheet, Image } from 'react-native'
const ImageSlider = ({images}) => {
return (
<Swiper autoplayTimeout={5}
style={styles.wrapper}
showsButtons={false}
loadMinimal={true}
showsPagination={true}
paginationStyle={styles.paginationStyle}
activeDotStyle={styles.activeDotStyle}
dotStyle={styles.dotStyle}
loop={true} autoplay={true}
>
{images.map((data, index) => {
return (
<View key={index} style={styles.slider}>
<Image style={styles.itemImage} source={{ uri: data }} />
</View>
)
})}
</Swiper>
)
}
For test above component I used follwing test file ,
import React from 'react';
import renderer from 'react-test-renderer';
import ImageSlider from '../../../src/components/imageSlider/ImageSlider';
test('renders correctly', () => {
const tree = renderer.create(<ImageSlider />).toJSON();
expect(tree).toMatchSnapshot();
});
When I'm run npm test command and after I got following error
TypeError: Cannot read property 'map' of undefined
Can anyone help me to slove this problem , Thank you
In your test, you're creating an ImageSlider without any parameters:
<ImageSlider />
In ImageSlider, you try to map the property images:
images.map( //etc
Because you didn't pass in an images parameter/property, images is undefined when you try to map it. To solve, this pass in value for images in your test:
<ImageSlider images={YOUR_TEST_IMAGES_DATA}/>
The other option is to redesign ImageSlider so that it fails gracefully if images is undefined. But, then there wouldn't be much a point in doing the test (unless the test was to see what happens if no parameter is passed in)
I have seen this issue posted on stack overflow many times with no clear answer. I'm hoping this question can help me and others out.
I wish to render a URL in react native using react-native-webview
I started a blank react native project using expo init my-app. I ran npm i react-native-webview and react-native link react-native-webview. I then created a file defined as the following
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class WebViewTest extends Component {
render() {
return (
<WebView
source={{ uri: 'https://www.google.com/' }}
style={{ marginTop: 20, width: 400, height: 400 }}
/>
);
}
}
export default WebViewTest;
My app.js imports and renders that file like the following
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import WebViewTest from './Components/WebViewTest';
export default function App() {
return (
<WebViewTest />
);
}
I test this code by running expo start and I open up my project in a web browser.
I then see the following in the browser
I don't get any errors or warnings so where am I going wrong?
As Per The Expo Docs For WebView -
https://docs.expo.io/versions/latest/sdk/webview/
https://www.npmjs.com/package/react-native-webview
It Doesn't Work On Web Using EXPO
I can see my Text: I am HomeScreen as well when i compile the project. My problem is when adding a Image , it shows the error HomeScreen.js: Unexpected token .
I can't see my code has any problem . Is any one can tell me what step i miss it ? That would be appreciated.
Here is my HomeScreen.js:
import React, { Component } from 'react';
import { View, Text, Image } from 'react-native';
class HomeScreen extends Component {
static navigationOptions = {
title: 'Home'
};
// When i add Image , i will get a error.
render(){
return (
<View>
<Image
source={require(../img/home.png)}
fadeDuration={0}
style={{width: 20, height: 20}}
/>
<Text>I am HomeScreen</Text>
</View>
);
}
};
export default HomeScreen;
Here is my root:
source={require(../img/home.png) should be source={require('../img/home.png') however whenever u add images u need to restart web server .just restart by react-native start
For your webpack to run I think all of your js files should be in components folder try replacing your HomeScreen.js file into components folder and run it again .Hope it works
It is because you missed single quote
source={require('../img/home.png')}
I am trying to run my react native app on my device .
So I am running react-native start
everything looks fine.
and when running react-native run-android I get this error
otherwise, I get this error in my device
My issue was the name I gave the project differed from the name that was being registered in AppRegistry
AppRegistry.registerComponent('proj', () => proj)
proj needs to be the same as the name of the project in the gradle and config files.
You need to export the class. Use the code below
import React, { Component } from 'react'
import { AppRegistry, Text, View } from 'react-native'
export default class proj extends Component {
render() {
return (
<View style={styles.container}> <Text > Welcome to PutainDeBiere! </Text> </View> )
}
}
AppRegistry.registerComponent('proj', () => proj)
Delete / uninstall first the APP installed and then do a clean install of it and see if it works.
I took a reference ofScrollView from React Native official tutorial.
The image code just like
<Image source={require('./img/favicon.png')} />
When i try to build it shows that
The development server returned response error code: 500
URL: http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false
Body:
{"from":"F:\\ReactNativeProject\\FirstProject\\index.android.js","to":"./img/favicon.png","message":"Unable to resolve module `./img/favicon.png` from `F:\\ReactNativeProject\\FirstProject\\index.android.js`: Directory F:\\ReactNativeProject\\FirstProject\\img\\favicon.png doesn't exist","name":"UnableToResolveError","type":"UnableToResolveError","errors":[{}]}
I set the image to my folder that is F:\ReactNativeProject\FirstProject\img
and the image name is favicon
Why it shows the error ? Some one can tell me why? Thanks in advace.
New error is F:/ReactNativeProject/FirstProject/index.android.js: Unexpected token (9:25)
at F:\ReactNativeProject\FirstProject\index.android.js:9:25
My code is
import React, { Component } from 'react';
import{ AppRegistry, ScrollView, Image, Text, View } from 'react-native'
class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
render() {
return(
<ScrollView>
<Image source={../../img/favicon.png} />
</ScrollView>
);
}
}
AppRegistry.registerComponent('FirstProject', () => IScrolledDownAndWhatHappenedNextShockedMe);
require is used to refer a module/file. Hence You are getting the error.
<Image source={require('./img/favicon.png')} />
should be:
<Image source={path/favicon.png} />//path=path of image