I’ve recently started working on an Android application, and as a React developer, I made the easy choice to use and test React Native to do so because it helped me stay in my comfort zone and also gives me the opportunity to explore iOS someday.

Even if it is the same framework, using React for native applications is a little bit different than React on the web.

I’m writing this article to share the main differences I have found between the two platforms along with a few tips I had to figure out to obtain the desired final behavior.

---

View or Text — There Is No div

When working on a web application, we mostly use div and span tags for many usages. Since we are not on the web, this is no longer a possibility.

Instead, the content is made with View and Text that we could associate with the two tags above, but they have some additional constraints.

The View element

With the View element, you can’t add anything else inside other than components. That means it cannot contain text, which the Text component is for. As an unfortunate consequence, it has a larger tree in your application, but it helps to separate concerns between layout and text.

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

export default function HelloWorld() {
  return (
    <View>
      <Text>Hello world</Text>
    </View>
  );
}

Based on the previous point, you can easily figure out that you can’t apply text-related styles to a View  component. The text styles like color  or fontSize  need to be applied to the Text  component.

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

export default function Styling() {
  return (
    <View style={{ backgroundColor: "rgb(255, 192, 16)" }}>
      <Text style={{ color: "rgba(48, 48, 48)" }}>Hello world</Text>
    </View>
  );
}

#react-native #mobile #react #javascript #programming