diff --git a/app/containers/ActivityIndicator.tsx b/app/containers/ActivityIndicator.tsx
index 69ef22ceb..701926416 100644
--- a/app/containers/ActivityIndicator.tsx
+++ b/app/containers/ActivityIndicator.tsx
@@ -1,14 +1,11 @@
 import React from 'react';
 import { ActivityIndicator, ActivityIndicatorProps, StyleSheet } from 'react-native';
 
+import { useTheme } from '../theme';
 import { themes } from '../constants/colors';
 
-type TTheme = 'light' | 'dark' | 'black' | string;
-
 interface IActivityIndicator extends ActivityIndicatorProps {
-	theme?: TTheme;
 	absolute?: boolean;
-	props?: object;
 }
 
 const styles = StyleSheet.create({
@@ -27,8 +24,11 @@ const styles = StyleSheet.create({
 	}
 });
 
-const RCActivityIndicator = ({ theme = 'light', absolute, ...props }: IActivityIndicator) => (
-	<ActivityIndicator style={[styles.indicator, absolute && styles.absolute]} color={themes[theme].auxiliaryText} {...props} />
-);
+const RCActivityIndicator = ({ absolute, ...props }: IActivityIndicator): React.ReactElement => {
+	const { theme } = useTheme();
+	return (
+		<ActivityIndicator style={[styles.indicator, absolute && styles.absolute]} color={themes[theme].auxiliaryText} {...props} />
+	);
+};
 
 export default RCActivityIndicator;
diff --git a/app/containers/MessageBox/CommandsPreview/Item.tsx b/app/containers/MessageBox/CommandsPreview/Item.tsx
index 33e3c4ff3..3f18d2aac 100644
--- a/app/containers/MessageBox/CommandsPreview/Item.tsx
+++ b/app/containers/MessageBox/CommandsPreview/Item.tsx
@@ -34,7 +34,7 @@ const Item = ({ item, theme }: IMessageBoxCommandsPreviewItem) => {
 					resizeMode={FastImage.resizeMode.cover}
 					onLoadStart={() => setLoading(true)}
 					onLoad={() => setLoading(false)}>
-					{loading ? <ActivityIndicator theme={theme} /> : null}
+					{loading ? <ActivityIndicator /> : null}
 				</FastImage>
 			) : (
 				<CustomIcon name='attach' size={36} color={themes[theme!].actionTintColor} />
diff --git a/app/containers/TextInput.tsx b/app/containers/TextInput.tsx
index f829bb909..1ec1f1e19 100644
--- a/app/containers/TextInput.tsx
+++ b/app/containers/TextInput.tsx
@@ -116,8 +116,7 @@ export default class RCTextInput extends React.PureComponent<IRCTextInputProps,
 
 	get loading() {
 		const { theme } = this.props;
-		// @ts-ignore
-		return <ActivityIndicator style={[styles.iconContainer, styles.iconRight, { color: themes[theme].bodyText }]} />;
+		return <ActivityIndicator style={[styles.iconContainer, styles.iconRight]} color={themes[theme].bodyText} />;
 	}
 
 	tooglePassword = () => {
diff --git a/app/containers/UIKit/Overflow.tsx b/app/containers/UIKit/Overflow.tsx
index 50d77920b..a48fadd36 100644
--- a/app/containers/UIKit/Overflow.tsx
+++ b/app/containers/UIKit/Overflow.tsx
@@ -66,7 +66,7 @@ export const Overflow = ({ element, loading, action, parser, theme }: IOverflow)
 				{!loading ? (
 					<CustomIcon size={18} name='kebab' color={themes[theme].bodyText} />
 				) : (
-					<ActivityIndicator style={styles.loading} theme={theme} />
+					<ActivityIndicator style={styles.loading} />
 				)}
 			</Touchable>
 			<Popover
diff --git a/app/containers/message/Audio.tsx b/app/containers/message/Audio.tsx
index 65500adc9..6a1293de7 100644
--- a/app/containers/message/Audio.tsx
+++ b/app/containers/message/Audio.tsx
@@ -96,7 +96,7 @@ const Button = React.memo(({ loading, paused, onPress, theme }: IButton) => (
 		hitSlop={BUTTON_HIT_SLOP}
 		background={Touchable.SelectableBackgroundBorderless()}>
 		{loading ? (
-			<ActivityIndicator style={[styles.playPauseButton, styles.audioLoading]} theme={theme} />
+			<ActivityIndicator style={[styles.playPauseButton, styles.audioLoading]} />
 		) : (
 			<CustomIcon name={paused ? 'play-filled' : 'pause-filled'} size={36} color={themes[theme].tintColor} />
 		)}
diff --git a/app/containers/message/Reply.tsx b/app/containers/message/Reply.tsx
index 7a7089248..31284b06c 100644
--- a/app/containers/message/Reply.tsx
+++ b/app/containers/message/Reply.tsx
@@ -258,7 +258,7 @@ const Reply = React.memo(
 										styles.backdrop,
 										{ backgroundColor: themes[theme].bannerBackground, opacity: themes[theme].attachmentLoadingOpacity }
 									]}></View>
-								<RCActivityIndicator theme={theme} />
+								<RCActivityIndicator />
 							</View>
 						) : null}
 					</View>
diff --git a/app/containers/message/Video.tsx b/app/containers/message/Video.tsx
index 6fb823f82..51e8631a0 100644
--- a/app/containers/message/Video.tsx
+++ b/app/containers/message/Video.tsx
@@ -77,11 +77,7 @@ const Video = React.memo(
 					onPress={onPress}
 					style={[styles.button, { backgroundColor: themes[theme].videoBackground }]}
 					background={Touchable.Ripple(themes[theme].bannerBackground)}>
-					{loading ? (
-						<RCActivityIndicator theme={theme} />
-					) : (
-						<CustomIcon name='play-filled' size={54} color={themes[theme].buttonText} />
-					)}
+					{loading ? <RCActivityIndicator /> : <CustomIcon name='play-filled' size={54} color={themes[theme].buttonText} />}
 				</Touchable>
 				<Markdown
 					msg={file.description}
diff --git a/app/views/AttachmentView.tsx b/app/views/AttachmentView.tsx
index b4054bd2e..1aef32b07 100644
--- a/app/views/AttachmentView.tsx
+++ b/app/views/AttachmentView.tsx
@@ -192,7 +192,7 @@ class AttachmentView extends React.Component<IAttachmentViewProps, IAttachmentVi
 			<View style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]}>
 				<StatusBar barStyle='light-content' backgroundColor={themes[theme].previewBackground} />
 				{content}
-				{loading ? <RCActivityIndicator absolute size='large' theme={theme} /> : null}
+				{loading ? <RCActivityIndicator absolute size='large' /> : null}
 			</View>
 		);
 	}
