Web Developer Uses React Native to Code New App: Here’s What Happened
Dan Nelson recently gave us his review of React Native to post in the RTS Labs blog.
I admit it. I was skeptical at first.
How can one coding tool be so different and make it so you can code for iOS and Android at the same time?
Because, as a JavaScript-coding, front-end-designing web developer by trade, I’ve seen what happens when you try to generate one set of code to use across platforms. Heck, I’ve seen what happens when you’re just trying to design something that will work across the latest versions of Internet browsers.
It ain’t always pretty.
So how was React Native (from Facebook) going to make it so when you code mobile apps, they would respond as if coded in a native iOS or Android language – without me having to learn a whole new programming language?
Spoiler alert: While my project had its ups and downs, I was pleasantly surprised in the end with the usability factor of React Native and how my final project turned out.
So, I, a web developer by trade, used React Native to code a new app. Here’s what happened …
My Project
My mission: to create an app that people can use to upload verification documents, such as proof of income, birth certificates, etc., when applying for services from our client. Applicants will take pictures of the documents they need. Then, they can upload the pictures and continue with the application process. And naturally, having this app available for all smartphone users is best.
Getting Started
As I’ve stated, I’m a JavaScript man. So while I was dubious about how it would work, I was excited that I’d be able to code in JavaScript, and React Native would run my code through a JSX compiler that would then turn my code into native code for different environments.
In the beginning, the learning curve was steeper than I thought it would be – but that’s not necessarily all bad. The learning curve was higher because React Native forces you to understand what you’re doing with it. That’s not the case with a lot of coding tools. Take AngularJS, for example. You can develop something in Angular and make changes in it without completely understanding what you’re doing. You’ll figure it out as you go. If you’re not doing things right in React Native and don’t understand what you’re doing, it won’t play well.
However, while that’s frustrating in the beginning, it’s actually one of the things I like best about the program now. Having to really learn React Native gives you cleaner code and a cleaner product in the end. And once I had it, I had it. Things clicked really easily once I got it. It only took about two weeks to get comfortable with it. That’s a little more time than it might take to get comfortable with some tools, but now a lot of it makes sense and is pretty easy to use.
So, while React Native feels more strict, so to speak, because it really forces you into a box and makes you do things in a specific way, that’s good, because you get used to working with it, learning the components, and framing the application the right way. React Native forces you into best practices.
Taking Care of Business
Once I got rolling with React Native, here’s what I really liked about it and how it helped my project …
Flexibility
It was pretty amazing to be coding for Android and iOS at the same time in a language I’m already familiar and comfortable with. Obviously that’s a huge time- and money-saver, because I didn’t have to spend a lot of time learning a new language or coding things multiple times. But more than that – it gave me a lot more flexibility and freedom, because I wasn’t held back by the limitations of having to learn a whole new coding language. I was able to draw on all the experience and knowledge I’ve built up to this point.
Responsiveness
React Native actually turns your JavaScript code into native elements for Android and iOS. And that makes your app work a lot better. With some tools, such as AngularJS, instead of rendering native elements, you’re rendering a webview – and a webview isn’t always going to respond as well as native-coded elements. And that means you’re not going to have the control you’d like over how your app responds, nor will the final product be as clean. React Native seems to solve for this problem – mostly. (There’s a bias towards iOS users in React Native, but more on that later.)
Clean execution
Typically, each component should have its own file. The benefit is that when you’re styling each component within the file where you’re defining it, you can take components from one project and use them in a different project altogether without messing up other pieces of your coding. Yes, you can do similar things in AngularJS. However, people often separate all the styles and the functional pieces, so it can be hard to pull pieces from another project without having to do a lot of work to get them to fit with what you’re currently coding.
With each React Native file, it’s easy to format the components into four pieces:
- Declare the components you want to include (including JavaScript libraries)
- Define the component – what else does the component need to be able to render?
- Decide on how you want to style the component.
- Export or add the component to your project.
Every part is self contained. Keeps everything clean and reduces re-work later. Want to use a button from another project that you’ve already coded? You can do that more easily with React Native without having to reinvent the wheel – or the button, in this case.
Compatibility and testing
This last one may be specific to web developers, but testing seems like a dream compared to web testing. We have to test for every version of every browser across devices, and things constantly break or work differently. It’s this very lack of standardization that makes apps so popular, particularly for phones and tablets. What a breath of fresh air it is to design something and then only have to test it in two environments – iOS and Android. I mean, yes, you should test on different phones and in different versions of iOS, but generally, if a program works on one iPhone, it should work on the majority of the other ones. And THAT is incredible.
Flexbox
Flexbox can be a fabulous tool that makes things such as centering (which is notoriously difficult in web apps and on websites) easier. The problem is that web support isn’t consistent with Flexbox. It just doesn’t always respond the way you want it to. On the other hand though, Flexbox does work well when developing natively. Since React Native is rendering native elements from your coding for each environment, Flexbox suddenly becomes a much more useful tool. That was a welcome surprise.
The Drawbacks
It wasn’t all wine and roses with React Native. There are a few drawbacks to be considered. None of these should be deal breakers, and many of the negatives are really more a product of working with a new tool that is still working out the bugs and building up a community for help and support.
That can actually be one of the positives, too, if you like to be at the forefront of new tech things. You have an opportunity to make your mark and make significant contributions to the future development and improvement of React Native.
Stuck with what React Native gives you
For all its advances, React Native is still in its infancy. That means that unless you want to learn how to develop natively, you’re stuck with what React Native gives you out of the box or what other people have written and posted online to share.
The community of React Native users is growing, and there’s a lot of interest in React Native right now. However, a number of people are developing packages for React Native in their spare time. That can mean if there’s a bug, the response time to fix it can be slow – from community users and from React Native. Like I mentioned before, it’s an exciting time to be working with React Native, because you can be involved, help find and fix bugs, and contribute to defining this eco system. But it can also be frustrating if you have to wait on others to finish something you’re building or if you have to clean up these bugs yourself.
Speaking of, that leads me to my next warning to React Native coders …
Updates
Updates are one of the most frustrating things about React Native right now, because getting React Native updates can break what you’re working on. Facebook seems to be addressing this issue by changing the way they handle version numbers and making a commitment to not pushing breaking API changes.
On top of that, people who are developing packages for React Native and putting them out there for the public don’t necessarily update the components right away. So, when you’re downloading packages, you have to see what version of React Native that package is for and compare it to the version you’re working in. You may also have to backtrack and see what packages you’re using whenever you update React Native, because you may find they don’t work right any more after you’ve upgraded.
Documentation and support
The documentation for React Native feels incomplete. There’s lots of documentation, but it’s lacking in certain areas. You can’t just sit down, read the documentation, and expect to be able to do what it was you were looking to do. It makes the initial learning curve harder. The best way to figure out how to do stuff in React Native is to dig through tutorials other people have posted in YouTube and other social media.
There also seems to be more support for iOS-related components than for Android, which has been frustrating. However, as the user base for React Native grows, I expect the Android support will improve, too.
People assume that because someone has written a component for React Native that the component supports iOS and Android. However, that’s not always the case, so user beware! Always check to make sure your package supports Android and iOS and that it works with whatever version of React Native you’re in.
Forms
Forms are really difficult in React Native. Forms are generally difficult in any environment. However, forms don’t have as much support in React Native as they should. One example of an issue I had was with the keyboard getting in the way of data inputs. The inputs wouldn’t always scroll to a location above the keyboard while typing. I had to implement lots of workarounds in order to get my forms to work. Definitely will be looking for more support for forms from React Native and the community at large.
Community
The growing community of users is one of the best, most exciting parts of using React Native. Like I said, if you like being at the ground floor of something that is already revolutionizing the app development industry, then this is the place to be right now. A lot of the most helpful information I got during the learning and coding process was from other users.
One of the best things from the community are packages. Nearly every day, people who know iOS or Android languages create packages – components that will help you add a camera to what you’re doing, render special buttons, or load animation faster, just to name a few examples. People put these packages on GitHub. Then, you can use Node Package Manager to insert them where you need them. It’s a pretty smooth process and very helpful. Saves a lot of time and helps create a better product in the end.
Thumbs up
Overall, I liked working with React Native. It was surprisingly easy once I got over the initial hump. I liked it better than some web development I’ve done, because it’s easier to test. I wish there were more support for Android. React Native seems to be taking an iOS-first approach and working out Android issues later – which is great for iOS but not so much for all the Android users out there. You have to make sure the components you’re using have Android device support built into them. It may not even be an issue a year or so down the road, but it’s something to consider for now.
React Native is very much in the early adopter stage, which always inherently poses a risk. But – it also poses an opportunity, because React Native is unique in what it does. React Native has the potential to be a real game-changer.
Have questions? Contact RTS Labs and put “Dan Nelson-React Native” in the subject line to ask follow up questions about React Native and to share your experiences.