🛠 Refactor: Ex - Extract Test06 to Own FIles

Summary: Extract symbols/comps./types/constants in `example/src/examples/Test06.tsx` to their own separate files.

example/src/examples/Test06/ModalFocusIndicatorPill.tsx

@@ -0,0 +1,47 @@
+
+import * as React from 'react';
+import { StyleSheet, View, Text, ViewStyle } from 'react-native';
+
+import { ModalContext } from 'react-native-ios-modal';
+
+import * as Colors from '../../constants/Colors';
+
+export function ModalFocusIndicatorPill() {
+  const { isModalInFocus } = React.useContext(ModalContext);
+
+  const pillContainerStyle: ViewStyle = {
+    backgroundColor: isModalInFocus
+      ? /* True  */ Colors.PURPLE.A700
+      : /* False */ Colors.RED.A700,
+  };
+
+  // prettier-ignore
+  const pillText = isModalInFocus
+    ? /* True  */ 'IN FOCUS'
+    : /* False */ 'BLURRED';
+
+  return (
+    <View style={[styles.modalFocusIndicatorPillContainer, pillContainerStyle]}>
+      <Text style={styles.modalFocusIndicatorPillText}>
+        {/* Focus Pill Label: Focus/Blur */}
+        {pillText}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  modalFocusIndicatorPillContainer: {
+    alignSelf: 'center',
+    alignItems: 'center',
+    width: 200,
+    paddingVertical: 12,
+    borderRadius: 15,
+    marginBottom: 7,
+  },
+  modalFocusIndicatorPillText: {
+    fontSize: 24,
+    fontWeight: '900',
+    color: 'white',
+  },
+})

example/src/examples/Test06/ModalGroup.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+
+import { ModalView } from 'react-native-ios-modal';
+import { ModalGroupItemContent } from './ModalGroupItemContent';
+
+export type ModalGroupHandle = {
+  showModal: () => void;
+};
+
+export type ModalGroupProps = {};
+
+export const ModalGroup = React.forwardRef<ModalGroupHandle, ModalGroupProps>(
+  (_, ref) => {
+    const [currentModalIndex, setCurrentModalIndex] = React.useState(0);
+
+    const modalRefs = React.useRef<Record<string, ModalView | undefined>>({});
+
+    const modalGroupItems: JSX.Element[] = [];
+
+    // callable functions...
+    React.useImperativeHandle(ref, () => ({
+      showModal: () => {
+        const targetModalIndex = 0;
+
+        const modalRef = modalRefs.current[`${targetModalIndex}`];
+
+        // guard
+        if (modalRef == null) {
+          return;
+        }
+
+        // open first modal
+        modalRef.setVisibility(true);
+        setCurrentModalIndex(targetModalIndex + 1);
+      },
+    }));
+
+    // render next modal in advance
+    const modalsToMountCount = currentModalIndex + 1;
+
+    for (let index = 0; index <= modalsToMountCount; index++) {
+      modalGroupItems.push(
+        <ModalView
+          key={`ModalView-${index}`}
+          containerStyle={styles.modalGroupModal}
+          ref={(_ref) => {
+            modalRefs.current[`${index}`] = _ref;
+          }}
+        >
+          <ModalGroupItemContent
+            modalIndex={index}
+            onPressOpenNextModal={(modalIndex) => {
+              const nextModalIndex = modalIndex + 1;
+
+              const modalRef = modalRefs.current[`${nextModalIndex}`];
+
+              // guard
+              if (modalRef == null) {
+                return;
+              }
+
+              // open next modal
+              setCurrentModalIndex(nextModalIndex);
+              modalRef.setVisibility(true);
+            }}
+          />
+        </ModalView>
+      );
+    }
+
+    return <React.Fragment>{modalGroupItems}</React.Fragment>;
+  }
+);
+
+export const styles = StyleSheet.create({
+  modalGroupModal: {
+    justifyContent: 'center',
+  },
+});