Importing files outside my App.js - React Native-CodePudding

I'm new to React Native and I'm currently trying to create a cookbook application with Expo. And I'm looking for a solution to shorten my importing in my App.js since they're all in the same folder. Here it looks like:

import Ampalaya from "./recipes/Ampalaya";
import AdobongSitaw from "./recipes/AdobongSitaw";
import BananaQue from "./recipes/BananaQue";
import Bibingka from "./recipes/Bibingka";
import BukoPie from "./recipes/BukoPie";

And this is how I use these all I imported:

<NavigationContainer>
        <StatusBar style="auto" />
        <Stack.Navigator>

          <Stack.Screen
            name="Ampalaya"
            component={Ampalaya}
            options={{
              headerRight: (props) => <Logo {...props} />,
              headerTitle: "Back",
            }}
          />
          <Stack.Screen
            name="AdobongSitaw"
            component={AdobongSitaw}
            options={{
              headerRight: (props) => <Logo {...props} />,
              headerTitle: "Back",
            }}
          />
          <Stack.Screen
            name="BananaQue"
            component={BananaQue}
            options={{
              headerRight: (props) => <Logo {...props} />,
              headerTitle: "Back",
            }}
          />
          <Stack.Screen
            name="Bibingka"
            component={Bibingka}
            options={{
              headerRight: (props) => <Logo {...props} />,
              headerTitle: "Back",
            }}
          />
          <Stack.Screen
            name="BukoPie"
            component={BukoPie}
            options={{
              headerRight: (props) => <Logo {...props} />,
              headerTitle: "Back",
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>

CodePudding user response：

You can do like this

import {Ampalaya, AdobongSitaw, BananaQue, Bibingka, BukoPie} from "./recipes";

CodePudding user response：

You can import many components using Curley brackets {}

import { a, b, c, d } from '../your file name'

CodePudding user response：

As an option you can create index.js file in "Screens" folder, then in file make all exports like:

// index.js
export * from './Home'

// Home.js
import react from 'react'
import {View, Text} from 'react-native'

export const Home = () => {
  return (
   <View><Text> Home </Text></View>
  )
}

export default Home

// App.js
import {Home, Banana, etc} from './Screens'

Or import like:

// Home.js
import { StyleSheet, Text, View } from 'react-native';
import React from 'react';

export const Home = () => {
  return (
    <View>
      <Text>Home</Text>
    </View>
  );
};

export default Home;

const styles = StyleSheet.create({});

//index.js
export * from './Home'
export * from './Banana'`

App.js:

import React from 'react';
import * as Screens from './screens'

const App = () => {
  return (
      <Screens.Home />
  );
};

export default App;