I’ve spent last 6 months developing React Native applications. It was an amazing experience and I really enjoyed developing native apps for both platforms!

Here are few tips I’ve learned that may help you develop your React Native app.

Use React Native Debugger

For me, the most valuable feature of React Native Debugger is Network Inspect. It saved me a lot of time and allowed to check what’s going on between app and backend API in seconds ⚡️

Use HTML renderer instead of WebView

WebView is an obvious choice when it comes to displaying HTML content in mobile app. But it has a lot of downsides:

• UI becomes “jumpy”, since content inside WebView renders with a delay
• it’s hard to make WebView have height of it’s content - there’s a workaround, but it seems like an overkill for me
• some bugs will eventually come up - in my case sometimes external links were opening inside a WebView instead of browser, even though they were intercepted and blocked properly. Also, there was a weird bug on some Android phones, when WebView content was scaled down and text was way too small.

Instead, much better choice would be react-native-render-html or react-native-htmlview. Those libraries render HTML content as native elements, which solves all the downsides described above.

Avoid && conditions in JSX

Consider this example:

{
  data.description && ( // ⚠️What if `data.description` is an empty string?
    <Description value={data.description} />
  );
}

React in web will just render an empty string. But in React Native text node should be rendered inside of <Text> component, otherwise you’ll see a blank screen.

Instead, use ternary operator for this case:

{
  data.description ? ( // ✅Empty string is falsy, so it will return null
    <Description value={data.description} />
  ) : null;
}

Note, that && works just fine in React Native, if expression resolves to a boolean, null or undefined.