In React Native, we don't use regular HTML tags for the templates we return. And instead, we use these native components like view and text. And that's because native devices like an iPhone or Android phone, they don't render content using HTML. And instead, they use platform specific native elements.

So these built-in native components represent those native elements and they get translated into them by React Native at runtime.

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

const Home = () => {
  return (
    <View>
      <Text>Home</Text>
    </View>
  );
};

export default Home;

const styles = StyleSheet.create({});

Key Components:

• Text : Used for outputting text content; requires importing from React Native.
• View : Functions similar to div tag in HTML serving as a container for layout and grouping components. It uses Flexbox by default.

Style

there's a bunch of different ways that we could style a React Native app. One way would be to use a package called Native Wind, which allows you to use Tailwind classes in your template in a React Native application. You could use the styled components library much like you could with React for the web. Or if you wanted to, you could just use the built-in stylesheet API to make a stylesheet object that looks and behaves very much like regular CSS rules and classes.

Styling Techniques:

• StyleSheet API : The recommended way to create styles, allowing you to define objects with CSS-like properties (using camelCase instead of kebab-case).

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

const Home = () => {
  return (
    <View style={styles.container}>
      <Text>The Number 1</Text>
      <Text>Reading List App</Text>
    </View>
  );
};

export default Home;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

• Inline Styles : Styles can be applied directly to components by passing an object to the style prop.

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

const Home = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>The Number 1</Text>
      <Text style={{ margin: 10, marginBottom: 30 }}>Reading List App</Text>
    </View>
  );
};

export default Home;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    fontWeight: "bold",
    fontSize: 18,
  },
});