expo / vector-icons

https://icons.expo.fyi
MIT License
647 stars 114 forks source link

[Web] Selectable prop is deprecated #265

Open alexandre1921 opened 11 months ago

alexandre1921 commented 11 months ago

I found this issue when I updated my dependencies. It seems that Selectable prop should be replaced from Icon component. image 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 commented 9 months ago

I am experiencing this issue, as well.

95checal commented 1 week ago

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} />