Issue importing values from one file to another in react-native

Question

I am learning ReactNative, and now I'm looking into how to organize the files (for now I am going to create a folder for each page, each with an index, functions and styles file). For some reason, though, I am not being able to import information to index.js , can't use the styles or functions, when I open the page, it doesn't return the func method.

I am wondering whether I am using import wrong. Using import { MenuFunctions} from './Menu' has resulted in an error saying nothing was imported, this error no longer appears, but nothing is being returned still.

This is my code, index, Menu and styles are all in the same folder.

index.js

import React from 'react';
import MenuFunctions from './Menu';
import MenuStyles from './styles'
import { Text, View } from 'react-native';

export default class MenuPage extends React.Component {
    render(){
        return(
            <View>
                <Text> Text: {MenuFunctions.func} </Text>
            </View>
        );
    }
}

Menu.js

import React from 'react';

export default class MenuFunctions extends React.Component{
    constructor(props){
        super(props);
    }

    func = () => {return "Hello, World!"};
}

styles.js

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

export default class MenuStyles extends React.Component{
    styles = StyleSheet.create({
        text: {
            color: "red",
        }
    });
}

Answer 1

Menu.js and styles.js shouldn't be React.Component and you forgot to call to Func method, () is missing.

React.Component is a UI component only which include a render method that returns JSX element.

Your code should look like that:

index.js

 import React from 'react'; import MenuFunctions from './Menu'; import MenuStyles from './styles'; import {Text, View} from 'react-native'; export default class MenuPage extends React.Component { render() { return ( <View> <Text> Text: {MenuFunctions.func()} </Text> </View> ); } } 

Menu.js

 import React from 'react'; class MenuFunctions { func = () => { return 'Hello, World!'; }; } export default new MenuFunctions(); 

styles.js

 import {StyleSheet} from 'react-native'; export default styles = StyleSheet.create({ text: { color: Colors.red30, } }); 

Answer 2

The problem is that you are trying to import Menu.js using import MenuFunctions from './Menu' when you had to specify the file itself: './Menu/Menu.js' . (remember to call the function using parentheses class.function() )

Also, whenever you export as default you don't have to use curly braces {}

If you are wondering about your project structure, you can use the following as a common structure to create projects. Let's say you have the following

 - index.js
 - src
   - assets
   - screens
     - MenuScreen
   - components
   - services
     - menu
       - index.js //this is Menu.js
 - android
 - ios

NOTE

Do not extend React.Component if you are not exporting a component.

Answer 3

You need an object to perform the function of the class you created.

Then declare and use the constructor .

index.js

import React from 'react';
import MenuFunctions from './Menu';
import MenuStyles from './styles'
import { Text, View } from 'react-native';

export default class MenuPage extends React.Component {
  constructor(props){
    super(props);
    this.menu = new MenuFunctions()
    MemuStyle = new MenuStyles()
  }


    render(){
        return(
            <View>
                <Text style={MemuStyle.styles.text}> Text: {this.menu.func()}</Text>
            </View>
        );
    }
}

Menu.js

import React from 'react';

export default class MenuFunctions extends React.Component {

  func(){
    return 'Hello, World!';
  }
}

styles.js

import { StyleSheet } from 'react-native';

export default class MenuStyles extends React.Component {
    styles = StyleSheet.create({
        text: {
            color: "red",
        }
    });
}

NOTE : The features you intend to use do not necessarily have to inherit React .