I am creating an inventory tracking/event management software for internal use with my AV company using Expo/React Native. Looking at navigation and data exchange between screens, and it seems that everyone has a strong and differing opinion on how this should be handled. I’d like to learn what the preferred approaches/best practices are and why.
I have a database storing 3 main types of data: Gear, Technicians, and Events. The app has 3 screens as separate components:
- Inventory, an inventory tracking sheet. This will use Gear and Event data so that I can determine when a piece of Gear is available etc.
- Calendar, a calendar view of upcoming Events. This will use Events, Gear, and Technician data so that I can filter by what Gear is being used by an Event and what Technician is working, etc.
- Finance, several balance sheets to track finances. This will use Gear, Event, and Technician data so that I can get information about Technician rates, Event income, and Gear expenditure.
As you can see, almost all screens need access to all data. Right now, I’m pulling down the data from Firebase in my index.tsx. Index will not have a visible component, the “home” screen will default to calendar and I am implementing a nav bar to switch between the three screens (using expo-navigation or react-native-navigation). I’m using index purely to handle navigation between screens and fetch/organize/update shared data between the screens. I will implement logins/permissions eventually.
What are some best practices for these screens to exchange/share information? I’ve identified a few recommendations.
- Global variables: Storage in a separate globals.tsx for Gear, Technician, and Event lists with getters and setters so that index can pull down and parse data to store it there, and the individual screens can utilize it. It seems that some manage this with tools like Redux/Flux.
- Passing data via routes: With navigators like react-native-navigation, parameters can be passed between screens. Index.tsx would still act as storage/distribution for the data.
- Independent components: Each component pulls the data it needs independently. Index only handles navigation. Multiple screens would pull the same data on the render of each.
For each of these, some say never to do it, and other sware by it. I’ve also been advised against using an index file at all (navigation is handled by the screens between themselves, data is pulled by each component as needed). Is there an advantage to having a centralized navigation and data distribution handler like index? Isn’t an index file necessary? Is it best practice to treat it as a parent from which everything obtains data, or the main entry point which pulls data and components from elsewhere?
I’m not sure why I got a downvote, please leave a comment if I’ve missed something. I understand I have not included code but rather described my project structure, if this is an issue or I’ve formatted this incorrectly let me know, I am learning. Thank you knowledgeable people!