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

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