MENU


StyleSheet

StyleSheet is an abstraction of CSS stylesheets.

Members: Members: Members:


RESETRUNFULL
import React from "react";import { StyleSheet, Text, View } from "react-native";const App = () => (
  <View style={styles.container}>
    <Text style={styles.row}>React</Text>
  </View>);const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFill, /*==(position: 'absolute', left: 0, right: 0, top: 0, bottom: 0)*/
    flex: 1,
    padding: 24
  },
  row: {
    padding: 4,
    borderBottomColor: "red",
    borderBottomWidth: StyleSheet.hairlineWidth
    /* thin line */
  }});export default App;

RESETRUNFULL
import React from 'react';import { StyleSheet, Text, View } from 'react-native';const App = () => (
  <View style={container}>
    <Text style={text}>React Native</Text>
  </View>);const page = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: 'green',
  },
  text: {
    fontSize: 30,
    color: 'blue'
  },});const lists = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'yellow',
  },
  item: {
    fontStyle: 'italic',
    fontWeight: 'bold'
  },});// merging. precedence over previous or falsy styles.const container = StyleSheet.compose(page.container, lists.container);const text = StyleSheet.flatten([page.text, lists.item]);export default App;