Working in React Native for the last three years I've learned so much -- not just about RN, but about how to build applications so that they're easy to update and change. Because, regardless of how great your first iteration is, there will be API updates, there will be design overhauls and you want these changes to be as easy on you, your team, and future developers as possible.
From when I started working in version thirty-something of React Native to now, it's a totally different ballgame in terms of the barriers you have to deal with in development. That said, there are a set of tools I have learned to depend on in every app that I build -- whether it's just for one platform, or both.
What these tools have in common is that they make app-wide changes very fast, save you time in the short- and long-run, are simple, don't require complicated tooling and can be easily learned by everyone who touches the code.
Make Your Icons a Custom Font
There are many benefits to using a custom font over images for icons in an app and I would encourage you and your team to take the time to do it. You can use third party services like Icomoon or Glyphter. Upload svgs, and they spit out font files like .ttf -- and then you install these fonts in your app. I've used and adapted version of this for several apps in order to display your new font as a component.
Since your icons are all Text components, instead of images, you can change the colors, sizes, background colors and positions the same as you would with or components, plus you don't have to carry around a bunch of image files in your app.
Use a Responsive Library for Width & Height
Trying to get everything to look right on iOS and Android, let alone on all the models of those devices, is a real pain. I'm a huge fan and have had great results with Marudy's responsive library.
I've used it on multiple apps and it translates really well, plus it's easy to use. What I usually do in practice is take the design element's width or height (say a button 75px wide), divide by the design's sample app width or height (say 375px wide) and come up with a percentage. Using that button as an example, if it's an iPhone X, which has a width of 375, your code will be: {width: wp('20%')}.
Create an App Text File
I've found that importing strings as variables all over your app, while sometimes a pain when you have to import eleven-ty-billion variables for a form, is ultimately clean, efficient and easier than using strings. For example, if you need to make an app-wide change a label or button, it's lightning fast because you only have to do it in one place, here's an example: export const NEXT = 'Next';
Create a Colors File
Similar to the app text, creating a color map that you can use for all your colors (which in my experience will inevitably change) will save you tons of time. I create a Colors.js file where I define all of my colors in an object either by hex or rgb values, then I import that Colors object into my file and use that to color text, buttons, backgrounds and everything in between. This way, when your shade of blue changes, you change it in just one place and it is reflected all over your app. Here's an example of the Colors.js file:
export const Colors = {
black: '#000000',
white: '#FFFFFF',
};
And here's an example of it in use:
textColor: {
color: Colors.black,
},
Update React Native as Often as Possible
Even though upgrading React Native has gotten so much simpler (a huge shout out to all the contributors for making this happen!!), it can still be quite a task to change versions. Most recently I had a hard time moving from 61 to 62, so I urge you to keep an eye on the new releases of React Native, and bake in upgrading (both platforms) to your development cycle. If you don't, what will most likely happen is that you'll need to upgrade for one reason or another and you'll have to do it in a time crunch, and nobody needs that kind of stress in their life.
I follow various React Native folks on Twitter, including the official accounts, and periodically check the React Native blog to keep up to date on these releases. If you'd like more info on the folks I follow, or details on any of the suggestions above, feel free to ping me on Twitter, @sarachicad .
Top comments (0)