How to structure the react project?

Hi all. Not so long ago started to learn React Native, but there was a small question about the project structure.

At first, I somewhere saw and followed a similar scheme: all components are divided into folders, which was also the file with the styles for a component and various dependencies (icons, pictures, etc.). But eventually it became not very convenient, for example, when using the same classes and styles in different components, because to duplicate them does not want, and then styles for the component will be scattered throughout the project. Or, for example, the problem with the logo, which is in the directory component Header, but then there is a need to use it for a component Footer.

Perhaps there is some optimal solution to this problem?
March 20th 20 at 11:47
4 answers
March 20th 20 at 11:49
Solution
make a folder shared (or like) for where to put all that you want to use different components.
If you need something somewhere to move - it is not a "problem", it's okay, take and carry, the app has changed the optimal structure is another.
March 20th 20 at 11:51
Total in app/assets, private in app/components/assets
March 20th 20 at 11:53
I prefer the feature-first approach, when everything related to a particular feature lies in a separate folder. The situation you described occurs regularly, and this is the case when you need to do a refactoring and make the common functionality into a General folder, which will be the dependence for all who use it. There is nothing wrong, it is common practice. Importantly, the fact that you stand in a relationship was an independent entity, and not just one variable or function. Logo - it is a separate entity. Set of icons, animations or the overall style of the rules used by other components is also quite a separate entity.
In the long term can be a set of common components to make a separate repository and yarn/npm module, but it is not necessary to hurry.
Another thing, when one independent features appears dependent on the other not related directly features is not always good, is better to make the common functionality into a separate feature, to these two from her obviously depended.
March 20th 20 at 11:55
Src
-components
--form
---input
---button
---...
--...
-compositions
--header
--footer
--...
-domain
-containers
--auth
---resources
----default.png
---...
--navigator.js
-services
--api
--store
--styles
-config

Find more questions by tags ReactReact Native