React native error in index,js and app.js

Question

Kinda new to React I am writing the following code in index.js and app.js and this error message is coming.Kindly help

index.js--[error screnshot][1]

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('albums', () => App);

App.js--

    import React from 'react';
    import { Text } from 'react-native';

const App = () => {

return (

  <Text>HEELLO WORLD</Text>

);
};
export default App;

ERROR Can't find variable: __d (http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:1)

Can't find variable: __d (http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:1)

global code@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:1:4

Are these two files in the same directory? Is there a directory called App? — sbolel
– sbolel, Commented Jan 21, 2018 at 9:13

0xTheL · Accepted Answer · 2018-01-21 13:04:24Z

1

You probably need a view before text component. Something like this:

import React from 'react';
import { View, Text } from 'react-native';

const App = () => (
   <View>
     <Text>some text</Text>
   </View>
);

export default App;

answered Jan 21, 2018 at 13:04

0xTheL

4684 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hisham Mubarak · Accepted Answer · 2018-01-21 16:37:18Z

0

Suggestion 1 : Instead of a Functional Component, try converting to your App component to a Class Based Component and then try running the app again.

Suggestion 2 : Wrap your Text element inside a react native element in the App component.

answered Jan 21, 2018 at 16:37

Hisham Mubarak

1,6093 gold badges24 silver badges28 bronze badges

2 Comments

Jacob Boyd Over a year ago

Came across this and was wondering; Why is it better to use a component subclass instead of a constant here?

Hisham Mubarak Over a year ago

I have no idea why I said that then. I think I was guessing that the root cannot be a functional component. I still don't know. Looking at it now, I guess you can't have Text as the only elements on an App, at least it should be inside a View component.

Bramus · Accepted Answer · 2018-05-16 10:37:51Z

0

You get this error because the native app can't find the packager that's running. What I found is that the IP address shown in the app differed from my actual IP address, which was correct: I had closed my macbook overnight and switched networks by the time I re-opened it.

The fix for me was to remove the app from the device and then re-install it (using a normal react-native run-android). That way the app uses the correct IP address, and will search for a running packager on that IP.

answered May 16, 2018 at 10:37

Bramus

2,19819 silver badges19 bronze badges

Comments

Jacob Boyd · Accepted Answer · 2019-03-15 18:06:02Z

It looks like we are working on a similar tut(just picking up React Native as well)! Anyway, I did get this to work, and there was one issue - The view background color == black, and text color was black.

I looked at your files and I have the same but I will post it here. Keep in mind this isn't styled yet so your text will be upper left corner(0,0) for iOS at least. I haven't tested Android.

App.js

import React from 'react';
import { Text } from 'react-native';

const App = () => {
  return(
    <Text style={{color: 'white'}}>Some Text</Text>
  );
};

export default App;

index.js

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

Collectives™ on Stack Overflow

React native error in index,js and app.js

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related