I like Android a lot, so I name src and res to match its folder conventions. Since styles are just JavaScript objects, we can just share comment styles in library. That’s why I don’t use styled-components. This fits the feature approach we are aiming for. React has inline style - it’s like using JavaScript to define script, HTML and CSS. A component is where we define view, style and behavior. The thing I like about React is the components. Only add a dependency when you really need it, otherwise you are just setting yourself up for more trouble than value. And I’m not a fan of redux as it adds unneeded complexity. In my project I use just react-navigation for navigation. Since React Native is heavily dependent on tons of dependencies, I try to be pretty aware when adding more. Inside src I have res for resources, library for common files used across features, and screens for a screen of content. My typical project structure based on features looks like this: the traditional files App.js and index.js and the ios1 and android folders, I put all the source files inside the src folder. If we wanted to move the sub feature around, it would be easy, as all related files are already grouped together. A feature can contain sub-features as long as they belong to the same flow. Check out this article to learn more.Ī feature can be related to login, sign up, onboarding, or a user’s profile. And test files should stay close to the source files. Files related to a feature should be placed together. Group by featureĪ more reasonable solution is to organise files by feature. It’s also a pain if we plan to make a framework out of our project, as files are spread across many places.
Many times we work on a feature, and finding files to fix in multiple directories is a hassle. Organising files by type is for a machine, not for a human. This is general for all projects, but it does not answer the question “what is this project about?” Is it news application? Is it a loyalty app? Is it about nutrition tracking? This way, we can see the type of each file, and easily run a script toward a certain file type. If it is view, there are JavaScript, HTML, and CSS files. If it is Redux, there are action, reducer, and store files. If it is a component, there are container and presentational files. Separating by type means that we organise files by their type. ios/Īs someone who has worked with native on both Windows Phone, iOS and Android, I find that structuring a project all comes down to separating files by type or feature type vs feature
There is the ios folder for Xcode projects, the android folder for Android projects, and an index.js and an App.js file for the React Native starting point. Hope you learn something.įor a project bootstrapped with react-native init, we get only the basic structure. This of course is not written in stone, and you are free to apply only the pieces that suit you.
In this post, we will go through how to structure a project and how to manage local assets. It all depends on your personal taste and the project you’re working on. React and React Native are just frameworks, and they do not dictate how we should structure our projects. By Khoa Pham How to structure your project and manage static resources in React Native Source: