İ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
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/
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.