'Importing files outside my App.js - React Native

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>

react-native import

Solution 1:^[1]

You can do like this

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

Solution 2:^[2]

You can import many components using Curley brackets {}

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Omar Keshk
Solution 2	Jeremy Caney

'Importing files outside my App.js - React Native

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]