[Web] Selectable prop is deprecated

[alexandre1921]

I found this issue when I updated my dependencies. It seems that Selectable prop should be replaced from Icon component.

These are my dependencies:
"dependencies": {
"@apollo/client": "3.7.17",
"@expo/config-plugins": "7.2.5",
"@expo/vector-icons": "13.0.0",
"@expo/webpack-config": "18.1.2",
"@react-google-maps/api": "2.19.0",
"@react-native-community/netinfo": "9.3.10",
"@react-navigation/core": "6.4.9",
"@react-navigation/drawer": "6.6.3",
"@react-navigation/native": "6.1.7",
"@react-navigation/native-stack": "6.9.13",
"@turf/helpers": "6.5.0",
"@turf/intersect": "6.5.0",
"@turf/points-within-polygon": "6.5.0",
"core-js": "3.31.1",
"date-fns": "2.30.0",
"expo": "49.0.5",
"expo-font": "11.4.0",
"expo-localization": "14.3.0",
"expo-location": "16.1.0",
"expo-screen-orientation": "6.0.4",
"expo-splash-screen": "0.20.4",
"expo-status-bar": "1.6.0",
"expo-updates": "0.18.11",
"formik": "2.4.2",
"google-libphonenumber": "3.2.32",
"i18n-js": "4.3.0",
"immer": "10.0.2",
"invariant": "2.2.4",
"lodash.debounce": "4.0.8",
"lodash.upperfirst": "4.3.1",
"moti": "0.25.3",
"nuka-carousel": "6.0.3",
"polished": "4.2.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-error-boundary": "4.0.10",
"react-if": "4.1.5",
"react-native": "0.72.3",
"react-native-gesture-handler": "2.12.0",
"react-native-mask-text": "0.14.2",
"react-native-mmkv": "2.10.1",
"react-native-reanimated": "~3.3.0",
"react-native-responsive-screen": "1.4.2",
"react-native-safe-area-context": "4.6.3",
"react-native-screens": "~3.22.0",
"react-native-skeleton-component": "1.0.0",
"react-native-svg": "13.9.0",
"react-native-toast-notifications": "3.3.1",
"react-native-web": "0.19.7",
"styled-components": "5.3.11",
"ts-toolbelt": "9.6.0",
"use-places-autocomplete": "4.0.0",
"usehooks-ts": "2.9.1",
"wellknown": "0.5.0",
"yup": "1.2.0",
"yup-locale-pt": "0.0.9",
"yup-phone": "1.3.2",
"zustand": "4.3.9"
},
"devDependencies": {
"@babel/core": "7.22.9",
"@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
"@babel/plugin-proposal-optional-chaining": "7.21.0",
"@babel/preset-react": "7.22.5",
"@babel/runtime": "7.22.6",
"@expo/cli": "0.10.11",
"@testing-library/react-native": "12.1.3",
"@trivago/prettier-plugin-sort-imports": "4.2.0",
"@types/i18n-js": "3.8.4",
"@types/lodash.debounce": "4.0.7",
"@types/lodash.upperfirst": "4.3.7",
"@types/mocha": "10.0.1",
"@types/react": "18.2.16",
"@types/react-dom": "~18.0.10",
"@types/react-native": "0.72.2",
"@types/react-test-renderer": "18.0.0",
"@types/styled-components-react-native": "5.2.1",
"@types/wellknown": "0.5.5",
"@typescript-eslint/eslint-plugin": "6.2.0",
"@typescript-eslint/parser": "6.2.0",
"babel-eslint": "10.1.0",
"babel-plugin-inline-import": "3.0.0",
"babel-plugin-inline-react-svg": "2.0.2",
"cross-fetch": "4.0.0",
"eslint": "8.45.0",
"eslint-config-airbnb": "19.0.4",
"eslint-config-prettier": "8.8.0",
"eslint-plugin-import": "2.27.5",
"eslint-plugin-jsx-a11y": "6.7.1",
"eslint-plugin-prettier": "5.0.0",
"eslint-plugin-react": "7.33.0",
"eslint-plugin-react-hooks": "4.6.0",
"jest": "29.6.1",
"jest-expo": "49.0.0",
"prettier": "3.0.0",
"react-error-overlay": "6.0.11",
"react-native-dotenv": "3.4.9",
"react-native-svg-transformer": "1.1.0",
"react-test-renderer": "18.2.0",
"typescript": "5.1.6",
"webpack-bundle-analyzer": "4.9.0",
"workbox-background-sync": "7.0.0",
"workbox-broadcast-update": "7.0.0",
"workbox-cacheable-response": "7.0.0",
"workbox-core": "7.0.0",
"workbox-expiration": "7.0.0",
"workbox-google-analytics": "7.0.0",
"workbox-navigation-preload": "7.0.0",
"workbox-precaching": "7.0.0",
"workbox-range-requests": "7.0.0",
"workbox-routing": "7.0.0",
"workbox-strategies": "7.0.0",
"workbox-streams": "7.0.0",
"workbox-webpack-plugin": "7.0.0"
},

[tcaish]

I am experiencing this issue, as well.

[95checal]

A workaround for this is selectable={undefined}. It works for all of the Icon libraries.

Example:
<MaterialIcons name={"search"} size={50} color={"black"} selectable={undefined} />