react-native-elearn-ui 0.1.7 → 0.1.9

package/lib/module/screens/PearlsScreen.js

@@ -0,0 +1,741 @@
+"use strict";
+
+import React, { useState } from 'react';
+import { View, ScrollView, StyleSheet, TouchableOpacity, SafeAreaView, StatusBar, Modal, Dimensions } from 'react-native';
+import { useElearnConfig } from "../context/ElearnConfigContext.js";
+import { useTheme } from "../context/ThemeContext.js";
+import { Typography, Card, Icon } from "../components/index.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const {
+  height: SCREEN_HEIGHT
+} = Dimensions.get('window');
+
+// Mock Chapter detail shape
+
+// Mock database matching user images
+const MOCK_PEARLS_TOPICS = [{
+  id: 'topic_head_neck',
+  title: 'Head and neck',
+  sections: {
+    'Head and Neck': [{
+      id: 'hn_c1',
+      number: 1,
+      title: 'Classify sino-nasal neoplasam. Discuss the newer entities',
+      isFree: true,
+      bullets: ['Benign Neoplasms: Benign sino-nasal tumors are generally slow-growing and less likely to invade surrounding structures. Common benign types include inverted papilloma, oncocytic Schneiderian papilloma, and fungiform papilloma, all of which originate from the Schneiderian mucosa. Inverted papilloma is notable for its local aggressiveness and high recurrence rate, sometimes exhibiting malignant transformation into squamous cell carcinoma.', 'Malignant Neoplasms: Malignant tumors of the sino-nasal tract are rare but clinically significant due to their aggressive behavior, late presentation, and complex anatomical constraints that limit surgical access. The most common malignant tumor is squamous cell carcinoma, often arising from dysplastic or papillomatous lesions.', 'Esthesioneuroblastoma: A notable entity originating from the olfactory epithelium and displaying variable degrees of malignancy. Additionally, melanoma, lymphoma, and undifferentiated carcinoma can also occur in the sino-nasal region, often presenting with nasal obstruction, epistaxis, and facial pain.']
+    }, {
+      id: 'hn_c2',
+      number: 2,
+      title: 'Histologic variants of ameloblastoma',
+      isLocked: true,
+      bullets: ['Ameloblastoma is a benign but locally aggressive odontogenic neoplasm.', 'Follicular and plexiform are the most common histologic patterns.', 'Unicystic variants have a better prognosis and lower recurrence rates.']
+    }, {
+      id: 'hn_c3',
+      number: 3,
+      title: 'Role of brush ctology in diagnosis of oral cancerous and precancerous lessions',
+      isLocked: true,
+      bullets: ['Oral brush cytology is a non-invasive screening aid.', 'High sensitivity for identifying cellular dysplasias.', 'Must be followed by scalpel biopsy for definitive diagnosis.']
+    }],
+    'Eye': [{
+      id: 'eye_c1',
+      number: 1,
+      title: 'Classify sino-nasal neoplasam. Discuss the newer entities',
+      isLocked: true,
+      bullets: []
+    }, {
+      id: 'eye_c2',
+      number: 2,
+      title: 'Histologic variants of ameloblastoma',
+      isLocked: true,
+      bullets: []
+    }]
+  }
+}, {
+  id: 'topic_brain_spine',
+  title: 'Brain, Spine and Meninges',
+  sections: {}
+}, {
+  id: 'topic_breast',
+  title: 'Breast Pathology',
+  sections: {}
+}, {
+  id: 'topic_skin',
+  title: 'Skin and Connective Tissue',
+  sections: {}
+}, {
+  id: 'topic_kidney',
+  title: 'Kidney & Urinary Tract',
+  sections: {}
+}, {
+  id: 'topic_gastro',
+  title: 'Gastro-Intestinal System',
+  sections: {}
+}, {
+  id: 'topic_endocrine',
+  title: 'Endocrine Pathology',
+  sections: {}
+}, {
+  id: 'topic_general',
+  title: 'General Pathology',
+  sections: {}
+}, {
+  id: 'topic_male_genital',
+  title: 'Male Genital System',
+  sections: {}
+}, {
+  id: 'topic_thoracic',
+  title: 'Thoracic Pathology',
+  sections: {}
+}];
+export const PearlsScreen = ({
+  onBack,
+  hideHeader = false
+}) => {
+  const {
+    callbacks
+  } = useElearnConfig();
+  const theme = useTheme();
+
+  // Navigation State
+  const [currentView, setCurrentView] = useState('topics');
+  const [selectedTopic, setSelectedTopic] = useState(null);
+
+  // Flatten all chapters of a topic to easily paginate inside the reader view
+  const [flattenedChapters, setFlattenedChapters] = useState([]);
+  const [activeChapterIndex, setActiveChapterIndex] = useState(0);
+  const [isCompleted, setIsCompleted] = useState(false);
+  const [bottomSheetVisible, setBottomSheetVisible] = useState(false);
+  const handleBackPress = () => {
+    if (currentView === 'reader') {
+      setCurrentView('chapters');
+    } else if (currentView === 'chapters') {
+      setCurrentView('topics');
+    } else {
+      if (onBack) {
+        onBack();
+      } else {
+        callbacks.onBackToDashboard?.();
+      }
+    }
+  };
+  const handleSelectTopic = topic => {
+    setSelectedTopic(topic);
+
+    // Flatten chapters for reader mode navigation
+    const flat = [];
+    Object.keys(topic.sections || {}).forEach(sectionName => {
+      const sectionChapters = topic.sections[sectionName] || [];
+      flat.push(...sectionChapters);
+    });
+    setFlattenedChapters(flat);
+    setCurrentView('chapters');
+  };
+  const handleSelectChapter = chapter => {
+    if (chapter.isLocked) return;
+    const index = flattenedChapters.findIndex(c => c.id === chapter.id);
+    if (index !== -1) {
+      setActiveChapterIndex(index);
+      setIsCompleted(false);
+      setCurrentView('reader');
+    }
+  };
+  const handlePrevChapter = () => {
+    if (activeChapterIndex > 0) {
+      setActiveChapterIndex(activeChapterIndex - 1);
+      setIsCompleted(false);
+    }
+  };
+  const handleNextChapter = () => {
+    if (activeChapterIndex < flattenedChapters.length - 1) {
+      setActiveChapterIndex(activeChapterIndex + 1);
+      setIsCompleted(false);
+    }
+  };
+
+  // --- View Renderers ---
+
+  // 1. Topic index list view (Screenshot 1)
+  const renderTopicsView = () => {
+    return /*#__PURE__*/_jsxs(ScrollView, {
+      contentContainerStyle: styles.scrollContent,
+      showsVerticalScrollIndicator: false,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "h2",
+        bold: true,
+        color: theme.textPrimary,
+        style: styles.sectionHeaderTitle,
+        children: "All Topics"
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.listContainer,
+        children: MOCK_PEARLS_TOPICS.map(topic => /*#__PURE__*/_jsx(TouchableOpacity, {
+          activeOpacity: 0.8,
+          onPress: () => handleSelectTopic(topic),
+          children: /*#__PURE__*/_jsx(Card, {
+            bordered: true,
+            style: styles.topicCard,
+            children: /*#__PURE__*/_jsxs(View, {
+              style: styles.topicRow,
+              children: [/*#__PURE__*/_jsx(View, {
+                style: [styles.iconCircle, {
+                  backgroundColor: 'rgba(59, 130, 246, 0.08)'
+                }],
+                children: /*#__PURE__*/_jsx(Icon, {
+                  name: "file-text",
+                  size: 16,
+                  color: "#3B82F6"
+                })
+              }), /*#__PURE__*/_jsx(Typography, {
+                variant: "body",
+                bold: true,
+                color: theme.textPrimary,
+                style: styles.topicLabelText,
+                children: topic.title
+              })]
+            })
+          })
+        }, topic.id))
+      })]
+    });
+  };
+
+  // 2. Chapters list grouped by sections (Screenshot 2)
+  const renderChaptersView = () => {
+    if (!selectedTopic) return null;
+    const sections = Object.keys(selectedTopic.sections || {});
+    return /*#__PURE__*/_jsx(ScrollView, {
+      contentContainerStyle: styles.scrollContent,
+      showsVerticalScrollIndicator: false,
+      children: sections.map(sectionName => {
+        const list = selectedTopic.sections[sectionName] || [];
+        return /*#__PURE__*/_jsxs(View, {
+          style: styles.sectionBlock,
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "h2",
+            bold: true,
+            color: theme.textPrimary,
+            style: styles.sectionHeading,
+            children: sectionName
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.chaptersList,
+            children: list.map(chapter => /*#__PURE__*/_jsx(TouchableOpacity, {
+              activeOpacity: 0.8,
+              onPress: () => handleSelectChapter(chapter),
+              disabled: chapter.isLocked,
+              children: /*#__PURE__*/_jsx(Card, {
+                bordered: true,
+                style: styles.chapterCard,
+                children: /*#__PURE__*/_jsxs(View, {
+                  style: styles.chapterRow,
+                  children: [/*#__PURE__*/_jsx(Typography, {
+                    variant: "body",
+                    bold: true,
+                    color: theme.textSecondary,
+                    style: styles.chapterNumber,
+                    children: chapter.number
+                  }), /*#__PURE__*/_jsx(Typography, {
+                    variant: "body",
+                    color: theme.textPrimary,
+                    style: styles.chapterTitle,
+                    children: chapter.title
+                  }), /*#__PURE__*/_jsx(View, {
+                    style: styles.chapterBadgeCol,
+                    children: chapter.isFree ? /*#__PURE__*/_jsx(View, {
+                      style: [styles.freeBadge, {
+                        borderColor: theme.primary
+                      }],
+                      children: /*#__PURE__*/_jsx(Typography, {
+                        variant: "caption",
+                        bold: true,
+                        color: theme.primary,
+                        style: styles.freeText,
+                        children: "FREE"
+                      })
+                    }) : chapter.isLocked ? /*#__PURE__*/_jsx(View, {
+                      style: styles.lockCircle,
+                      children: /*#__PURE__*/_jsx(Icon, {
+                        name: "lock",
+                        size: 12,
+                        color: theme.textSecondary
+                      })
+                    }) : null
+                  })]
+                })
+              })
+            }, chapter.id))
+          })]
+        }, sectionName);
+      })
+    });
+  };
+
+  // 3. Reader view for high-yield content points (Screenshot 4)
+  const renderReaderView = () => {
+    const activeChapter = flattenedChapters[activeChapterIndex];
+    if (!activeChapter) return null;
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.readerContainer,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.readerSubHeader,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "body",
+          bold: true,
+          color: theme.textPrimary,
+          style: styles.readerSubTitle,
+          children: activeChapter.title.split('.')[0] || activeChapter.title
+        }), /*#__PURE__*/_jsxs(Typography, {
+          variant: "body",
+          bold: true,
+          color: theme.textSecondary,
+          children: [activeChapterIndex + 1, "/", flattenedChapters.length]
+        })]
+      }), /*#__PURE__*/_jsx(ScrollView, {
+        contentContainerStyle: styles.readerScroll,
+        showsVerticalScrollIndicator: false,
+        children: activeChapter.bullets.map((bullet, idx) => {
+          // Find bold title separator in bullet text if exists
+          const parts = bullet.split(':');
+          const boldPart = parts[0];
+          const rest = parts.slice(1).join(':');
+          return /*#__PURE__*/_jsxs(View, {
+            style: styles.bulletRow,
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "body",
+              color: theme.textPrimary,
+              style: styles.bulletPointDot,
+              children: "\u2022"
+            }), /*#__PURE__*/_jsx(Typography, {
+              variant: "body",
+              color: theme.textPrimary,
+              style: styles.bulletText,
+              children: rest ? /*#__PURE__*/_jsxs(_Fragment, {
+                children: [/*#__PURE__*/_jsxs(Typography, {
+                  variant: "body",
+                  bold: true,
+                  children: [boldPart, ":"]
+                }), rest]
+              }) : bullet
+            })]
+          }, idx);
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.checkboxBar,
+        children: /*#__PURE__*/_jsxs(TouchableOpacity, {
+          activeOpacity: 0.8,
+          onPress: () => setIsCompleted(!isCompleted),
+          style: styles.checkboxRow,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [styles.checkboxBox, {
+              borderColor: theme.border
+            }, isCompleted && {
+              backgroundColor: theme.primary,
+              borderColor: theme.primary
+            }],
+            children: isCompleted && /*#__PURE__*/_jsx(View, {
+              style: styles.checkboxInner
+            })
+          }), /*#__PURE__*/_jsx(Typography, {
+            variant: "body",
+            bold: true,
+            color: theme.textPrimary,
+            children: "Mark as Complete"
+          })]
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.footerRow,
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: handlePrevChapter,
+          disabled: activeChapterIndex === 0,
+          style: [styles.footerBtn, activeChapterIndex === 0 && {
+            opacity: 0.4
+          }],
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body",
+            bold: true,
+            color: theme.textPrimary,
+            children: "Prev"
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: handleNextChapter,
+          disabled: activeChapterIndex === flattenedChapters.length - 1,
+          style: [styles.nextActionBtn, {
+            backgroundColor: theme.primary
+          }, activeChapterIndex === flattenedChapters.length - 1 && {
+            opacity: 0.4
+          }],
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body",
+            bold: true,
+            color: "#FFFFFF",
+            children: "Next"
+          })
+        })]
+      })]
+    });
+  };
+
+  // --- Render bottom sheet overlay for topics filter (Screenshot 3) ---
+  const renderBottomSheet = () => {
+    const list = [{
+      name: 'Vertebral Curves',
+      count: 25
+    }, {
+      name: 'Introduction',
+      count: 15
+    }, {
+      name: 'Definition and scope',
+      count: 15
+    }, {
+      name: 'Branches of anatomy',
+      count: 5
+    }, {
+      name: 'Anatomical terminology',
+      count: 23
+    }, {
+      name: 'Anatomical positions',
+      count: 25
+    }, {
+      name: 'CSF',
+      count: 15
+    }, {
+      name: 'Levels of structural organization',
+      count: 15
+    }, {
+      name: 'Systems of the human body overview',
+      count: 5
+    }, {
+      name: 'Tissue types',
+      count: 23
+    }];
+    return /*#__PURE__*/_jsx(Modal, {
+      visible: bottomSheetVisible,
+      transparent: true,
+      animationType: "slide",
+      onRequestClose: () => setBottomSheetVisible(false),
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.sheetOverlay,
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          activeOpacity: 1,
+          style: styles.sheetBackdrop,
+          onPress: () => setBottomSheetVisible(false)
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.sheetContent,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.sheetGrabber
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.sheetHeader,
+            children: /*#__PURE__*/_jsx(Typography, {
+              variant: "h2",
+              bold: true,
+              color: theme.textPrimary,
+              children: "Anatomy"
+            })
+          }), /*#__PURE__*/_jsx(ScrollView, {
+            contentContainerStyle: styles.sheetScroll,
+            children: list.map((item, idx) => /*#__PURE__*/_jsxs(TouchableOpacity, {
+              style: styles.sheetItemRow,
+              onPress: () => {
+                setBottomSheetVisible(false);
+                // Filter or change chapters list
+              },
+              children: [/*#__PURE__*/_jsx(Typography, {
+                variant: "body",
+                color: theme.textPrimary,
+                children: item.name
+              }), /*#__PURE__*/_jsxs(Typography, {
+                variant: "caption",
+                color: theme.textSecondary,
+                children: [item.count, " Modules"]
+              })]
+            }, idx))
+          })]
+        })]
+      })
+    });
+  };
+  return /*#__PURE__*/_jsxs(SafeAreaView, {
+    style: [styles.safeArea, {
+      backgroundColor: theme.background
+    }],
+    children: [/*#__PURE__*/_jsx(StatusBar, {
+      barStyle: "dark-content"
+    }), !hideHeader && /*#__PURE__*/_jsxs(View, {
+      style: styles.header,
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: handleBackPress,
+        style: styles.backButton,
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: "arrow-left",
+          size: 20,
+          color: theme.textPrimary
+        })
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "h2",
+        bold: true,
+        style: styles.headerTitle,
+        children: "Pearls"
+      }), currentView === 'chapters' ? /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: () => setBottomSheetVisible(true),
+        style: styles.headerRightBtn,
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: "list",
+          size: 20,
+          color: theme.textPrimary
+        })
+      }) : currentView === 'topics' ? /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.headerRightBtn,
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: "search",
+          size: 20,
+          color: theme.textPrimary
+        })
+      }) : /*#__PURE__*/_jsx(View, {
+        style: styles.headerRightPlaceholder
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.mainViewContainer,
+      children: [currentView === 'topics' && renderTopicsView(), currentView === 'chapters' && renderChaptersView(), currentView === 'reader' && renderReaderView()]
+    }), renderBottomSheet()]
+  });
+};
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12
+  },
+  backButton: {
+    padding: 6
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '700'
+  },
+  headerRightBtn: {
+    padding: 6
+  },
+  headerRightPlaceholder: {
+    width: 32
+  },
+  mainViewContainer: {
+    flex: 1
+  },
+  scrollContent: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 24
+  },
+  sectionHeaderTitle: {
+    fontSize: 16,
+    marginBottom: 16
+  },
+  listContainer: {
+    marginTop: 4
+  },
+  topicCard: {
+    padding: 14,
+    marginBottom: 10,
+    borderRadius: 12
+  },
+  topicRow: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  iconCircle: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 14
+  },
+  topicLabelText: {
+    fontSize: 14
+  },
+  // --- Chapters list design styles ---
+  sectionBlock: {
+    marginBottom: 20
+  },
+  sectionHeading: {
+    fontSize: 16,
+    marginBottom: 12
+  },
+  chaptersList: {
+    marginTop: 2
+  },
+  chapterCard: {
+    padding: 12,
+    marginBottom: 10,
+    borderRadius: 12
+  },
+  chapterRow: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  chapterNumber: {
+    fontSize: 14,
+    width: 24,
+    textAlign: 'center',
+    marginRight: 8
+  },
+  chapterTitle: {
+    flex: 1,
+    fontSize: 14,
+    lineHeight: 18
+  },
+  chapterBadgeCol: {
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+    marginLeft: 8
+  },
+  freeBadge: {
+    borderWidth: 1.5,
+    borderRadius: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 3
+  },
+  freeText: {
+    fontSize: 9
+  },
+  lockCircle: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: '#F1F5F9',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  // --- Reader view design styles ---
+  readerContainer: {
+    flex: 1
+  },
+  readerSubHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E2E8F0'
+  },
+  readerSubTitle: {
+    flex: 1,
+    fontSize: 14,
+    marginRight: 16
+  },
+  readerScroll: {
+    paddingHorizontal: 16,
+    paddingVertical: 16
+  },
+  bulletRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    marginBottom: 16
+  },
+  bulletPointDot: {
+    fontSize: 18,
+    marginRight: 10,
+    lineHeight: 20
+  },
+  bulletText: {
+    flex: 1,
+    fontSize: 14,
+    lineHeight: 22
+  },
+  checkboxBar: {
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderTopWidth: 1,
+    borderTopColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC'
+  },
+  checkboxRow: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  checkboxBox: {
+    width: 20,
+    height: 20,
+    borderWidth: 2,
+    borderRadius: 4,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 10
+  },
+  checkboxInner: {
+    width: 10,
+    height: 10,
+    borderRadius: 2,
+    backgroundColor: '#FFFFFF'
+  },
+  footerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: '#FFFFFF',
+    borderTopWidth: 1,
+    borderTopColor: '#E2E8F0',
+    justifyContent: 'space-between'
+  },
+  footerBtn: {
+    paddingVertical: 8,
+    paddingHorizontal: 12
+  },
+  nextActionBtn: {
+    paddingHorizontal: 24,
+    paddingVertical: 10,
+    borderRadius: 8,
+    minWidth: 80,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  // --- Slide-up Sheet styling details ---
+  sheetOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+    justifyContent: 'flex-end'
+  },
+  sheetBackdrop: {
+    ...StyleSheet.absoluteFillObject
+  },
+  sheetContent: {
+    backgroundColor: '#FFFFFF',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    maxHeight: SCREEN_HEIGHT * 0.7,
+    paddingBottom: 20
+  },
+  sheetGrabber: {
+    width: 40,
+    height: 4,
+    backgroundColor: '#E2E8F0',
+    borderRadius: 2,
+    alignSelf: 'center',
+    marginTop: 8,
+    marginBottom: 16
+  },
+  sheetHeader: {
+    paddingHorizontal: 20,
+    paddingBottom: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#F1F5F9'
+  },
+  sheetScroll: {
+    paddingHorizontal: 20,
+    paddingVertical: 8
+  },
+  sheetItemRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: '#F8FAFC'
+  }
+});
+//# sourceMappingURL=PearlsScreen.js.map