How to add styling or css to your app using reactnative?

React Native provides two main approaches for styling your components: using the StyleSheet component and inline styles. Both methods allow you to apply CSS-like properties to create visually appealing mobile applications.

Using StyleSheet Component

The StyleSheet component is the recommended approach for styling in React Native. It provides better performance and code organization compared to inline styles.

Import StyleSheet

First, import the StyleSheet component from React Native:

import { StyleSheet } from 'react-native';

Creating Styles

Create your styles using StyleSheet.create() method:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    margin: 10,
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  }
});

Applying Styles

Use the created styles by referencing them in your components:

<View style={styles.container}></View>

Example: FlatList with StyleSheet

Here's a complete example demonstrating StyleSheet usage with a FlatList component:

import React from "react";
import { FlatList, Text, View, StyleSheet, StatusBar } from "react-native";

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [
        { name: "Javascript Frameworks", isTitle: true },
        { name: "Angular", isTitle: false },
        { name: "ReactJS", isTitle: false },
        { name: "VueJS", isTitle: false },
        { name: "ReactNative", isTitle: false },
        { name: "PHP Frameworks", isTitle: true },
        { name: "Laravel", isTitle: false },
        { name: "CodeIgniter", isTitle: false },
        { name: "CakePHP", isTitle: false },
        { name: "Symfony", isTitle: false }
      ],
      stickyHeaderIndices: []
    };
  }

  renderItem = ({ item }) => {
    return (
      <View style={styles.item}>
        <Text style={{ 
          fontWeight: (item.isTitle) ? "bold" : "", 
          color: (item.isTitle) ? "red" : "gray"
        }}>
          {item.name}
        </Text>
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.data}
          renderItem={this.renderItem}
          keyExtractor={item => item.name}
          stickyHeaderIndices={this.state.stickyHeaderIndices}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    margin: 10,
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  }
});

Using Inline Styles

Inline styles allow you to apply styling directly to components using the style property. While convenient for quick styling, it's not recommended for complex applications as it can make code harder to maintain.

Example: Button with Inline Styles

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

const App = () => {
  return (
    <View style={{flex: 1, justifyContent: 'center', margin: 15}}>
      <Button
        title="Click Me"
        color="#9C27B0"
        onPress={() => Alert.alert('Testing Button for React Native')}
      />
    </View>
  );
};

export default App;

Comparison

Conclusion

StyleSheet is the preferred method for styling React Native apps due to better performance and code organization. Use inline styles sparingly for quick prototyping or component-specific styling that won't be reused.