diff --git a/app/views/AuthenticationWebView.tsx b/app/views/AuthenticationWebView.tsx
index ac304fbfb..9a1381089 100644
--- a/app/views/AuthenticationWebView.tsx
+++ b/app/views/AuthenticationWebView.tsx
@@ -175,7 +175,7 @@ class AuthenticationWebView extends React.PureComponent<IAuthenticationWebView,
 
 	render() {
 		const { loading } = this.state;
-		const { route, theme } = this.props;
+		const { route } = this.props;
 		const { url, authType } = route.params;
 		const isIframe = authType === 'iframe';
 
@@ -196,7 +196,7 @@ class AuthenticationWebView extends React.PureComponent<IAuthenticationWebView,
 						this.setState({ loading: false });
 					}}
 				/>
-				{loading ? <ActivityIndicator size='large' theme={theme} absolute /> : null}
+				{loading ? <ActivityIndicator size='large' absolute /> : null}
 			</>
 		);
 	}
diff --git a/app/views/CannedResponsesListView/index.tsx b/app/views/CannedResponsesListView/index.tsx
index ef3d0d214..e9dec1475 100644
--- a/app/views/CannedResponsesListView/index.tsx
+++ b/app/views/CannedResponsesListView/index.tsx
@@ -353,7 +353,7 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView
 				onEndReached={onEndReached}
 				onEndReachedThreshold={0.5}
 				ItemSeparatorComponent={List.Separator}
-				ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null}
+				ListFooterComponent={loading ? <ActivityIndicator /> : null}
 			/>
 		);
 	};
