⭐️ Impl: Ex - Update Test05

TODO:2023-03-04-03-59-43 - Re-Write Examples in Typescript

example/src/examples/Test05.tsx

@@ -0,0 +1,135 @@
+import * as React from 'react';
+import { ScrollView, StyleSheet, View, Text } from 'react-native';
+
+import type { ExampleProps } from './SharedExampleTypes';
+
+import { ExampleCard } from '../components/ExampleCard';
+
+import { CardBody, CardButton, CardTitle } from '../components/Card';
+
+import { ModalView } from 'react-native-ios-modal';
+
+import * as Colors from '../constants/Colors';
+
+function DummyItems() {
+  let items: JSX.Element[] = [];
+
+  for (let index = 0; index < 30; index++) {
+    // prettier-ignore
+    const backgroundColor = (
+      (index % 4 === 0) ? Colors.RED   [900] :
+      (index % 4 === 1) ? Colors.BLUE  [900] :
+      (index % 4 === 2) ? Colors.YELLOW[900] :
+      (index % 4 === 3) ? Colors.PURPLE[900] :
+      /* default */ Colors.GREEN[900]
+    );
+
+    const dummyItemLeftSquareStyle = {
+      backgroundColor,
+    };
+
+    items.push(
+      <View
+        //
+        key={`item-${index}`}
+        style={styles.dummyItemContainer}
+      >
+        <View style={[styles.dummyItemLeftSquare, dummyItemLeftSquareStyle]} />
+        <View style={styles.dummyItemRightContainer}>
+          <Text style={styles.dummyItemLabel}>
+            {/* Label */ `Item #${index}`}
+          </Text>
+          <Text style={styles.dummyItemDesc}>
+            {/* Desc */ `Item Description - lorum ipsum sit #${index}`}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  return items;
+}
+
+export function Test05(props: ExampleProps) {
+  const modalRef = React.useRef<ModalView>(null);
+
+  return (
+    <ExampleCard
+      style={props.style}
+      index={props.index}
+      title={'Test05'}
+      subtitle={'Modal + ScrollView Test'}
+      description={['Test for ScrollView in modal']}
+    >
+      <ModalView
+        // TBA
+        ref={modalRef}
+        containerStyle={styles.modalContainer}
+      >
+        <ScrollView
+          style={styles.scroll}
+          contentContainerStyle={styles.scrollContentContainer}
+        >
+          <CardBody style={styles.modalCard}>
+            <CardTitle title={'Modal + ScrollView Test'} />
+          </CardBody>
+          {DummyItems()}
+          <CardButton
+            style={styles.modalCloseButton}
+            title={'Close Modal'}
+            onPress={() => {
+              modalRef.current?.setVisibility(false);
+            }}
+          />
+        </ScrollView>
+      </ModalView>
+      <CardButton
+        title={'Show Modal'}
+        onPress={() => {
+          modalRef.current.setVisibility(true);
+        }}
+      />
+    </ExampleCard>
+  );
+}
+
+export const styles = StyleSheet.create({
+  scroll: {
+    flex: 1,
+    marginTop: 25,
+  },
+  scrollContentContainer: {
+    paddingBottom: 15,
+  },
+  modalContainer: {},
+  modalCard: {
+    backgroundColor: 'white',
+    alignSelf: 'center',
+    marginBottom: 20,
+  },
+  modalCloseButton: {
+    marginVertical: 20,
+    marginHorizontal: 12,
+  },
+
+  dummyItemContainer: {
+    flexDirection: 'row',
+  },
+  dummyItemLeftSquare: {
+    aspectRatio: 1,
+    width: 75,
+  },
+  dummyItemRightContainer: {
+    marginLeft: 10,
+    flex: 1,
+    justifyContent: 'center',
+  },
+  dummyItemLabel: {
+    fontWeight: '600',
+    fontSize: 20,
+  },
+  dummyItemDesc: {
+    color: Colors.GREY[800],
+    marginTop: 2,
+  },
+});

example/src/screens/HomeScreen.tsx

@@ -13,6 +13,7 @@ import { Test01 } from '../examples/Test01';
 import { Test02 } from '../examples/Test02';
 import { Test03 } from '../examples/Test03';
 import { Test04 } from '../examples/Test04';
+import { Test05 } from '../examples/Test05';
 
 import { Example01 } from '../examples/Example01';
 
@@ -41,6 +42,7 @@ const EXAMPLE_COMPONENTS: Array<ExampleComponentItem> = [
   Test02,
   Test03,
   Test04,
+  Test05,
   Example01,
   SHARED_ENV.enableReactNavigation && DebugControls,
 ];