feat: migrate ListItem to DSRN usage (#28878)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

Migrated `ListItem` component as part of pilot migration.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-280

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**


https://github.com/user-attachments/assets/afc628d9-29a8-458f-a524-48ac0f90b651

### **After**


https://github.com/user-attachments/assets/865bbc0a-6a2c-4cf8-82fa-fe6d7cc61101

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

#### Performance checks (if applicable)

- [ ] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [ ] I've tested with a power user scenario
- Use these [power-user
SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> UI-only component migration with snapshot updates; main risk is minor
layout/spacing/accessibility regressions in the settings drawer rows.
> 
> **Overview**
> Migrates `SettingsDrawer` from legacy list components
(`ListItemColumn`/`WidthType`) to `@metamask/design-system-react-native`
primitives (`ListItem` + `Box`) while preserving the same content
structure (title/description/warning and optional arrow).
> 
> Updates the `DefaultSettings` onboarding success Jest snapshot to
reflect the new rendered tree/styles from the DSRN components.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
02bc58c. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: kirillzyusko

app/components/UI/SettingsDrawer/index.js

@@ -9,10 +9,11 @@ import Icon, {
   IconName,
   IconSize,
 } from '../../../component-library/components/Icons/Icon';
-import ListItem from '../../../component-library/components/List/ListItem/ListItem';
-import ListItemColumn, {
-  WidthType,
-} from '../../../component-library/components/List/ListItemColumn';
+import {
+  Box,
+  BoxFlexDirection,
+  ListItem,
+} from '@metamask/design-system-react-native';
 import Text, {
   TextVariant,
   TextColor,
@@ -97,7 +98,7 @@ const SettingsDrawer = ({
   return (
     <TouchableOpacity onPress={onPress} {...generateTestId(Platform, testID)}>
       <ListItem style={styles.root} gap={16}>
-        <ListItemColumn widthType={WidthType.Fill}>
+        <Box flexDirection={BoxFlexDirection.Column} twClassName="flex-1">
           <Text variant={TextVariant.BodyLGMedium} color={titleColor}>
             {title}
           </Text>
@@ -122,15 +123,15 @@ const SettingsDrawer = ({
               </Text>
             </View>
           )}
-        </ListItemColumn>
+        </Box>
         {renderArrowRight && (
-          <ListItemColumn>
+          <Box>
             <Icon
               style={styles.action}
               size={IconSize.Md}
               name={IconName.ArrowRight}
             />
-          </ListItemColumn>
+          </Box>
         )}
       </ListItem>
     </TouchableOpacity>

app/components/Views/OnboardingSuccess/DefaultSettings/__snapshots__/index.test.tsx.snap

@@ -64,30 +64,51 @@ exports[`DefaultSettings should render correctly 1`] = `
       onPress={[Function]}
     >
       <View
-        accessibilityRole="none"
-        accessible={true}
         style={
-          {
-            "backgroundColor": "#ffffff",
-            "padding": 16,
-          }
+          [
+            {
+              "display": "flex",
+            },
+            [
+              {
+                "paddingBottom": 16,
+                "paddingLeft": 16,
+                "paddingRight": 16,
+                "paddingTop": 16,
+              },
+              {
+                "backgroundColor": "#ffffff",
+                "padding": 16,
+              },
+            ],
+          ]
         }
       >
         <View
           style={
-            {
-              "alignItems": "center",
-              "flexDirection": "row",
-            }
+            [
+              {
+                "alignItems": "center",
+                "display": "flex",
+                "flexDirection": "row",
+              },
+              undefined,
+            ]
           }
         >
           <View
             style={
-              {
-                "flex": 1,
-              }
+              [
+                {
+                  "display": "flex",
+                  "flexBasis": "0%",
+                  "flexDirection": "column",
+                  "flexGrow": 1,
+                  "flexShrink": 1,
+                },
+                undefined,
+              ]
             }
-            testID="listitemcolumn"
           >
             <Text
               accessibilityRole="text"
@@ -129,11 +150,13 @@ exports[`DefaultSettings should render correctly 1`] = `
           />
           <View
             style={
-              {
-                "flex": -1,
-              }
+              [
+                {
+                  "display": "flex",
+                },
+                undefined,
+              ]
             }
-            testID="listitemcolumn"
           >
             <SvgMock
               color="#131416"
@@ -157,30 +180,51 @@ exports[`DefaultSettings should render correctly 1`] = `
       onPress={[Function]}
     >
       <View
-        accessibilityRole="none"
-        accessible={true}
         style={
-          {
-            "backgroundColor": "#ffffff",
-            "padding": 16,
-          }
+          [
+            {
+              "display": "flex",
+            },
+            [
+              {
+                "paddingBottom": 16,
+                "paddingLeft": 16,
+                "paddingRight": 16,
+                "paddingTop": 16,
+              },
+              {
+                "backgroundColor": "#ffffff",
+                "padding": 16,
+              },
+            ],
+          ]
         }
       >
         <View
           style={
-            {
-              "alignItems": "center",
-              "flexDirection": "row",
-            }
+            [
+              {
+                "alignItems": "center",
+                "display": "flex",
+                "flexDirection": "row",
+              },
+              undefined,
+            ]
           }
         >
           <View
             style={
-              {
-                "flex": 1,
-              }
+              [
+                {
+                  "display": "flex",
+                  "flexBasis": "0%",
+                  "flexDirection": "column",
+                  "flexGrow": 1,
+                  "flexShrink": 1,
+                },
+                undefined,
+              ]
             }
-            testID="listitemcolumn"
           >
             <Text
               accessibilityRole="text"
@@ -222,11 +266,13 @@ exports[`DefaultSettings should render correctly 1`] = `
           />
           <View
             style={
-              {
-                "flex": -1,
-              }
+              [
+                {
+                  "display": "flex",
+                },
+                undefined,
+              ]
             }
-            testID="listitemcolumn"
           >
             <SvgMock
               color="#131416"
@@ -250,30 +296,51 @@ exports[`DefaultSettings should render correctly 1`] = `
       onPress={[Function]}
     >
       <View
-        accessibilityRole="none"
-        accessible={true}
         style={
-          {
-            "backgroundColor": "#ffffff",
-            "padding": 16,
-          }
+          [
+            {
+              "display": "flex",
+            },
+            [
+              {
+                "paddingBottom": 16,
+                "paddingLeft": 16,
+                "paddingRight": 16,
+                "paddingTop": 16,
+              },
+              {
+                "backgroundColor": "#ffffff",
+                "padding": 16,
+              },
+            ],
+          ]
         }
       >
         <View
           style={
-            {
-              "alignItems": "center",
-              "flexDirection": "row",
-            }
+            [
+              {
+                "alignItems": "center",
+                "display": "flex",
+                "flexDirection": "row",
+              },
+              undefined,
+            ]
           }
         >
           <View
             style={
-              {
-                "flex": 1,
-              }
+              [
+                {
+                  "display": "flex",
+                  "flexBasis": "0%",
+                  "flexDirection": "column",
+                  "flexGrow": 1,
+                  "flexShrink": 1,
+                },
+                undefined,
+              ]
             }
-            testID="listitemcolumn"
           >
             <Text
               accessibilityRole="text"
@@ -315,11 +382,13 @@ exports[`DefaultSettings should render correctly 1`] = `
           />
           <View
             style={
-              {
-                "flex": -1,
-              }
+              [
+                {
+                  "display": "flex",
+                },
+                undefined,
+              ]
             }
-            testID="listitemcolumn"
           >
             <SvgMock
               color="#131416"