Introduction to Styling in React Native

Styling in React Native is a critical element that extensively affects the user experience of a mobile application. React Native permits developers to style their applications with the use of JavaScript, imparting a continuing experience for the ones who are already familiar with web development. This introductory blog will walk you through the basics of styling in React Native, covering essential concepts and best practices.

1. Inline Styles

Inline patterns in React Native are similar to inline styles in web development. They are defined directly in the component, using JavaScript objects. Each style property is camel-cased in place of hyphenated (e.g., backgroundColor rather than background-color).

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

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 20, color: 'blue' }}>Welcome to React Native!</Text>
    </View>
  );
};

export default App;

2. StyleSheet API

React Native offers a StyleSheet API for outlining styles, which allows to enhance code readability and overall performance. Styles are defined with the use of the StyleSheet.Create technique and then referenced in your components.

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Welcome to React Native!</Text>
    </View>
  );
};

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

export default App;

3. Flexbox

React Native makes use of Flexbox for layout, which is a layout version that allows you to design complicated layouts with easy and flexible code. Flexbox properties include flexDirection, justifyContent, alignItems, etc.

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

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box1} />
      <View style={styles.box2} />
      <View style={styles.box3} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  box1: {
    width: 50,
    height: 50,
    backgroundColor: 'red',
  },
  box2: {
    width: 50,
    height: 50,
    backgroundColor: 'green',
  },
  box3: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

export default App;

4. Platform-Specific Styles

React Native permits you to outline platform-specific styles with the use of the Platform module. This is useful when you want to apply different and specific styles for iOS and Android.

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Welcome to React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'green',
      },
    }),
  },
  text: {
    fontSize: 20,
    color: 'blue',
  },
});

export default App;

5. External Libraries

There are numerous external libraries present that can help you with styling in React Native. Libraries like styled-components and emotion offer powerful equipment for writing CSS-in-JS, making your styles more dynamic and less complicated to manage.

import React from 'react';
import styled from 'styled-components/native';

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: red;
`;

const Text = styled.Text`
  font-size: 20px;
  color: white;
`;

const App = () => {
  return (
    <Container>
      <Text>Welcome to React Native!</Text>
    </Container>
  );
};

export default App;

Conclusion

Styling in React Native is versatile and sturdy, providing a whole lot of tactics to fit distinctive needs and options. Whether you choose inline styles, StyleSheet, Flexbox, platform-particular styles, or the usage of external libraries, React Native presents the flexibility to create visually appealing and responsive applications. Understanding these fundamental standards will set you on the proper route to getting to know styling in React Native.

For more such blogs and updates follow Front-end Competency.

Follow NashTech Blogs for more amazing blogs.