Appreciate if anyone can help me, i am learning react native and facing issue while changing the structure of the files.

I have two files, App (main file) and Welcomescreen. When both are in main Project folder, i can import WelcomeScreen into App file and its shows. However, when i put Welcomescreen in a new folder named "Appo>screens>welcomescreen.js", the App file shows white page with no error. I update the import link as well.

Appreciate your help, please see blow code and structure of the file:

App File:

import Welcomescreen from './appo/screens/welcomescreen';


const App = () =>  {
  return (
     <Welcomescreen />
      );
    }

 
  
export default App;

Welcomescreen File:

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

 function WelcomeScreen() {
    
    return (
      <View style={styles.container}>
        <Text>Hello Welcome Screen!</Text>
      </View>
    );
  }

  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: 'blue',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
 export default WelcomeScreen;`

Directory :

directory image

CodePudding user response：

From what I can tell, the files you've moved around are missing imports.

WelcomeScreen

• React needs to be imported and in scope to render JSX
• StyleSheet needs to be imported from `react-native'

Code

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

function WelcomeScreen() {
  return (
    <View style={styles.container}>
      <Text>Hello Welcome Screen!</Text>
    </View>
  );
}

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

export default WelcomeScreen;

App

• React needs to be imported and in scope to render JSX

Code

import * as React from 'react';
import Welcomescreen from './appo/screens/welcomescreen';

const App = () => {
  return <Welcomescreen />;
};

export default App;

Expo snack