CODEWITHSUNDEEP
javascriptandroidreactjsreact-native
Doo Doo
Doo Doo

Reputation: 1347

Cannot import other components in React Native

Recently I start learning how to build a mobile app using React Native, which I heard it from one of my friend and I really interested in it. But now I faced error and tried to search for solutions from google but none of them could solve my problem. My problem is that when I import other components to index.android.js It shows error on mobile screen =>

The development server returned response error code: 500

My components are stored in folder android => android/app/components/Bar.js

I imported it like this

import Bar from './app/components/Bar';

index.android.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  View
} from 'react-native';

import Bar from './app/components/Bar';
export default class ProfilePageApp extends Component {
  render() {
    return (
      <View style={styles.container}>

          <Bar />

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  }
});

AppRegistry.registerComponent('ProfilePageApp', () => ProfilePageApp);

Bar.js

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


 class Bar extends Component {
  render() {
    return (
      <View style={styles.container}>

          <Text>Hello world</Text>

      </View>
    );
  }
}

export default Bar;

error

enter image description here

Upvotes: 0

Views: 2417

Answers (1)

ickyrr
ickyrr

Reputation: 2113

I'm not sure how RN really works regarding the file directory convention, but I think it's pretty much the same to others like React. But when I read your code I think you're missing the ./android on your import statement.

You mentioned:

My components are stored in folder android => android/app/components/Bar.js

But you imported it like so:

import Bar from './app/components/Bar';

Have you tried

import Bar from './android/app/components/Bar';

?

Upvotes: 1

Related Questions