How to add styles or CSS to your app using reactnative?

You can style your application as follows -

• Using stylesheet components
• Using inline styles

Using stylesheet components

React native stylesheet components are very convenient and concise when you want to apply styles to your application. To use the stylesheet component, first import it as shown below -

import { StyleSheet } from 'react-native';

You can create styles using the stylesheet component as shown below -

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

The above styles can be used in your code Used in the following -

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

Here is an example of using a style sheet to display the FlatList component-

Example 1

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,
   }
});

Output

Using inline styles

You can use the style attribute to add inline styles. However, this is not a best practice as it can be difficult to read the code. This is a working example on how to use inline styles in reactnative components

Example 2

Export default application;

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

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

Output

The above is the detailed content of How to add styles or CSS to your app using reactnative?. For more information, please follow other related articles on the PHP Chinese website!