First Experiences with React Native

3 minute read

I recently started working on a mobile app for GameDev.net (codename: GameDev Mobile) and settled on React Native as the mobile app framework. I’ve used Xamarin (now in Visual Studio) and implemented native Android applications in the past, so React Native was a new experience for me in mobile development.

About a year ago I went through a Udemy React Native course, but I didn’t use my new React Native skills until now. Luckily it was pretty easy to re-familiarize myself when I decided to jump into the GameDev Mobile app.

I’m just getting started, but here’s a few notes on the experience so far.

Short Iteration Time

The ability to view and refresh my app in a browser or, using Expo, refresh on a WiFi-local device drastically reduces the development cycle time over the traditional build/load/test cycles in mobile development.

The CSS-like, flex-based styling is also a very welcoming and familiar syntax.

Wish I had started with React Navigation

Probably typical, but when I started the app I started with a basic latest topics listing and viewing to (re-)learn how to use React Native in the context of the GameDev Mobile app.

This was fine for basic construction, flow, and reacquainting myself with React, JSX, and mobile, but once I reached the point of putting the screens together with flow as you would expect from an actual application I needed to incorporate React Navigation.

I spent way too much time getting that to work and by the end of it wished I had just included routing/navigation into the app from the start.

Part of the problem was that I had created a custom header and footer for navigation, with the footer being a fixed footer at the bottom of the screen. It’s not obvious with react-navigation that you have to use its header property for a custom header, but the Footer component is treated as a sibling component in the view hierarchy.

It took a while to figure that out (a Stackoverflow post), but basically to get a Footer component working with react-navigation you do something like this:

class MyApp extends Component {
    <View>
        <MyNavigationRoot/>
        <CustomFooter/>
    </View>
}

where MyNavigationRoot is your root navigation component and CustomFooter is your foot component.

I’m still using a custom Header component, but I’m letting the StackNavigator manage it by passing it my custom Header as a property.

React Native WebView

I tried to use it to display the HTML from topics and posts in the forums. Terrible. Like a few things in the Javascript/web world, it doesn’t work as expected or even as the documentation says it should.

So, I went with react-native-render-html. Once I plugged it in the only issue I really had with that one was my own fault - I was passing a StyleSheet for the style property when it just wanted a JSON object.

My WebView issues might have also been user error, but react-native-render-html is working for me and offers some features that simplify the code, so I’ll stick with it for the forseeable future.

State Management

I’ve learned not to setState every time an item is added to a list. Seems obvious, but when you’re prototyping things out you might do this and find that your app runs terribly slow when loading data into a List.

setState triggers a render with React, so if you’re calling it for every item you’re doing a lot of unnecessary work.

Newbie mistake: don’t call setState more than once (back-to-back) when updating one or more state variables. setState takes an object, so pass it all the new states that need updating.

Categories:

Updated: