style activityIndicator in react-native

Question

I am trying to set the color of my ActivityIndicator:

 <View style={[{height: this.props.calendarHeight}, this.style.placeholder]}>
      <ActivityIndicator size="large" color={this.style.loadingSpinner.color} />
    </View>

I am setting my style here:

   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 && r2.propbump !== r1.propbump);
  }

  render() {
    const row = this.props.item;
    if (row.getTime) {
      return (
        <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}
        />);
    } else {
      const text = row.toString();
      return (

        <View style={[{height: this.props.calendarHeight}, this.style.placeholder]}>
          <ActivityIndicator size="large" color={this.style.loadingSpinner} />
        </View>
      );
    }
  }
}

export default CalendarListItem;

My style.js is:

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] || {})
  });
}

However, this.style.loadingSpinner.color is undefined.

How can set the color?

Answer 1

use the CSS transform will make the icon bigger

<ActivityIndicator size="large" style={{ transform: [{ scaleX: 2 }, { scaleY: 2 }] }} color="#E85F5C" />

Answer 2

To set the color of ActivityIndicator component, just set the prop color to what you want, like this

<ActivityIndicator color={colors.yourColor} /> // if you have an object with your colors

or

<ActivityIndicator color='#000' /> 

You can also change the size of this component with the prop size

<ActivityIndicator size='small' /> // you can set 'small' or 'large'

remember to import ActivityIndicator from 'react-native'