---

Introduction

This post is intended to explain some differences between the world of web and mobile development with React.

When we talk about React the first thing that comes to most people’s minds is is React in the web world, but in fact the React library is only for creating not necessarily only for web, it can be used to create interfaces for mobile phones for cell phones, Windows and even more recently for Mac.

Similarities

Both use React, so concepts like props, state, component, lifecycle and hooks hold true no matter what platform. We can also use libraries that don’t use browser-specific things, such as state such as state managers.

import React, { useState, useEffect } from 'react'

const App: React.FC = (props) => {
  const [state, setState] = useState('')

  useEffect(() => {}, [])

  return (
    // UI
  )
}

Since we both use JSX, the above component is valid in both React web and React Native.

Differences

Elements

When we program for React on the web we use the HTML tags, such as <div>, <p>, <input> and other tags. In React Native we need to use native components like <View>, <Text>, <TextInput> and other components.

Web:

import React, { useState, useEffect } from 'react'

const App: React.FC = (props) => {
  const [state, setState] = useState('')

  useEffect(() => {}, [])

  return (
    <div>
      <h1>Hello World</h1>
    </div>
  )
}

Native:

import React, { useState, useEffect } from 'react'
import { View, Text } from 'react-native'

const App: React.FC = (props) => {
  const [state, setState] = useState('')

  useEffect(() => {}, [])

  return (
    <View>
      <Text>Hello World</Text>
    </View>
  )
}

Note: All text in React Native must be inside the Text component.

Styles

When we talk about application styling we think of css and yes React Native also uses css to style the application with a few less properties and some specific ones as well. Another big difference in styling in React Native is that we use a class exported from the package itself to create the styles.

Web:

.main {
  margin-top: 10px;
  color: #fff;
  background-color: #0a0a0a;
}

import React from 'react'

import './styles.css'

const App: React.FC = () => {
  return (
    <div className="main">
      <h1>Hello World</h1>
    </div>
  )
}

Native:

import { StyleSheet } from 'react-native'

const styles = StyleSheet.create({
  main: {
    marginTop: 10,
    backgroundColor: '#0a0a0a',
  },
  text: {
    color: '#fff',
  },
})

import React from 'react'
import { View, Text } from 'react-native'

import styles from './styles.ts'

const App: React.FC = () => {
  return (
    <View style={styles.main}>
      <Text style={styles.text}>Hello World</Text>
    </View>
  )
}

With these examples we can take a closer look. While on the web we use css in its traditional way, in React Native it is created inside an object, so we use numbers instead of a value with px and the properties are in camelCase. Another nice thing to note is that while on the web we have style inheritance inheritance from parent element to child in React Native this doesn’t exist, so to assign a color directly to the text we have to create a new key with this attribute.

Remember that to standardize styling across platforms we can use CSS in JS libraries like emotion and styled-components.

Routing and Navigation

This is a more complex topic to explain, because there are some packages that are more used to create routes in both platforms and some others that some people prefer. people prefer, so I will explain based on what I use and what I see the community use.

On the web today the most famous route package for React is react-router-dom, while in React Native the most famous package is react-navigation.

Web routing with react-router-dom (v5):

import React from 'react'
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'

const About: React.FC = () => <h1>About</h1>

const Home: React.FC = () => <h1>Home</h1>

const App: React.FC = () => (
  <BrowserRouter>
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>
    <Switch>
      <Route path="/about">
        <About />
      </Route>
      <Route path="/">
        <Home />
      </Route>
    </Switch>
  </BrowserRouter>
)

Routing in React Native with react-navigation:

import 'react-native-gesture-handler'
import React from 'react'
import { View, Text } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

const HomeScreen: React.FC = () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Home Screen</Text>
  </View>
)

const Stack = createStackNavigator()

const App: React.FC = () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  </NavigationContainer>
)

Platform-specific codes

As you might expect there are things specific to each platform that that require us to study the platform in more depth beyond the technology of the framework. As in the browser we have to worry about the final bundle of the project, SEO and we have available APIs such as windows, localStorage, DOM, WebRTC and many others, in the native development world there are also specific things like a class called Platform to tell you what platform the application is running on, Animated for creating animations, Dimensions for entering screen sizes, and other peculiarities.

An interesting example to note in this post is that React Native already provides a virtualized list that helps a lot in rendering various elements when it comes to performance.

On the web we can show values from a list with a map:

import React from 'react'

const users = [
  { id: 0, name: 'André Zagatti', age: 23 },
  { id: 1, name: 'John Doe', age: 26 },
  { id: 2, name: 'Fulano', age: 31 },
  { id: 3, name: 'Ciclano', age: 43 },
]

interface ItemListProps {
  name: string
  age: number
}

const ListItem: React.FC<ItemListProps> = ({ name, age }: ItemListProps) => (
  <li>
    <p>{name}</p>
    <p>{age}</p>
  </li>
)

const App: React.FC = () => (
  <ul>
    {users.map((user) => (
      <ListItem key={user.id} name={user.name} age={user.age} />
    ))}
  </ul>
)

In React Native we have a virtualized list component in the package itself:

import React, { useState, useEffect } from 'react'
import { View, Text, FlatList } from 'react-native'

const users = [
  { id: 0, name: 'André Zagatti', age: 23 },
  { id: 1, name: 'John Doe', age: 26 },
  { id: 2, name: 'Fulano', age: 31 },
  { id: 3, name: 'Ciclano', age: 43 },
]

interface ItemListProps {
  name: string
  age: number
}

const ListItem: React.FC<ItemListProps> = ({ name, age }: ItemListProps) => (
  <View>
    <Text>{name}</Text>
    <Text>{age}</Text>
  </View>
)

const App: React.FC = () => (
  <FlatList
    data={users}
    keyExtractor={(user) => user.id}
    renderItem={({ item: user }) => (
      <ListItem name={user.name} age={user.age} />
    )}
  />
)

Conclusion

It is indeed possible to use the knowledge created by coding in one of the two platforms to make projects for the other. I say from experience that it is possible to work in both fields and develop sensational applications and sensational applications and sites.

But one thing I can say is that being an expert in everything that exists in both platforms is very difficult and takes time, even today things come up that surprise me and things that surprise me and I have to go after answers, especially in the world of React Native Native that is very delicate because it deals with different native codes in more than one platform platform and different companies in the mobile world (Apple and Google).