title: style activityIndicator in react-native
body: <p>I am trying to set the <code>color</code> of my <code>ActivityIndicator</code>:</p>
  
  <pre><code> &lt;View style={[{height: this.props.calendarHeight}, this.style.placeholder]}&gt;
        &lt;ActivityIndicator size="large" color={this.style.loadingSpinner.color} /&gt;
      &lt;/View&gt;
  </code></pre>
  
  <p>I am setting my style here:</p>
  
  <pre><code>   import React, {Component} from 'react';
  import {Text, View, ActivityIndicator} from 'react-native';
  import Calendar from '../calendar';
  import styleConstructor from './style';
  
  class CalendarListItem extends Component {
    constructor(props) {
      super(props);
      this.style = styleConstructor(props.theme);
    }
  
    shouldComponentUpdate(nextProps) {
      const r1 = this.props.item;
      const r2 = nextProps.item;
      return r1.toString('yyyy MM') !== r2.toString('yyyy MM') || !!(r2.propbump &amp;&amp; r2.propbump !== r1.propbump);
    }
  
    render() {
      const row = this.props.item;
      if (row.getTime) {
        return (
          &lt;Calendar
            theme={this.props.theme}
            style={[{height: this.props.calendarHeight}, this.style.calendar]}
            current={row}
            hideArrows
            hideExtraDays={this.props.hideExtraDays === undefined ? true : this.props.hideExtraDays}
            disableMonthChange
            markedDates={this.props.markedDates}
            markingType={this.props.markingType}
            hideDayNames={this.props.hideDayNames}
            onDayPress={this.props.onDayPress}
            minDate={this.props.minDate}
            maxDate={this.props.maxDate}
            firstDay={this.props.firstDay}
            monthFormat={this.props.monthFormat}
            dayComponent={this.props.dayComponent}
            disabledByDefault={this.props.disabledByDefault}
            showWeekNumbers={this.props.showWeekNumbers}
          /&gt;);
      } else {
        const text = row.toString();
        return (
  
          &lt;View style={[{height: this.props.calendarHeight}, this.style.placeholder]}&gt;
            &lt;ActivityIndicator size="large" color={this.style.loadingSpinner} /&gt;
          &lt;/View&gt;
        );
      }
    }
  }
  
  export default CalendarListItem;
  </code></pre>
  
  <p>My <code>style.js</code> is:</p>
  
  <pre><code>import {StyleSheet} from 'react-native';
  import * as defaultStyle from '../style';
  
  const STYLESHEET_ID = 'stylesheet.calendar-list.main';
  
  export default function getStyle(theme={}) {
    const appStyle = {...defaultStyle, ...theme};
    return StyleSheet.create({
      container: {
        backgroundColor: appStyle.calendarBackground
      },
      placeholder: {
        backgroundColor: appStyle.calendarBackground,
        alignItems: 'center',
        justifyContent: 'center'
      },
      placeholderText: {
        fontSize: 30,
        fontWeight: '200',
        color: appStyle.dayTextColor
      },
      loadingSpinner: {
        color: '#fff'
      },
      calendar: {
        paddingLeft: 15,
        paddingRight: 15
      },
      ...(theme[STYLESHEET_ID] || {})
    });
  }
  </code></pre>
  
  <p>However, <code>this.style.loadingSpinner.color</code> is undefined.</p>
  
  <p>How can set the color?</p>