How to style your React Native apps?

#reactnative #webdev #react

Styling React Native apps involves using a combination of built-in components, and external libraries to ensure your app looks great and performs well across different devices and screen sizes.

Here’s a guide to styling React Native apps:

Thank you for showing your Love and support for my blog (How to start with React native as ReactJS developers) [https://dev.to/hellonehha/how-to-start-with-react-native-as-reactjs-developer-2d61]

1. Using the StyleSheet API

React Native provides a built-in StyleSheet API to define styles. This API allows you to define styles similarly to CSS but in a JavaScript object format.

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: '#f5f5f5',
  },
  text: {
    fontSize: 20,
    color: '#333',
  },
});

export default App;

2. External Libraries

Styled Components: A popular library that allows you to write plain CSS in your React Native components.

import styled from 'styled-components/native';

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

const StyledText = styled.Text`
  font-size: 24px;
  color: palevioletred;
`;

3. Native Wind

NativeWind is a library for React Native that allows you to use Tailwind CSS directly in your React Native projects. It provides utility-first styling, which makes it easy to build responsive and consistent user interfaces

Once installed, and setup, you can use it like this:

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

const App = () => {
  return (
    <View className="flex-1 justify-center items-center bg-gray-100">
      <Text className="text-lg font-bold text-blue-500">
        Hello, NativeWind!
      </Text>
    </View>
  );
};

export default App;

4. Global Styles

To maintain consistency, create a styles.js file where you can define global styles.

// styles.js
import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  text: {
    fontSize: 18,
    color: '#333',
  },
  container: {
    padding: 20,
  },
});