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

Answer 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;

Answer 2

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.

Answer 3

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.

Answer 4

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);