React vs React Native

Written by DeVontae Moore

A common question I get from experienced React developers interested in React Native is, what are some of the

differences between React and React Native. I will explain some core differences in today’s article. This will not be an

exhaustive list but it will be a great starting point for those interested in learning about React Native. You can follow along

with the React Native examples by copying and pasting code in a tool called Expo snack found here!

View vs div

A div element is a common component in a traditional React project. It’s main purpose is to control where its children will

reside. The same is true for React Native’s View component. It’s main responsibility is acting as a layout component that

will control where and when (if there’s conditional rendering) a component will be seen.

The following code will place a Text component (we’ll discuss in the next section) in the center of the screen.

import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';



export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        Center of page
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Caveats

Though the div and View component share similarities, there are some key differences worth noticing

Syntax

The first thing to consider is syntax. React Native components start with capital letters. This isn’t a big deal but you may

have to retrain your brain when context switching between a React and React Native project.

onClick vs onPress

If you ever needed to make a div component clickable for some reason, you would simply add an onclick handler to take

care of your needs. To make components clickable in a React Native project, you would pass a function to the 

onPress prop. However, this prop isn’t available on a View component. If you need a clickable container component in a

React Native project, you can use the Pressable component as seen in the code below.

import {useState} from "react";
import { Text, View, StyleSheet,Pressable } from 'react-native';
import Constants from 'expo-constants';



export default function App() {
  const[textColor,setTextColor] = useState("red")
  
  const handlePress = ()=>{
    setTextColor("blue")
  }
  
  return (
    <View style={styles.container}>
      <Pressable onPress={handlePress} style={styles.btn} >
        <Text style={[styles.paragraph,{color:textColor}]}>
         Click
        </Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  btn:{
    border:"blue",
    borderWidth:1,
  
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
   
},
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Follow me fore more React and React Native tips

In the code above, I created a custom button via the Pressable component. When the user clicks on the button, it will

change the color of the text. You can copy and paste the code here to test it out.

Text vs h1,h2,h3…..

In React Native, the Text component is responsible for all things copy in your mobile app. To simulate the same feel

you would get in a traditional React app, you can combine a design theme in your project and utilize that to create

various text sizes. You can learn more here! But for now, remember the Text component is responsible for ALL of your

text needs. The code below will demonstrate how you can adjust a Text Component’s fontSize.

import {useState} from "react";
import { Text, View, StyleSheet,Pressable } from 'react-native';
import Constants from 'expo-constants';



export default function App() {
  const[textColor,setTextColor] = useState("red")
  
  const handlePress = ()=>{
    setTextColor("blue")
  }
  
  return (
    <View style={styles.container}>
      <Pressable onPress={handlePress} style={styles.btn} >
        <Text style={[styles.text,{color:textColor}]}>
         Click
        </Text>
      </Pressable>
      
      <Pressable style={styles.btn} >
        <Text style={[styles.text,styles.h1]}>
         Click
        </Text>
      </Pressable>
    
      <Pressable style={styles.btn} >
        <Text style={[styles.text,styles.h2]}>
         Click
        </Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  btn:{
    border:"blue",
    borderWidth:1,
    marginTop:10
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
   
},
  text: {
    margin: 24,
    fontWeight: 'bold',
    textAlign: 'center',
  },
 
  h1:{
    fontSize:40
  },
  h2:{
    fontSize:30
  },
});

Button vs button

React Native’s Button component is very similar to a standard button in a React project but with a few twist. First, instead

of calling an onClick handler, you call onPress. Also, when you use the Button component in React Native, your telling

each OS to use their standard button style. In other words, your design wont be consistent across the iOS platform and

Android platform. To remedy this situation, you can create a custom button via the Pressable component which I

discussed earlier. This will maintain a consistent layout and experience for the user. The code below will demonstrate

the differences between creating a custom button with a Pressable component and using the Button component.

If you copy and paste the code in the expo snack environment and change platforms, you will notice

the Pressable components stay the same across Android and iOS, while the button component looks different on each

platform.

import {useState} from "react";
import { Text, View, StyleSheet,Pressable,Button } from 'react-native';
import Constants from 'expo-constants';



export default function App() {
  const[textColor,setTextColor] = useState("red")
  
  const handlePress = ()=>{
    setTextColor("blue")
  }
  
  return (
    <View style={styles.container}>
      <Pressable onPress={handlePress} style={styles.btn} >
        <Text style={[styles.text,{color:textColor}]}>
         Click
        </Text>
      </Pressable>
      
      <Pressable style={styles.btn} >
        <Text style={[styles.text,styles.h1]}>
         Click
        </Text>
      </Pressable>
    
      <Pressable style={styles.btn} >
        <Text style={[styles.text,styles.h2]}>
         Click
        </Text>
      </Pressable>

      <Button title="button" onPress={()=>console.log("btn clicked!!!")}/>
    </View>
  );
}

const styles = StyleSheet.create({
  btn:{
    border:"blue",
    borderWidth:1,
    marginTop:10
  
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
   
},
  text: {
    margin: 24,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  
 h1:{
    fontSize:40
  },
  h2:{
    fontSize:30
  },
});

StyleSheet object vs the world of css

Bootstrap, Tailwind, and CSS modules are all ways to do CSS in traditional React apps. However, in React Native the 

StyleSheet object allows you to apply styling to your components with Javascript when you call its create method. It’s

essentially a CSS abstraction that allows you to use common terminology like fontSize and backgroundColor.

To implement a style from the StyleSheet object, you must use the style prop on your component. The variable

named styles can be called whatever you want but the React Native convention is to call it “styles”.

<Pressable onPress={handlePress} style={styles.btn}>
    <Text style={[styles.text,styles.h1]}>
         Click
     </Text>
 </Pressable>

const styles = StyleSheet.create({
 //...
  text: {
    margin: 24,
    fontWeight: 'bold',
    textAlign: 'center',
  },
 
  h1:{
    fontSize:40
  },
  h2:{
    fontSize:30
  },
});

Alternatively, you can use a third party package like styled components if you’re not a fan of the StyleSheet object .

applying multiple styles

You may have noticed that some of components have an array of styles in their style prop.

  <Text style={[styles.text,styles.h1]}>
      Text goes here
  </Text>

 const styles = StyleSheet.create({
   //...
  text: {
    margin: 24,
    fontWeight: 'bold',
    textAlign: 'center',
  },
 
  h1:{
    fontSize:40
  },
  h2:{
    fontSize:30
  },
});

When you want a component to “inherit” multiple styles from a StyleSheet Object, you can use an array to combine your

styles. One thing to keep in mind is the last property in an array of styles will override all other properties. In other words,

if the first property in the array has a fontSize of 10 and the last one has a fontSize of 20, that components fontSize will be set to

20

The fontSize on this Text component will be 40 since styles.h1 takes precedence over styles.text

  <Text style={[styles.text,styles.h1]}>
     Text goes here
  </Text>

 const styles = StyleSheet.create({
   //...
  text: {
    fontsize:10
    margin: 24,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  
  h1:{
    fontSize:40
  },
  h2:{
    fontSize:30
  },
});

This concludes today’s lesson. If you learned something new, consider subscribing to my newsletter and sharing this article

with the rest of the dev community.