skip to Main Content

İf possible;

How to get list names of the files of a folder then use that names to create navigation links to pages using expo react native, My code as shown below, I want to add them like Auto Navigator Adder Object from here to pass props to HomeScreen to create navigation buttons.

And I know this question will be answered 8 months later, so thanks in advance. 🙂

App.js

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import HomeScreen from "./src/screens/HomeScreen";
import ComponentsScreen from "./src/screens/ComponentsScreen";
import ListScreen from "./src/screens/ListScreen";
import ImageScreen from "./src/screens/ImageScreen";
import CounterScreen from "./src/screens/CounterScreen";
import ColorScreen from "./src/screens/ColorScreen";
import TextScreen from "./src/screens/TextScreen";
import BoxScreen from "./src/screens/BoxScreen";
import FlexScreen from "./src/screens/FlexScreen";


import listReactFiles from "list-react-files";
listReactFiles().then(files => console.log(files));


const navigator = createStackNavigator(
  {
    Home: HomeScreen,
    Components: ComponentsScreen,
    List: ListScreen,
    Image: ImageScreen,
    Counter: CounterScreen,
    Color: ColorScreen,
    Text: TextScreen,
    Box: BoxScreen,
    Flex: FlexScreen,
  },
  {
    initialRouteName: "Home",
    defaultNavigationOptions: {
      title: "App",
    },
  }
);

export default createAppContainer(navigator);

package.json

{
  "name": "rn-starter-update",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start -p 19000 -a",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/webpack-config": "^19.0.0",
    "@react-native-community/masked-view": "^0.1.11",
    "expo": "~49.0.10",
    "expo-status-bar": "~1.6.0",
    "list-files": "^1.1.4",
    "list-react-files": "^0.2.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.5",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-web": "~0.19.6",
    "react-navigation": "^4.4.4",
    "react-navigation-stack": "^2.10.4"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

I tried list-react-files and list-files packages => non stop loading screen awaits.. So I cant even console log the file names.

2

Answers


  1. I’m not sure I 100% understand, but it sounds like Expo Router might be worth looking into?

    Here’s the link to their documentation: https://docs.expo.dev/routing/installation/

    Login or Signup to reply.
  2. I don’t understand well what you want to achieve but I far as know, you can’t automatically generate your navigation stack in React Navigation.

    Maybe you can try something with the new Expo Router.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search