Refactor folder structure - add 𝚜𝚛𝚌 folder

Part ɪɪ: React-Native UI│Story 05: Refactor folder structure - add 𝚜𝚛𝚌 folder

GIT : Repo | Feature/Story branch| PR

In the previous posts, we initialized react-native project and then configured ESLint/Prettier for code linting and formatting. In this post, we would quickly refactor the default scaffolded folder structure to add a src folder under which we would maintain our source code.

Enable Live Reloading of our app on simulator

Before we start making changes to our code, lets first enable hot reloading on the simulator. (Live reload vs Hot Reload)

(For Android simulator, the React-Native Developer menu can be brought up by clicking anywhere on the simulator and pressing ‘cmd + M’ buttons.)

𝚜𝚛𝚌 folder

We will keep all our source files under src folder except index.js:

• Open project in your code editor
• Create a folder src under the project’s root folder
• Move the file App.js from root folder to the above create src folder
• In index.js, update the path for import for App and save the file👇

Edit App.js a little bit just to make sure our app still running good after we moved the file to new src folder. Hot reloading should refresh the app on the simulator reflecting the changes made in App.js.👇

Nice, now we have the src folder where we would add all code files/subfolders.

In the next post, we would add Google Sign-In to our app’s iOS platform.

← Prev:ESLint/Prettier┈🏠┈ Next:User Sign-in Component→