React Native Effective Patterns – The Poli – Medium

React Native Effective Patterns  #software #mobile #javascript #reactnative #react #reactjs

  • Your views and components should rely on props and callbacks.
  • The idea is simple:Screens and Views are not the same.
  • FavoritesScreen uses that callback to tell the view to navigate to another screen.
  • Keep your callbacks chained togetherEvery time one of your views exposes a callback which may be declared in another part of the app (for example, mapStateToProps), first invoke the actual callback passed on props.
  • This enables you to, for example, Navigate to a screen and also fetch some information to feed the next view.Following the previous example, if FavoritesScreen told FavoritesView to navigate to the FavoriteScreen when selecting a Favorite, Redux would honor that, but also invoke some Redux actions.As you may see, every realm knows how to handle its stuff: Screens know how to navigate, Connected Views know how to handle redux actions and Views are dumb, stateless and rely on their props.5.

I’ve been working with React Native for quite a while now, both professionally and personally, and actually enjoy it. In this article I will describe some patterns I use. Keep in mind that whatever…

@ReactDOM: React Native Effective Patterns #software #mobile #javascript #reactnative #react #reactjs

I’ve been working with React Native for quite a while now, both professionally and personally, and actually enjoy it. In this article I will describe some patterns I use. Keep in mind that whatever works for a team, won’t necessarily works for another. Also, many of the examples doesn’t work by themselves (they are isolated parts of code)

1. Keep most of your components stupid

This is true for any React application. Your views and components should rely on props and callbacks. Container (smart) components should rely on state. I recommend using Redux, but in some applications you can get away using plain old setState. MobX is a great alternative too.

2. Always rely on callbacks

When learning how to code iOS apps in Swift, I was thought to use the delegation pattern to decouple a View from its Behavior. In React Native, the same effect can be achieved via callbacks. Callbacks are simply Arrow Functions which can be passed to a component. The component has the responsibility to execute them, but doesn’t need to know what is actually doing.

Most component should not have any behavior. Expose simple callbacks. Callbacks are like the public API of your components. You should know when they’ll be executed by reading their names. If you are developing an e-commerce app, for example, names like onSelectProduct or onAddToShoppingCart are very declarative.

3. Keep your navigation stack away from your views

For this particular application, we were able to migrate from React Native’s default Navigator, to NavigationExperimental, to React Navigation. Those changes involved a few lines of code. The idea is simple:

Screens and Views are not the same. Your views should not have any knowledge of the Navigation Stack whatsoever. On the other side, Screens (or Routes, depending on what name you prefer) must know how to navigate and be aware of thinks like the Navigation Bar. With this approach, your screens will simply wrap the actual Views with navigation-aware things. For example:

As you can see, FavoritesView simply exposes an ‘onSelectFavorite’ callback and doesn’t care what actually does. FavoritesScreen uses that callback to tell the view to navigate to another screen. This gives you the flexibility to replace the way your navigation stack works and provides a nice separation.

4. Keep your callbacks chained together

Every time one of your views exposes a callback which may be declared in another part of the app (for example, mapStateToProps), first invoke the actual callback passed on props. This enables you to, for example, Navigate to a screen and also fetch some information to feed the next view.

Following the previous example, if FavoritesScreen told FavoritesView to navigate to the FavoriteScreen when selecting a Favorite, Redux would honor that, but also invoke some Redux actions.

As you may see, every realm knows how to handle its stuff: Screens know how to navigate, Connected Views know how to handle redux actions and Views are dumb, stateless and rely on their props.

5. Keep your reducers simple and declarative

Any developer should be able to view your reducer’s code and understand what is doing. In most cases, having one function per action type can increase readability.

Composing your reducer functions with many one-line functions can give you greater flexibility and code reuse.

6. Keep platform-specific components to the minimum

Don’t get me wrong, every platform has its own Design/UX language and in some cases you have to write different versions of a component. But in many cases, simple Style-changes and conditional operators are enough. I’ve created a simple helper function called platformSpecific which allows me to set styles according to a platform.

It’s a really simple function, but I use it a lot.

It doesn’t matter if you use these patterns or not. The most important thing I want to say is: Keep things simple and separated. That would increase productivity and allow easier testing. Many of these patterns achieve that.

React Native Effective Patterns – The Poli – Medium