Discover React Native for creating rich, cross-platform mobile apps with reusable components. Gain insights into UI components, styling, navigation, Hooks, state, and database management.

native.tar.gz

reactNative

React Native is a well-known mobile application development framework that allows developers to create rich, cross-platform mobile application UI using reusable components. It's ideal for building mobile applications and supports multi-platform reusable code, pre-built components, and a rich UI. Most well-known social media platforms, such as Facebook and Instagram, have been built using React Native. 

In this course, you’ll start with a brief introduction to React Native and then cover various built-in components of React Native categorized into different categories such as basic, user interface, user interaction, and list view components. Next, you’ll learn about concepts such as application styling, navigation, Hooks, state management, and database management. You’ll find interactive quizzes and challenges throughout the course to test your understanding.

By the end of this course, you’ll be able to develop mobile applications and kickstart your journey as a React Native developer.

Getting Started with Mobile App Development with React Native

Colors are a crucial part of the user interface. They can grab the attention of users. Moreover, the appropriate use of color in applications makes the application more attractive and appealing to the users. On the other hand, no colors or inappropriate use of colors makes the user interface dull, boring, and less attractive to users.

We can use the `color` attribute in React Native to set the color of a user interface component.

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

const App = () => {

  return (
    <SafeAreaView>
        <Text style={styles.textColor1}> Hello World </Text>
        <Text style={styles.textColor2}> Hello World </Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  textColor1: {
    color: 'red'
  },
  textColor2: {
    color: 'blue'
  }
});

export default App;

# Color representation

In React Native, colors are represented in four different ways. Let's briefly go through each of them.

## RGB

We can apply colors to components using RGB or Red Green Blue values. React Native allows us to provide RGB values of colors using `rgb` and `rgba` functions and hexadecimal format. The code snippet below shows different formats and methods of representing colors using RGB values.

Learn how to add colors to React Native applications.

Before We Begin

Introduction to React Native

Basic Components

User Interface and User Interaction

List View

Android Components and APIs

Miscellaneous Components and APIs

Application Styling

Navigation

Hooks

State Management

Database Management

Appendix

Colors