My Challenges with React Native: Blog post 2
This post will focus on the challenges associated with the structure of native applications and the rendering of sub-components inside a main component
Recap: My last post explored the basics of React Native and the associated challenges with installation and online resources
Focusing on the structure of our project
Understanding the structure of the project in React Native is essential, especially if you intend to have over 20–30 screens (as most mobile applications do). For small applications one can separate the screens based on actions or flow. Ensure that the components that are connected to each other are easy for you to find and identify. This is especially useful if you make a change that affects several other components. Otherwise, you might spend several minutes trying to understand how your code connects each time you work on your project.
Something I found useful for myself was constructing diagrams for how I want my project to be structured and how I want my components to interact. For example, if I am building a calendar for all the events hosted by my club. If a person just wants to view the public events, they don’t need a login. However, for a person to be able to create events they must be able to login to the app. A person who can login also has access to all the features that belong to the person who cannot login. This logic, though very simple, could create challenges when structuring the components and keeping track of how they are being rendered.
Rendering external sub components into one single app component
It took me a little bit of time to understand how to import elements from other components into our main component. Thus, I’ve used a screenshot of simple native code to demonstrate how use subcomponents into our main App.js component. Assume you have a component Main.js that you would like to call in your App component. There are two steps -
- At the top of the App import Main from ./Main (this would depend on your structure).
- If Main.js was within a folder titled Components this import statement would say import Main from ‘.Components/Main’
2. Call Main inside the render portion of the App component using <Main/>, usually after any specific code that is being rendered inside the return statement
