Making the Switch

I’ve been working with React Web for the last 6 years of my dev career. I’m most familiar and comfortable in this space and enjoy working with React. However, I was presented with an opportunity to move into mobile development towards the end of 2023. Having zero professional mobile development experience on past projects, I knew I needed to ramp up fast if I was going to be able to seize this opportunity. I was excited to take on the challenge!

I have plenty to learn, but I wanted to share some of the interesting things that I have learned along the way. I also wanted to share this with a perspective since I’m already comfortable with React. Just how much is there to learn in order to be a successful contributor on a React Native project?

Existing React Knowledge I Leveraged

Components! It’s still React.

You have functional components that return stuff. These components have access to the same hooks you are familiar with (useState, useEffect etc.) which means you have the same state management/rendering. The “stuff” I mentioned above is JSX, a familiar syntax. You can also leverage Redux for global application state. All of the things I mentioned have very thorough and reliable documentation as well. Bringing all of this to the table when you pivot to React-Native gets you over 50% of the way there.

The New Bits

There is no DOM. But that’s OK! Because you were already leveraging JSX instead of HTML anyways. The JSX you use for React Native is almost identical, except with no HTML elements.

Example code snippet (Source: https://reactnative.dev/docs/tutorial)

import React, {useState} from 'react';
import {View, Text, Button, StyleSheet} from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text>You clicked {count} times</Text>
      <Button
        onPress={() => setCount(count + 1)}
        title="Click me!"
      />
    </View>
  );
};

// React Native Styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

There are only 2 things in the example above that differ from web:

1. Unique React Native Core Components
2. Styles are created with a different syntax

Additionally, there is also no baked in browser support (no console or network tab). So, debugging your app by default is a bit more complex. Fortunately, there are tools out there to bridge the gap. Flipper will help with seeing your console logs similar to what Chrome would do on web. For inspecting UI elements you can hit a hotkey from your simulator command + control + z and see a helpful menu Show Element Inspector.

Additional Considerations

• There are components referred to as Core Components. Surprisingly, there aren’t a ton, and you can accomplish a lot with only learning a handful. These will be your primary components you use in place of HTML looking JSX from web.
• There is no CSS. You can set up styles in a similar fashion via a styling API which is passed into individual JSX elements via a style prop which has a similar look to web. Your styles do not cascade like they would with CSS by default; but there are ways around this too.
• You have access to physical hardware on the phone (the camera). You can leverage location services as well as share content via the native OS share prompts.
• The biggest shock to switching to React Native and mobile in general, application deployment is more complicated. Instead of deploying your built code to a web server you now must play ball with Apple and Google for them to host your app within their store. Which means instead of deploying to a web server, you have to deploy twice for mobile. One for App Store Connect and another for Google Play.

Final Thoughts

I covered the details I encountered on my journey from web to mobile. It’s important to spend time learning what the React Native API offers for you in place of the DOM elements you are already familiar with. I hope this helps anyone planning to get into mobile development.

For more information about Perficient’s Mobile Solutions expertise, subscribe to our blog or contact our Mobile Solutions team today!