diff --git a/app/views/DirectoryView/index.tsx b/app/views/DirectoryView/index.tsx
index 73e6a45c9..1ad798ec6 100644
--- a/app/views/DirectoryView/index.tsx
+++ b/app/views/DirectoryView/index.tsx
@@ -292,7 +292,7 @@ class DirectoryView extends React.Component<IDirectoryViewProps, any> {
 					renderItem={this.renderItem}
 					ItemSeparatorComponent={List.Separator}
 					keyboardShouldPersistTaps='always'
-					ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null}
+					ListFooterComponent={loading ? <ActivityIndicator /> : null}
 					onEndReached={() => this.load({})}
 				/>
 				{showOptionsDropdown ? (
diff --git a/app/views/DiscussionsView/index.tsx b/app/views/DiscussionsView/index.tsx
index 8a977a36e..93963b0c5 100644
--- a/app/views/DiscussionsView/index.tsx
+++ b/app/views/DiscussionsView/index.tsx
@@ -198,7 +198,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
 				removeClippedSubviews={isIOS}
 				onEndReached={() => (isSearching ? searchTotal : total) > API_FETCH_COUNT ?? load()}
 				ItemSeparatorComponent={List.Separator}
-				ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null}
+				ListFooterComponent={loading ? <ActivityIndicator /> : null}
 				scrollIndicatorInsets={{ right: 1 }}
 			/>
 		</SafeAreaView>
diff --git a/app/views/JitsiMeetView.tsx b/app/views/JitsiMeetView.tsx
index aa6658d20..9145f2e3c 100644
--- a/app/views/JitsiMeetView.tsx
+++ b/app/views/JitsiMeetView.tsx
@@ -117,7 +117,7 @@ class JitsiMeetView extends React.Component<IJitsiMeetViewProps, IJitsiMeetViewS
 
 	render() {
 		const { userInfo, loading } = this.state;
-		const { route, theme } = this.props;
+		const { route } = this.props;
 		const onlyAudio = route.params?.onlyAudio ?? false;
 		const options = isAndroid ? { url: this.url, userInfo, audioOnly: onlyAudio } : null;
 		return (
@@ -129,7 +129,7 @@ class JitsiMeetView extends React.Component<IJitsiMeetViewProps, IJitsiMeetViewS
 					style={StyleSheet.absoluteFill}
 					options={options}
 				/>
-				{loading ? <ActivityIndicator theme={theme} /> : null}
+				{loading ? <ActivityIndicator /> : null}
 			</>
 		);
 	}
diff --git a/app/views/MessagesView/index.tsx b/app/views/MessagesView/index.tsx
index 66070d1f7..67ddffdd6 100644
--- a/app/views/MessagesView/index.tsx
+++ b/app/views/MessagesView/index.tsx
@@ -369,7 +369,7 @@ class MessagesView extends React.Component<IMessagesViewProps, any> {
 					style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
 					keyExtractor={item => item._id}
 					onEndReached={this.load}
-					ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null}
+					ListFooterComponent={loading ? <ActivityIndicator /> : null}
 				/>
 			</SafeAreaView>
 		);
diff --git a/app/views/ModalBlockView.tsx b/app/views/ModalBlockView.tsx
index 5167663df..c87a3fd9c 100644
--- a/app/views/ModalBlockView.tsx
+++ b/app/views/ModalBlockView.tsx
@@ -277,7 +277,7 @@ class ModalBlockView extends React.Component<IModalBlockViewProps, IModalBlockVi
 						}
 					)}
 				</View>
-				{loading ? <ActivityIndicator absolute size='large' theme={theme} /> : null}
+				{loading ? <ActivityIndicator absolute size='large' /> : null}
 			</KeyboardAwareScrollView>
 		);
 	}
diff --git a/app/views/RoomMembersView/index.tsx b/app/views/RoomMembersView/index.tsx
index 4212e7856..2ad9a7344 100644
--- a/app/views/RoomMembersView/index.tsx
+++ b/app/views/RoomMembersView/index.tsx
@@ -636,7 +636,7 @@ class RoomMembersView extends React.Component<IRoomMembersViewProps, IRoomMember
 					ListHeaderComponent={this.renderSearchBar}
 					ListFooterComponent={() => {
 						if (isLoading) {
-							return <ActivityIndicator theme={theme} />;
+							return <ActivityIndicator />;
 						}
 						return null;
 					}}
