If you don't know what React and React Native are for, then let me make it clear.

React -> JavaScript framework used to make web apps
React Native -> JavaScript framework used to make mobile applications

But I assume you know about React, if you don't then also it's fine. So, let me present to you things I found different and weird between React and React Native.

1. JSX🧱

Well in React you've seen code like this:

import React from 'react';

const App = () =>{
  return (
    <div>
      <h1> Hi there, </h1>
      <p> This is Aashish Panthi </p>
    </div>
  );
} 
export default App;

But in React Native, the above code seems like this:

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

const App = () =>{
  return (
    <View>
      <Text> Hi there, </Text>
      <Text> This is Aashish Panthi </Text>
    </View>
  );
} 
export default App;

From the example above, you can clearly recognize that the div element is replaced by View and h1, p elements are replaced by Text. And yes this is what happens inside of React Native code. The text you want to present on the screen should be and must be wrapped inside of the Text element while one or more Text elements are wrapped inside of the View element. View is equivalent to the div element in a sense of styling.

There is another problem with React Native app and the View element in general. Suppose you are rendering a lot of text onto the screen that text goes outside of the frame/screen, well there is no way that you can scroll and see that text. In the case of React, if content overflows then we can actually scroll but not in the case of React Native. Maybe that is partly because of the browser's default behavior.

2. CSS😎

I know it is not really a good news for frontend developers to hear that CSS, short for cascading stylesheet is not supported by React Native. In short, you can't have a CSS file. Well, now a question arises if there is no CSS support in React Native then how can we make such a catchy frontend. Yes, we can make our application look better, and feel better with javascript.

When there is no CSS, there is javascript. We use javascript objects to style the elements. React Native provides StyleSheet abstraction to create style objects and apply styles to elements. If you have ever used modular CSS with React then you will be pretty comfortable styling elements inside of React Native.

A lot if not all properties of CSS are provided and supported by StyleSheet. There are some CSS properties not supported by React Native, but there are ways to achieve the same effect which we'll be talking about later on.

Let's look at the examples and get a clear understanding of them.

A CSS way to style

.container {
  height: 100%;
  width: 100%;
  background-color: #fff;
}
.input {
  padding: 10;
  padding-left: 25;
  border-radius: 40;
  margin-bottom: 20;
  width: 80%;
}
.button {
  align-items: center;
  justify-content: center;
  margin-top: 15;
  border-radius: 40;
}

A JavaScript way to style

import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
  container: {
    height: "100%",
    width: "100%",
    backgroundColor: "#fff",
  },
  input: {
    padding: 10,
    paddingLeft: 25,
    borderRadius: 40,
    marginBottom: 20,
    width: "80%",
  },
  button: {
    alignItems: "center",
    justifyContent: "center",
    marginTop: 15,
    borderRadius: 40,
  },
});

export default styles;

After this, we can import styles and use them as we usually do with modular CSS. Like this:

import { View, Text, TextInput } from "react-native";
import styles from "../styles/ourstylefile";

function Component() {
  return (
    <View style={styles.container}>
      <TextInput style={styles.input} />
      <Button style={styles.button}>Sign in</Button>
    </View>
  );
}

export default Component;

Yes, this is how we style our app. And now let's talk about the property difference. There may be a lot of properties lacking but I don't know all of them. So, I'll give a quick tour of some properties. And you can also make a clear mind that the same property present in both CSS and StyleSheet in React Native may have a different default value.

One of the properties we use quite a lot is box-shadow. I was also shocked when I get to know about it for the first time. But there are some properties which can help us to get nearly the same design if not perfectly.

A CSS way to apply shadow:

box-shadow: 0 3px 5px #8a3f3f;

A JavaScript way to apply shadow:

  shadowColor: "#8a3f3f",
  shadowOffset: {
    width: 0,
    height: 3,
  },
  shadowOpacity:  0.18,
  shadowRadius: 4.59,
  elevation: 5

IDK if that's actual conversion of box-shadow to javascript object but it looks somewhat like this😅.

3. Package📦

Maybe it's a problem that occurred to me only but I want to address it. While installing node packages with npm, I faced some serious problems. The packages I installed with npm were not compatible with the expo. Yes, till now I am making applications with the help of the expo. Let me show you a little demo of what worked and what didn't work.

Installing packages with npm:

npm install react-native-reanimated

Installing packages with expo:

expo install react-native-reanimated

While using expo install, you need to have yarn. To install yarn use the command npm i -g yarn which installs yarn globally. And I got the problem with the same package shown in the above command.

NPM is compatible with React, at least I didn't face some serious issues till this date. But I got issues with React Native and was stuck for a few days due to an incompatible version installed. I didn't think about yarn while I was working with React but the yarn is a go-to package manager for me while working with React Native.

4. Other problems😪

Of course, I got some other problems also. Maybe they should get an honorable mention. So, here I'm presenting disgusting errors of React Native😅

Please don't give position absolute to a Flatlist. I know you probably don't do this stupidity but I did it so as a nerd I request you not to do that unless you know how to fix that.

Fonts, IDK why but it's not simple to use fonts in React Native project. I mean you can't just use a link tag inside of the head of HTML or place import at the top of CSS. And this is because we have neither HTML nor CSS files.

I think I can remember this much pain for now. I'm in good mood right now, the best thing to do right now according to me is to end this blog.

P.S: I'm a newbie in this area, maybe the problems I discussed here are not actually the real problems, they may be there because I'm a nerd or I've used expo to build my mobile application.