Update

Initiated by mongodb/docs-realm@616f719

Author: arty-fact

components/ActionSheet.js

@@ -21,12 +21,16 @@ export function ActionSheet({ actions, visible, closeOverlay }) {
         {[...actions, cancelAction].map(({ title, action }) => (
           <ListItem
             key={title}
-            title={title}
             onPress={() => {
               closeOverlay();
               action();
-            }}
-          />
+            }}>
+            <ListItem.Content>
+                <ListItem.Title>
+                  {title}
+                </ListItem.Title>
+            </ListItem.Content> 
+          </ListItem>
         ))}
       </>
     </Overlay>

components/ManageTeam.js

@@ -67,11 +67,16 @@ export function ManageTeam() {
       </View>
       {teamMemberList.map((member) => (
         <ListItem
-          title={member.name}
           onPress={() => openDeleteDialogue(member)}
           bottomDivider
           key={member.name}
-        />
+        >
+          <ListItem.Content>
+              <ListItem.Title>
+                {member.name}
+              </ListItem.Title>
+          </ListItem.Content>
+        </ListItem>
       ))}
 
       <Text h4> Add member:</Text>

components/TaskItem.js

@@ -1,9 +1,11 @@
 import React, { useState } from "react";
-import { Text, ListItem } from "react-native-elements";
+import { ListItem, Text } from "react-native-elements";
 import { useTasks } from "../providers/TasksProvider";
 import { ActionSheet } from "./ActionSheet";
 import { Task } from "../schemas";
 
+import styles from "../stylesheet";
+
 export function TaskItem({ task }) {
   const [actionSheetVisible, setActionSheetVisible] = useState(false);
 
@@ -57,21 +59,25 @@ export function TaskItem({ task }) {
         }}
         actions={actions}
       />
-      <ListItem
-        key={task.id}
+      <ListItem 
+        key={task.id} 
         onPress={() => {
           setActionSheetVisible(true);
         }}
-        title={task.name}
-        bottomDivider
-        checkmark={
+        bottomDivider>
+        <ListItem.Content>
+          <ListItem.Title>
+            {task.name}
+            </ListItem.Title>
+        </ListItem.Content>
+        {
           task.status === Task.STATUS_COMPLETE ? (
             <Text>&#10004; {/* checkmark */}</Text>
           ) : task.status === Task.STATUS_IN_PROGRESS ? (
             <Text>In Progress</Text>
           ) : null
         }
-      />
+      </ListItem>
     </>
   );
 }

package.json

@@ -15,7 +15,7 @@
     "@react-navigation/stack": "^5.9.2",
     "react": "16.13.1",
     "react-native": "0.63.2",
-    "react-native-elements": "^2.2.1",
+    "react-native-elements": "^2.3.2",
     "react-native-gesture-handler": "^1.7.0",
     "react-native-reanimated": "^1.13.0",
     "react-native-safe-area-context": "^3.1.6",

views/ProjectsView.js

@@ -20,11 +20,16 @@ export function ProjectsView({ navigation }) {
       {projectData.map((project) => (
         <View key={project.name}>
           <ListItem
-            title={project.name}
             onPress={() => onClickProject(project)}
             bottomDivider
             key={project.name}
-          />
+          >
+            <ListItem.Content>
+              <ListItem.Title>
+                {project.name}
+              </ListItem.Title>
+            </ListItem.Content>
+          </ListItem>
         </View>
       ))}
     </View>