Activity indicator modal for react-native-navigation

ActivityIndicatorModal.tsx

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();
}

react-native-navigation deprecated

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