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

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: