React vs React Native Pt1
A React Native intro for React developers
Image by RealToughCandy.com
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',
},
});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”
The Text component style property is accepting an array of styles to combine multiple style objects
<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, consider subscribing and sharing this article with the rest of the dev community.
Ways to support my newsletter
🖥 If you believe this content is valuable, share it on social media
🎤 If you believe I would be a good fit for a podcast, let your favorite podcaster know
Connect with me
Connect with me on LinkedIn!
Connect with me on Twitter!
Related Article
These two packages will connect Firebase to your React Native Expo App
Image by Pexels from Pixabay Within this article, you will discover two approaches to seamlessly integrate Firebase into your expo project. If you are not yet familiar with expo, I encourage you to click here for further insights. While both paths offer their merits, it's important to note that they come with their own drawbacks. However, before delving …