CODEWITHSUNDEEP
javascriptandroidcompilationreact-native
Jake Xuereb
Jake Xuereb

Reputation: 223

Trying to edit "React Native init" file structure

I have been trying to get my head around React Native as I recently took the decision to switch to it from Cordova.

I have been trying to understand how container and component files should be properly structured inside src in order to correctly build.

To this end I have been attempting to run the initial index.android.js code out of a new file "app.js" which I have created in a folder I called js found in the original /src/main folder.

This is the index file code 

/*Both index files index.ios.js and index.android.js MUST be indentical*/
var React= require('react-native');
var { AppRegistry } = React;
var App = require('./android/app/src/main/js/app.js')
AppRegistry.registerComponent('LearnD', () => LearnD);

And the app.js file can be found at this gist here.

I have been then receiving the following error: Error

Any help will be more than appreciated. Thanks in advance, Jake.

Upvotes: 0

Views: 672

Answers (2)

Francisco Flores
Francisco Flores

Reputation: 290

Your file is trying to export App on line 48, which does not exist. You already have export default class LearnD on line 10, so omit line 48 and that should help

Upvotes: 0

jevakallio
jevakallio

Reputation: 35890

A typical setup for a React Native application looks something like:

└── YourApp
    ├── android           # Native Android files, no .js here
    ├── index.android.js  # Android entry point, must exist
    ├── index.ios.js      # iOS entry point, must exist
    ├── ios               # Native iOS files, no .js here
    └── src               # All your .js sources
        ├── components    # All your .js sources
        └── main.js       # Your shared entry point

Your src/main.js can then export a single, shared entry point component for both platforms and uses other components inside the src/ directory:

// src/main.js
import React, { Component } from 'react';
import { View } from 'react-native';
import OtherComponent from './components/other-component.js'

// note export default
export default class Main extends Component {
  render() {
    return (
      <View>
        <OtherComponent />
      </View>
    );
  }
}

And your index.ios.js and index.android.js components can import and register the main component as the application root component:

// index.ios.js and index.android.js
// both must exist, but they can be identical
import { AppRegistry } from 'react-native';
import Main from './src/main';

AppRegistry.registerComponent('YourApp', () => Main);

Within the src directory, you can then structure your app code in any way you best see fit, e.g. src/components and src/containers - entirely up to you!

Upvotes: 1

Related Questions