How to require Stateless Functional Components (Unknown module _createWrapper?)

Question

I'm trying to learn how to use Stateless Functional Components, and require it like this:

const Button = require('./components/Button');

And in Button.js:

import React from 'react';

const { Text,   View,   TouchableOpacity,} = ReactNative;
const Button = () => {
    return  (
    <View><Text>Button</Text></View>
    );
}
export default Button;

This gives me:

Requiring unknown module "./_createWrapper".If you are sure the module is there, try restarting the packager or running "npm install".

If I do it inline, like this, it works:

const Button = () => 
    <View><Text>Button</Text></View>

But since I'd like to keep it as a reusable component, I want it in a file. How should I do?

Answer 1

Require is a commonJs import syntax and export default is ES6 export syntax.

so stick to one thing commonjs or ES6 Modules.

In Button.js while exporting

use module.exports = Button;

or you can use es6 import statements while importing

import Button from './components/Button'