EFFECTIVE PATTERNS FOR REACT NATIVE DEVELOPERS
Hi everyone! Today I want to tell you about some React Native patterns which I use in my applications. You shouldn’t to use them in your apps, but if you React Native developer you need to know about these patterns. So, let’s talk about.
- Stupid components
Do not be surprised, we can say this about any React apps. Views and components of your app should rely on props and callbacks and Container (or smart) components should rely on state. I prefer to use Redux or Mobx
2. Rely on callbacks
If in your app you want to decouple a View from its Behavior you can do it via callbacks. Callback is a simply function; transmission of executable code as one of the options from the other code.
A large part of components should not have behavior. When you want to expose a callback ask yourself the next: Is interaction only important for this particular component, or can it trigger some changes in another part of the app? If you chose the second then you should expose a callback
3. Keep navigation away from your views
There are a lot of navigations. For now I prefer default Navigator, or NavigationExperimental, or React Navigation. Screens and Views are not the same. Your views should not have any knowledge of the Navigation while Screens must know how to navigate (push, replace, pop to screens) and how to communicate with the NavigationBar/TabBar. With this approach, your screens will simply wrap the actual Views with navigation-aware things. For example:
So, FriendsView simply exposes an ‘onSelectFriend’ callback and list of friends, and doesn’t care about what it actually does. FriendsScreen just tell the view to navigate to another screen.
4. Chain callbacks together
Every time one of views exposes a callback which may be declared in another part of your application (such as mapDispatchToProps), first invoke the actual callback passed on props and after Redux can, for example, fetch some data from API.
If FriendsScreen told FriendsView to navigate to the FriendScreen when selecting a one of friend Redux would fetch some data.
So, idea is very simple: Screens know how to navigate, Smart Components know how to handle redux actions and Stupid Views (dumb) are stateless and rely on their props.
5. Keep your reducers declarative and simple
Each developer should understand what it is going in your reducer’s code. If you want to increase readability you need one function per action.
Using one-line functions you can create very simple and flexibility structure of the code.
6. Keep business logic out of your Reducers
You need to understand that your Redux store it is a View Model, not part of your business model. Reducer should only affect the store with changes. When Reducer have the less knowledge of business rules they will become more simple. It is not the best way, but one of them which I recommend to use
7. Keep platform-specific components to a minimum
As we know React Native developers want “learn once, write anywhere”. I want to recommend you not to rush into writing platform-specific components. Usually will be enough conditional operators and simple style-changes. Here one simple function, but very useful for developers:
It is helper function which allows setting styles according to a platform, but it’s example and you don’t need to use it anymore (instead, use Platform.select function).
So, such simple patterns will be very useful for everyone React Native developers. Using them you can create flexible and readable apps