Style

React Native provides a styling mechanism which relies on JavaScript. Read more about it in the documentation about Style.

In all the Angular components, there are 2 properties related to style:

• styleSheet: it takes one or more StyleSheet created with the React Native's API.
• style: it takes a set of styling properties as a JSON object. It overrides what has been defined in styleSheet

Both support conditional styling.

For example:

import {Component} from '@angular/core';
import {StyleSheet} from 'react-native';

@Component({
  selector: 'example',
  template: `
<Text [styleSheet]="[styles.tick, isActive && styles.tickOn]" (tap)="isActive=!isActive">
  {{isActive ? "[  ]" : "[x]"}}
</Text>
<Text [styleSheet]="[styles.default]" [style]="{color: '#00a9e0',fontSize: 20}">Foo</Text>
`
})
export class Example {
  isActive: boolean = true;
  styles: any;

  constructor() {
    this.styles = StyleSheet.create({
      default: {
        fontSize: 10
      },
      tick: {
        width: 25,
        textAlign: 'center',
        fontSize: 20,
        color: '#333333'
      },
      tickOn: {
        color: '#309712'
      }
    });
  }

}