diff --git a/app/views/RoomView/List/index.tsx b/app/views/RoomView/List/index.tsx
index 6f136748f..eb3e7c4e6 100644
--- a/app/views/RoomView/List/index.tsx
+++ b/app/views/RoomView/List/index.tsx
@@ -319,9 +319,9 @@ class ListContainer extends React.Component<IListContainerProps, IListContainerS
 	};
 
 	renderFooter = () => {
-		const { rid, theme, loading } = this.props;
+		const { rid, loading } = this.props;
 		if (loading && rid) {
-			return <ActivityIndicator theme={theme} />;
+			return <ActivityIndicator />;
 		}
 		return null;
 	};
diff --git a/app/views/RoomsListView/index.tsx b/app/views/RoomsListView/index.tsx
index ec375c237..24c6414d1 100644
--- a/app/views/RoomsListView/index.tsx
+++ b/app/views/RoomsListView/index.tsx
@@ -1000,7 +1000,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 		const height = displayMode === DisplayMode.Condensed ? ROW_HEIGHT_CONDENSED : ROW_HEIGHT;
 
 		if (loading) {
-			return <ActivityIndicator theme={theme} />;
+			return <ActivityIndicator />;
 		}
 
 		return (
diff --git a/app/views/SearchMessagesView/index.tsx b/app/views/SearchMessagesView/index.tsx
index c2a48367b..585bf76aa 100644
--- a/app/views/SearchMessagesView/index.tsx
+++ b/app/views/SearchMessagesView/index.tsx
@@ -291,7 +291,7 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
 				style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
 				keyExtractor={item => item._id}
 				onEndReached={this.onEndReached}
-				ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null}
+				ListFooterComponent={loading ? <ActivityIndicator /> : null}
 				onEndReachedThreshold={0.5}
 				removeClippedSubviews={isIOS}
 				{...scrollPersistTaps}
diff --git a/app/views/ShareListView/index.tsx b/app/views/ShareListView/index.tsx
index ced0badd5..b89603242 100644
--- a/app/views/ShareListView/index.tsx
+++ b/app/views/ShareListView/index.tsx
@@ -450,7 +450,7 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
 		const { theme } = this.props;
 
 		if (loading) {
-			return <ActivityIndicator theme={theme} />;
+			return <ActivityIndicator />;
 		}
 
 		if (needsPermission) {
diff --git a/app/views/TeamChannelsView.tsx b/app/views/TeamChannelsView.tsx
index b8b32cdd2..330126f74 100644
--- a/app/views/TeamChannelsView.tsx
+++ b/app/views/TeamChannelsView.tsx
@@ -540,9 +540,8 @@ class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChan
 
 	renderFooter = () => {
 		const { loadingMore } = this.state;
-		const { theme } = this.props;
 		if (loadingMore) {
-			return <ActivityIndicator theme={theme} />;
+			return <ActivityIndicator />;
 		}
 		return null;
 	};
diff --git a/app/views/ThreadMessagesView/index.tsx b/app/views/ThreadMessagesView/index.tsx
index 5d17729df..2c6dcc6a4 100644
--- a/app/views/ThreadMessagesView/index.tsx
+++ b/app/views/ThreadMessagesView/index.tsx
@@ -524,7 +524,7 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
 				removeClippedSubviews={isIOS}
 				ItemSeparatorComponent={List.Separator}
 				ListHeaderComponent={this.renderHeader}
-				ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null}
+				ListFooterComponent={loading ? <ActivityIndicator /> : null}
 				scrollIndicatorInsets={{ right: 1 }} // https://github.com/facebook/react-native/issues/26610#issuecomment-539843444
 			/>
 		);
diff --git a/app/views/UserNotificationPreferencesView/index.tsx b/app/views/UserNotificationPreferencesView/index.tsx
index a4d23291b..1b9a5cd83 100644
--- a/app/views/UserNotificationPreferencesView/index.tsx
+++ b/app/views/UserNotificationPreferencesView/index.tsx
@@ -114,7 +114,6 @@ class UserNotificationPreferencesView extends React.Component<
 	};
 
 	render() {
-		const { theme } = this.props;
 		const { loading } = this.state;
 		return (
 			<SafeAreaView testID='user-notification-preference-view'>
@@ -159,7 +158,7 @@ class UserNotificationPreferencesView extends React.Component<
 							</List.Section>
 						</>
 					) : (
-						<ActivityIndicator theme={theme} />
+						<ActivityIndicator />
 					)}
 				</List.Container>
 			</SafeAreaView>