How to customise the color of spinner with react-native-paper?

Question

I try to customise the color of the spinner to green. But the color stays purple. Whatever I try to do.

So I have this:

/* eslint-disable prettier/prettier */

import { ActivityIndicator, Colors, Searchbar, withTheme } from "react-native-paper";
import { MD3LightTheme as DefaultTheme, Provider as PaperProvider } from "react-native-paper";
import { FlatList, SafeAreaView, StatusBar } from "react-native";
import React, { useContext } from "react";

import { CategoryContext } from "../../../services/category/category.context";
import { CategoryInfoCard } from "../components/category-info-card.component";
import { Spacer } from "../../../components/spacer/spacer.component";
import { colors } from "../../../infrastructure/theme/colors";
import styled from "styled-components/native";

/* eslint-disable prettier/prettier */
/* const cardGap = 16;
const cardWidth = (Dimensions.get("window").width - cardGap * 3) / 2; */

const theme = {
    ...DefaultTheme,
    // Specify custom property
    myOwnProperty: true,
    // Specify custom property in nested object
    colors: {
        myOwnColor: "#69da55",
    },
};

const colorsTheme = {
    bg: "blue",
};

const SafeArea = styled(SafeAreaView)`
    flex: 1;
    ${StatusBar.currentHeight && `margin-top: ${StatusBar.currentHeight}px`};
`;

const SearchContainer = styled.View`
    padding: ${(props) => props.theme.space[3]};
`;

const CategoryList = styled(FlatList).attrs({
    contentContainerStyle: {
        padding: 16,
    },
})``;

const Loading = styled(ActivityIndicator)`
    margin-left: -25px;
    background-color: colorsTheme.bg;
`;
const LoadingContainer = styled.View`
    position: absolute;
    top: 50%;
    left: 50%;
`;

export const CategoryScreen = () => {
    const { loading, error, categoryList } = useContext(CategoryContext);
    return (
        <SafeArea>
            {loading && (
                <LoadingContainer>
                    <Loading size={50} animating={true} style={{ backgroundColor: theme.colors.Green90 }} />
                </LoadingContainer>
            )}
            <SearchContainer>
                <Searchbar />
            </SearchContainer>
            <CategoryList
                data={categoryList}
                renderItem={({ item }) => {
                    //console.log("ITEMs", item);
                    return (
                        <Spacer position="bottom" size="large">
                            <CategoryInfoCard categoryList={item} />
                        </Spacer>
                    );
                }}
                keyExtractor={(item) => item.name}
            />
        </SafeArea>
    );
};

So I try it like:

style={{ backgroundColor: theme.colors.Green90 }}

Founded here: https://callstack.github.io/react-native-paper/theming.html

But the color of spinner stays purple. Not green.

Question: How to change the color of spinner with react-native paper?

Answer 1

you are trying to give a backgroundColor for ActivityIndicator which does not exist in its props to change the color of the spinner you need to use the color prop

<ActivityIndicator animating={true} color={'red'} />

you can check this sandbox