please I'm new to react native and I am working on a project on snack.expo.io They seem fine to me but I wish to connect a js (ponent1.js) file to the parent App.js file but it keeps giving me these errors.

Device: (1069:6932) Failed to install module '/ponent1': Failed to download module '~ponent1@latest' imported from App.js

Here is my App.js file:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Component1 } from 'expo';

// You can import from local files

// or any pure javascript modules available in npm

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Component1 />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
});

please I'm new to react native and I am working on a project on snack.expo.io They seem fine to me but I wish to connect a js (ponent1.js) file to the parent App.js file but it keeps giving me these errors.

Device: (1069:6932) Failed to install module '/ponent1': Failed to download module '~ponent1@latest' imported from App.js

Here is my App.js file:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Component1 } from 'expo';

// You can import from local files

// or any pure javascript modules available in npm

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Component1 />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
});

And I want to get my result from my "ponent1.js", which is below:

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

export default class Component1 extends Component {
  addRow= ()=>{
    alert("Chat Unavailable");
  }
  render() {
    return (
      <View style={styles.part}>
      <TouchableOpacity style={styles.btn} onPress={this.addRow}>
        <Text style={styles.plus}>
          +
        </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  part: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  btn: {
    position: 'absolute',
    width:50,height:50,
    backgroundColor:'#00FF00',
    borderRadius:50,
    bottom:10,right:10,
    alignItems:'center',
    justifyContent:'center',
  },
  plus: {
    color:'white',
    fontSize: 25,
  }
});

• javascript
• react-native
• expo

1 Answer 1

You can only import API's from Expo's SDK when you do

import { /* Something here */ } from 'expo';.

To import your own ponents, you only need to import them from the directory they are in.

If it is in the same directory as App.js then it would be:

import Component1 from './Component1';

If you have a src directory or some other directory, it would look like:

import Component1 from './src/Component1';