React-Native Style

Syntax

React-Native styles can be defined using JavaScript objects with style properties and values.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 20,
    fontStyle: 'italic',
    color: 'blue',
  },
});

Example

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 20,
    fontStyle: 'italic',
    color: 'blue',
  },
});

export default App;

Output

The above example would render a screen with a blue, italicized "Hello, World!" text centered in the middle of the screen.

Explanation

React-Native styles can be used to specify the appearance of React-Native components. Styles are defined using JavaScript objects with CamelCase property names. Properties such as backgroundColor, fontSize, and color are commonly used.

Styles can be applied to components in a number of ways:

• Using the style prop, which accepts a style object or an array of style objects.
• Using the StyleSheet.create method, which returns an object with style properties mapped to unique hash identifiers.

React-Native supports Flexbox for layout, allowing for easy positioning of components on a screen.

Use

React-Native styles can be used to customize the appearance of any React-Native component, including screens, views, text, images and more.

Some common style properties include:

• backgroundColor: The background color of a component
• color: The font color of a text component
• fontSize: The size of a text component's font
• fontWeight: The weight of a text component's font
• textAlign: The horizontal alignment of text within a component
• flex: The amount of space a component should take up in its container

Important Points

• Styles can be inherited by child components, allowing for a consistent look and feel across an app.
• React-Native styles support a number of units, including dp, %, and em.
• Styles can be dynamic, using variables or interpolated values to change the appearance of a component based on user interaction or other factors.

Summary

React-Native styles allow for extensive customization of the appearance of app components using a simple syntax. Styles can be used to create a consistent look and feel across an app, and can be dynamic to provide a more engaging user experience.