Building Custom React Native Components From Scratch

Jay Garcia from Modus Create has written another excellent piece of tutorial.

This time he's going to show us how to build
custom React Native components from scratch.

As we discover the rapidly growing world of React Native, we learn that it’s entirely possible to build an awesome application that leverages only the React Native code. While the Facebook team has done a fantastic job of implementing a lot of UIKit out of the gate, it’s conceivable that there will be times when you need to go beyond the boundaries of what React Native out of the box (and soon to be Android Java).
Perhaps you want access to the recently released Apple ResearchKit, or you want to be able to leverage custom networking utilities like AFNetworking. What we’ve learned from our time with React Native is that the possibilities are endless for the developers wanting to take advantage of this capability.

Make sure you check it out, the complete example is also hosted on GitHub.

In a nutshell, this demo application will take a filename as input from a React Native TextInput component. The user will be able to load data from the Phone’s filesystem based the file name.
Upon pressing Save, a random number string will be generated via a simple Math.random().toString() method calls. The Load button performs the inverse, retrieving the contents of the file described in the TextInput and displaying it below. We do all of this as well as some basic exception handling as demonstrated in the animated gif below.

Custom React Native Component