Previous Next

Engineering Spotlight: Building your React Native Component Structure

This past year has been an exciting time working on the DoubleDutch app. From camera upgrades, iPhone X support,  and implementing our new DoubleDutch Developer Platform (DDDP). With the Developer Platform we’ve been able to release multiple new features built entirely in the React framework and better round out our mobile offerings. The Developer Platform has enabled us to release one off requests and in some cases, turn around new features in less than a week. This is only possible with React/DDDP because within one framework we can write/release features for Android, iOS, and the Web.

That’s not to say there has not been a learning curve on building within the platform, learning the quirks of react or needing to make design compromises along the way.

Learning React Native

As a former iOS developer, I personally had a bit of a learning curve; whether that’s now working entirely with JavaScript or picking up React’s Component-State-JSX model, which is quite the change from how iOS apps are built. JSX (HTML meets Object-Oriented Coding) was a great opportunity to refresh myself on building websites and also move away from Apple XCode’s drag and drop component builder. But I found myself struggling without an iOS View Controller (Page View) and had trouble determining what/where I should build new react components.

Over our first few projects I tried a method that resulted in not having enough components and struggling to read my own code. I also had tried to make everything reusable but struggled to manage props/state (how React passes and stores data between app views).


Building “Lost & Found” with React Native

With our new application: Lost & Found, I used all this experience and settled on a new component structure I hope to continue for all our future DoubleDutch projects. For the user our design is similar to what you have come to expect of our other new features but under the hood is this exciting new component structure. I wanted to share this new model with other developers who may be considering building an application on our DDDP platform. I hope these tips make it easier to get started and get your first app released in our marketplace!

So, with that let me explain 3 key learnings about working with React Native component structure:

 

1. CURRENT PAGE VIEW

One common challenge I’ve faced with React is finding the best way to manage page transitions on a multi-page application. To resolve this on Lost & Found I broke each view into top level components that would render dependent on a “currentView” state being managed in the home-view controller. The importance of this is having a scalable framework and letting any button manage a page transition similar to iOS.

Code Example (click & scroll)

 

2. <COMPONENTS><COMPONENTS/></COMPONENTS>

The next big question with React is that within a view there should be a sub-component.

Here I take an HTML-style approach with each view’s sub-components broken into header-body-footer. By following this approach it also helps me determine when we require a new page by asking: is this a new view or just a new header?

Another important structural change on this project is moving away from reusable components while maintaining similar classes and layouts for things like tables, cells etc. From my experience this approach makes it easier to add new features in the future while maintaining the ability to make quick CSS changes.

Code Example (click & scroll)

 

3. STATE

And the last big question with React is where do I manage my states?

With states my goal is to manage everything from the top level component unless it’s hyper specific to a component (ex. An error handler on an empty input within a cell). With state being managed from the top level component this is also where I store any JS function that affects state.

We are excited about the continued integration of React into our mobile offerings and helping new developers build out extensions for our React marketplace. I hope you find these 3 tips helpful in your next react project!

Want to develop custom features for the DoubleDutch app?

Learn more about the Developer Platform

 

By Eddie Stamps | 10 July, 2018

Share This Story, Choose Your Platform!

About the Author: Eddie Stamps

Picture of Eddie Stamps

Software Developer