React native with react-native-elements - Warnings => 'ListItem.title' prop has been deprecated and will be removed in the next version - react-native-elements

Question

Has anyone gotten rid of these annoying warnings?
'ListItem.title' prop has been deprecated and will be removed in the next version.
* [native code]:null in __expoConsoleLog
- node_modules/react-native/Libraries/LogBox/LogBox.js:36:4 in console.warn
- node_modules/expo/build/environment/muteWarnings.fx.js:18:4 in warn
- node_modules/react-native-elements/src/list/ListItem.js:92:13 in ListItem
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:10989:26 in renderWithHooks
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:14035:27 in mountIndeterminateComponent
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:22002:24 in beginWork$$1
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20871:23 in performUnitOfWork
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20848:38 in workLoopSync
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20456:22 in performSyncWorkOnRoot
* [native code]:null in performSyncWorkOnRoot
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5703:31 in runWithPriority$argument_1
- node_modules/scheduler/cjs/scheduler.development.js:818:23 in unstable_runWithPriority
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5698:21 in flushSyncCallbackQueueImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5686:28 in flushSyncCallbackQueue
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19845:30 in scheduleUpdateOnFiber
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:11880:16 in dispatchAction
* [native code]:null in dispatchAction
* src/hooks/useStores.js:13:2 in useEffect$argument_0
- node_modules/promise/setimmediate/core.js:37:13 in tryCallOne
- node_modules/promise/setimmediate/core.js:123:24 in setImmediate$argument_0
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:135:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:183:16 in _callImmediatesPass
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:446:30 in callImmediates
* [native code]:null in callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:396:6 in __callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:144:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:373:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:143:4 in flushedQueue
* [native code]:null in flushedQueue
* [native code]:null in callFunctionReturnFlushedQueue
I'm running this in package.json "react-native-elements": "^2.3.2",
Per their documentation
here
It is a stable version
solution:
Rewrite all UI components, with new tags rather than props

Answer 1

For ListItem deprecation warnings, you can now set many of the props (such as title.) as children.
Upgrade guide that explains it:
https://react-native-elements.github.io/react-native-elements/blog/2020/08/10/2.3-upgrade-guide/
Sample listItem
<ListItem>
<ListItem.Content>
<ListItem.Title style={titleStyle} {...titleProps}>
{title}
</ListItem.Title>
</ListItem.Content>
</ListItem>

Answer 2

Let me expand Dylan's answer for a ListItem, I had the following, that deprecated after upgrading react-native-elements from version 2.3.2 to version 3.4.3:
<ListItem
key={index}
title={"Reset password"}
leftIcon={{
type: "material-community",
name: "lock-reset",
color: "#ccc",
}}
rightIcon={{
type: "material-community",
name: "chevron-right",
color: "#ccc",
}}
containerStyle={styles.menuItem}
onPress={() => resetPassword(navigation)}
/>
As you can see, I had a left icon, a title, and a right icon. So now I have:
<ListItem key={index} onPress={() => resetPassword(navigation)>
<Icon
name={"lock-reset"}
type={"material-community"}
color={"#ccc"}
/>
<ListItem.Content>
<ListItem.Title>{"Reset password"}</ListItem.Title>
</ListItem.Content>
<Icon
name={"chevron-right"}
type={"material-community"}
color={"#ccc"}
/>
</ListItem>
Remember the imports:
import { ListItem, Icon } from "react-native-elements";
Result: