Skip to content

Instantly share code, notes, and snippets.

@elsurudo
Created June 14, 2021 08:16
Show Gist options
  • Save elsurudo/0cc2edb118d63370f086cb5a8b1b0e00 to your computer and use it in GitHub Desktop.
Save elsurudo/0cc2edb118d63370f086cb5a8b1b0e00 to your computer and use it in GitHub Desktop.
Activity indicator modal for react-native-navigation
import React from 'react';
import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
import { Navigation } from 'react-native-navigation';
import Theme from '../../Theme';
export interface Props {
message: string;
}
export const ActivityIndicatorModal = (props: Props) => {
return (
<View style={styles.container}>
<View style={styles.overlay}>
<ActivityIndicator size='large' />
<Text style={styles.messageLabel}>{props.message}</Text>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#00000050'
},
overlay: {
backgroundColor: '#00000080',
padding: Theme.MarginMedium,
borderRadius: Theme.BorderRadius * 2
},
messageLabel: {
marginTop: Theme.MarginSmall,
color: 'white',
fontWeight: 'bold',
fontSize: 20
}
});
export function showActivityIndicatorModal(message: string) {
Navigation.showOverlay({
component: {
name: 'ActivityIndicatorModal',
passProps: {
message: message
},
options: {
layout: {
componentBackgroundColor: 'transparent'
}
},
}
});
}
export function hideActivityIndicatorModal() {
// TODO: perhaps be more selective here
Navigation.dismissAllOverlays();
}
@fukemy
Copy link

fukemy commented Aug 11, 2022

react-native-navigation deprecated

@elsurudo
Copy link
Author

@fukemy do you have a source for that? I don't see anything in the GH repo or docs about that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment