Use proper type for children

src/components/Settings/shared/ToggleSettings.tsx

@@ -1,12 +1,10 @@
-import React, { ReactNode, useState } from 'react'
+import React, { PropsWithChildren, useState } from 'react'
 import { Pressable, StyleSheet, View } from 'react-native'
 import CustomIcon from '../../shared/CustomIcon'
 import SettingsItemLabel, { SettingsItemLabelProps } from './SettingsItemLabel'
 import { settingItemButtonRippleConfig } from './values'
 
-type Props = SettingsItemLabelProps & {
-  children: ReactNode
-}
+type Props = PropsWithChildren<SettingsItemLabelProps>
 
 const ToggleSettings = ({ title, description, children }: Props) => {
   const [renderSettings, setRenderSettings] = useState(false)

src/contexts/SearchContextWrapper.tsx

@@ -1,12 +1,8 @@
-import React, { ReactNode, RefObject, useMemo, useRef } from 'react'
+import React, { PropsWithChildren, RefObject, useMemo, useRef } from 'react'
 import { TextInput } from 'react-native'
 import SearchContext, { SearchContextType } from './SearchContext'
 
-type Props = {
-  children: ReactNode
-}
-
-const SearchContextWrapper = ({ children }: Props) => {
+const SearchContextWrapper = ({ children }: PropsWithChildren) => {
   const searchInputRef: RefObject<TextInput> | null = useRef(null)
 
   const clearSearchInput = () => {

utils/test/utils.tsx

@@ -1,6 +1,6 @@
 import { configureStore, PreloadedState, Store } from '@reduxjs/toolkit'
 import { render, RenderOptions } from '@testing-library/react-native'
-import React, { ReactElement, ReactNode } from 'react'
+import React, { PropsWithChildren, ReactElement } from 'react'
 import { Provider as PaperProvider } from 'react-native-paper'
 import { Provider as StoreProvider } from 'react-redux'
 import SearchContext, { SearchContextType } from '../../src/contexts/SearchContext'
@@ -22,7 +22,7 @@ export const renderWithProvider = (
     ...renderOptions
   }: ExtendedRenderOptions = {}
 ) => {
-  const wrapper = ({ children }: { children: ReactNode }): JSX.Element => {
+  const wrapper = ({ children }: PropsWithChildren): JSX.Element => {
     return (
       <StoreProvider store={store}>
         <PaperProvider>{children}</PaperProvider>
@@ -43,7 +43,7 @@ export const renderWithProviderAndContexts = (
     ...renderOptions
   }: ExtendedRenderOptions = {}
 ) => {
-  const wrapper = ({ children }: { children: ReactNode }): JSX.Element => {
+  const wrapper = ({ children }: PropsWithChildren): JSX.Element => {
     return (
       <StoreProvider store={store}>
         <SearchContext.Provider value={searchContextValue}>