Getting Started with Mobile App Development with React Native/

...

/

Colors

Colors

Learn how to add colors to React Native applications.

We'll cover the following...

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.

Press + to interact
Mobile application with colors vs. mobile application without colors
Mobile application with colors vs. mobile application without colors

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

Press + to interact
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 ...