diff --git a/.github/workflows/versions.yml b/.github/workflows/versions.yml index c246b86e33..45648a93f6 100644 --- a/.github/workflows/versions.yml +++ b/.github/workflows/versions.yml @@ -8,14 +8,11 @@ jobs: if: ${{ github.event.label.name == 'bug' }} runs-on: ubuntu-latest steps: - - uses: react-navigation/check-versions-action@v1.0.0 + - uses: react-navigation/check-versions-action@v1.1.0 with: github-token: ${{ secrets.GITHUB_TOKEN }} required-packages: | - react-native react-native-paper - react-native-vector-icons optional-packages: | - expo - npm - yarn + @react-native-vector-icons/common + @react-native-vector-icons/material-design-icons diff --git a/docs/docs/guides/01-getting-started.md b/docs/docs/guides/01-getting-started.md index 60797e5b8e..38c0ef6070 100644 --- a/docs/docs/guides/01-getting-started.md +++ b/docs/docs/guides/01-getting-started.md @@ -6,13 +6,13 @@ title: Getting Started ## Installation -* Open a Terminal in your project's folder and run: +- Open a Terminal in your project's folder and run: ```bash npm2yarn npm install react-native-paper ``` -* From `v5` there is a need to install [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) for handling safe area. +- From `v5` there is a need to install [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) for handling safe area. ```bash npm2yarn npm install react-native-safe-area-context @@ -24,19 +24,25 @@ Additionaly for `iOS` platform there is a requirement to link the native parts o npx pod-install ``` -* If you're on a vanilla React Native project, you also need to install and link [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons). +- If you're on a vanilla React Native project, you also need to install and link [@react-native-vector-icons/common](https://github.com/oblador/react-native-vector-icons). -Specifically `MaterialCommunityIcons` icon pack needs to be included in the project, because some components use those internally (e.g. `AppBar.BackAction` on Android). +Specifically `MaterialDesignIcons` icon pack needs to be included in the project, because some components use those internally (e.g. `AppBar.BackAction` on Android). ```bash npm2yarn -npm install react-native-vector-icons +npm install @react-native-vector-icons/common @react-native-vector-icons/material-design-icons ``` -The library has specified dedicated steps for each platform. Please follow their [installation guide](https://github.com/oblador/react-native-vector-icons#installation) in order to properly use icon fonts. +:::note +The `react-native-vector-icons` library requires some additional setup steps for each platform. To ensure proper use of icon fonts, please follow their [installation guide](https://github.com/oblador/react-native-vector-icons?tab=readme-ov-file#setup). +::: +If you use Expo, you don't need to install vector icons - those are the part of the expo package. However, if you have a `babel.config.js` or `.babelrc` file, make sure that it includes `babel-preset-expo`. + +:::info If you don't want to install vector icons, you can use [babel-plugin-optional-require](https://github.com/satya164/babel-plugin-optional-require) to opt-out. +:::note -If you use Expo, you don't need to install vector icons. But if you have a `babel.config.js` or `.babelrc` file, make sure that it includes `babel-preset-expo`. +### Bundle size optimization To get smaller bundle size by excluding modules you don't use, you can use our optional babel plugin. The plugin automatically rewrites the import statements so that only the modules you use are imported instead of the whole library. Add `react-native-paper/babel` to the `plugins` section in your `babel.config.js` for production environment. It should look like this: @@ -54,7 +60,7 @@ module.exports = { If you created your project using Expo, it'll look something like this: ```js -module.exports = function(api) { +module.exports = function (api) { api.cache(true); return { presets: ['babel-preset-expo'], @@ -136,7 +142,10 @@ Example: ```js import * as React from 'react'; -import { MD3LightTheme as DefaultTheme, PaperProvider } from 'react-native-paper'; +import { + MD3LightTheme as DefaultTheme, + PaperProvider, +} from 'react-native-paper'; import App from './src/App'; const theme = { diff --git a/docs/docs/guides/03-icons.mdx b/docs/docs/guides/03-icons.mdx index 39df931201..289b277510 100644 --- a/docs/docs/guides/03-icons.mdx +++ b/docs/docs/guides/03-icons.mdx @@ -8,9 +8,11 @@ import IconsList from '@site/src/components/IconsList.tsx'; ## Configuring icons -Many of the components require the [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) library to render correctly. If you're using Expo, you don't need to do anything extra, but if it's a vanilla React Native project, you need to link the library as described in the getting started guide. +Many of the components require the [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) library to render correctly. If you're using Expo, you don't need to do anything extra, but if it's a vanilla React Native project, you need to link the library as described in the [getting started guide](./01-getting-started.md). +:::note If you opted out of vector icons support using [babel-plugin-optional-require](https://github.com/satya164/babel-plugin-optional-require), you won't be able to use icon names for the icon prop. Some components may not look correct without vector icons and might need extra configuration. +::: ## Using the `icon` prop @@ -18,17 +20,16 @@ Many components such as `Button` accept an `icon` prop which is used to display ### 1. An icon name -You can pass the name of an icon from [`MaterialCommunityIcons`](https://materialdesignicons.com). This will use the [`react-native-vector-icons`](https://github.com/oblador/react-native-vector-icons) library to display the icon. +You can pass the name of an icon from [`MaterialDesignIcons`](https://pictogrammers.com/library/mdi/). This will use the [`@react-native-vector-icons/material-design-icons`](https://github.com/oblador/react-native-vector-icons/tree/master/packages/material-design-icons) library to display the icon. Example: ```js - + ``` -
See the list of supported icons +
+ See the list of supported icons
@@ -39,7 +40,9 @@ You can pass an image source, such as an object of shape `{ uri: 'https://path.t Remote image: ```js - ``` @@ -47,9 +50,7 @@ Remote image: Local image: ```js - + ``` ### 3. A render function @@ -73,22 +74,22 @@ Example: ### 4. Use custom icons -If you want to use icons other than `MaterialCommunityIcons` you need to import the icons and pass it to the `settings` prop within `PaperProvider`. +If you want to use icons other than `MaterialDesignIcons` you need to import the icons and pass it to the `settings` prop within `PaperProvider`. Example: ```js -import AwesomeIcon from 'react-native-vector-icons/FontAwesome'; +import AwesomeIcon from '@react-native-vector-icons/fontawesome'; // ... - , - }} - theme={this.state.theme} - > - // ... - + , + }} + theme={this.state.theme} +> + // ... +; ``` ## RTL support @@ -102,7 +103,14 @@ If you want your icon to behave properly in a RTL environment, you can pass an o Example for using an image source: ```js - ``` @@ -110,9 +118,7 @@ Example for using an image source: Example for using an icon name: ```js - + ``` You can also use a render function. Along with `size` and `color`, you have access to `direction` which will either be `'rtl'` or `'ltr'`. You can then decide how to render your icon component accordingly. @@ -131,8 +137,8 @@ Example of using a render function: { width: size, height: size, - tintColor: color - } + tintColor: color, + }, ]} /> )} diff --git a/docs/docs/guides/05-react-native-web.md b/docs/docs/guides/05-react-native-web.md index 14b2f14a7a..af0331a7d9 100644 --- a/docs/docs/guides/05-react-native-web.md +++ b/docs/docs/guides/05-react-native-web.md @@ -32,7 +32,7 @@ module.exports = function override(config, env) { test: /\.js$/, exclude: /node_modules[/\\](?!react-native-vector-icons)/, use: { - loader: "babel-loader", + loader: 'babel-loader', options: { // Disable reading babel configuration babelrc: false, @@ -40,17 +40,17 @@ module.exports = function override(config, env) { // The configuration for compilation presets: [ - ["@babel/preset-env", { useBuiltIns: "usage" }], - "@babel/preset-react", - "@babel/preset-flow", - "@babel/preset-typescript" + ['@babel/preset-env', { useBuiltIns: 'usage' }], + '@babel/preset-react', + '@babel/preset-flow', + '@babel/preset-typescript', ], plugins: [ - "@babel/plugin-proposal-class-properties", - "@babel/plugin-proposal-object-rest-spread" - ] - } - } + '@babel/plugin-proposal-class-properties', + '@babel/plugin-proposal-object-rest-spread', + ], + }, + }, }); return config; @@ -102,13 +102,9 @@ module.exports = { // Loaders and resolver config module: { - rules: [ - - ], - }, - resolve: { - + rules: [], }, + resolve: {}, // Development server config devServer: { @@ -121,17 +117,22 @@ module.exports = { Also create a folder named `public` and add the following file named `index.html`: ```html - + - + - + App ) : null} diff --git a/docs/docs/guides/09-bottom-navigation.md b/docs/docs/guides/09-bottom-navigation.md index c498a9d4af..ba3bc33f3a 100644 --- a/docs/docs/guides/09-bottom-navigation.md +++ b/docs/docs/guides/09-bottom-navigation.md @@ -195,7 +195,7 @@ navigation.jumpTo('Profile', { name: 'Michaś' }); ```js import { createMaterialBottomTabNavigator } from 'react-native-paper/react-navigation'; -import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; +import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons'; const Tab = createMaterialBottomTabNavigator(); @@ -212,7 +212,7 @@ function MyTabs() { options={{ tabBarLabel: 'Home', tabBarIcon: ({ color }) => ( - + ), }} /> @@ -222,7 +222,7 @@ function MyTabs() { options={{ tabBarLabel: 'Updates', tabBarIcon: ({ color }) => ( - + ), }} /> @@ -232,11 +232,11 @@ function MyTabs() { options={{ tabBarLabel: 'Profile', tabBarIcon: ({ color }) => ( - + ), }} /> ); } -``` \ No newline at end of file +``` diff --git a/docs/package.json b/docs/package.json index 58f5aba063..93e3346d15 100644 --- a/docs/package.json +++ b/docs/package.json @@ -23,6 +23,8 @@ "@easyops-cn/docusaurus-search-local": "^0.33.4", "@material/material-color-utilities": "0.2.4", "@mdx-js/react": "^1.6.22", + "@react-native-vector-icons/common": "^11.0.0", + "@react-native-vector-icons/material-design-icons": "^7.4.47", "camelcase": "^7.0.1", "clsx": "^1.2.1", "color": "^4.2.3", @@ -32,7 +34,6 @@ "react-color": "^2.19.3", "react-dom": "17.0.2", "react-native-safe-area-context": "^4.5.0", - "react-native-vector-icons": "^9.2.0", "react-native-web": "^0.18.12", "use-latest-callback": "^0.1.7" }, diff --git a/docs/plugins/docusaurus-react-native-plugin.js b/docs/plugins/docusaurus-react-native-plugin.js index 6371821900..3a05c223bc 100644 --- a/docs/plugins/docusaurus-react-native-plugin.js +++ b/docs/plugins/docusaurus-react-native-plugin.js @@ -11,8 +11,8 @@ module.exports = function () { react: path.resolve('node_modules/react'), 'react-native$': 'react-native-web', 'react-native-paper': path.resolve('../src'), - 'react-native-vector-icons': path.resolve( - 'node_modules/react-native-vector-icons/dist' + 'react-native-vector-icons/MaterialCommunityIcons': path.resolve( + 'node_modules/@react-native-vector-icons/material-design-icons' ), }, extensions: ['.web.js'], diff --git a/docs/src/components/IconsList.tsx b/docs/src/components/IconsList.tsx index b4b9f1b352..ce86fd34bb 100644 --- a/docs/src/components/IconsList.tsx +++ b/docs/src/components/IconsList.tsx @@ -1,10 +1,7 @@ import React, { useState } from 'react'; -// @ts-ignore -import MaterialCommunityIcons from 'react-native-vector-icons/glyphmaps/MaterialCommunityIcons.json'; - const icons: { [key in string]: number } = { - ...MaterialCommunityIcons, + ...require('../../node_modules/@react-native-vector-icons/material-design-icons/glyphmaps/MaterialDesignIcons.json'), }; export default function IconsList() { diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 9958f195a2..6594e61fb7 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -137,7 +137,7 @@ html[data-theme='light'] .gallery-dark { .icons-list-icon { display: block; margin: 16px; - font-family: 'MaterialCommunityIcons'; + font-family: 'MaterialDesignIcons'; font-size: 48px; color: var(--theme-text-color); } @@ -183,8 +183,8 @@ html[data-theme='light'] .gallery-dark { } @font-face { - font-family: 'MaterialCommunityIcons'; - src: url('../../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf') format('truetype'); + font-family: 'MaterialDesignIcons'; + src: url('../../node_modules/@react-native-vector-icons/material-design-icons/fonts/MaterialDesignIcons.ttf') format('truetype'); } .badge:is(a .badge) { diff --git a/docs/yarn.lock b/docs/yarn.lock index 1f112a6b94..7600066c43 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -3417,6 +3417,53 @@ __metadata: languageName: node linkType: hard +"@react-native-community/cli-tools@npm:^15.1.2": + version: 15.1.3 + resolution: "@react-native-community/cli-tools@npm:15.1.3" + dependencies: + appdirsjs: "npm:^1.2.4" + chalk: "npm:^4.1.2" + execa: "npm:^5.0.0" + find-up: "npm:^5.0.0" + mime: "npm:^2.4.1" + open: "npm:^6.2.0" + ora: "npm:^5.4.1" + prompts: "npm:^2.4.2" + semver: "npm:^7.5.2" + shell-quote: "npm:^1.7.3" + sudo-prompt: "npm:^9.0.0" + checksum: 10c0/e458f3a5e97456b6fa8741cd8c04ca384b7657df9f53111daaf132911b00b6b5bf08fad2206c8461d0974b71548296b9da669af76dddf7f3261ac5d527df6bcc + languageName: node + linkType: hard + +"@react-native-vector-icons/common@npm:^11.0.0": + version: 11.0.0 + resolution: "@react-native-vector-icons/common@npm:11.0.0" + dependencies: + "@react-native-community/cli-tools": "npm:^15.1.2" + picocolors: "npm:^1.1.1" + plist: "npm:^3.1.0" + peerDependencies: + react: "*" + react-native: "*" + bin: + rnvi-update-plist: lib/commonjs/scripts/updatePlist.js + checksum: 10c0/4463ee8abfaa3560afe7ff8d395217590ab484295831bf16e32615c3741a8c6a017f73b3162d819c3181a4d7007e57915be0328256943c8388b128055f1dd8c7 + languageName: node + linkType: hard + +"@react-native-vector-icons/material-design-icons@npm:^7.4.47": + version: 7.4.47 + resolution: "@react-native-vector-icons/material-design-icons@npm:7.4.47" + dependencies: + "@react-native-vector-icons/common": "npm:^11.0.0" + peerDependencies: + react: "*" + react-native: "*" + checksum: 10c0/8c86c0310eb3ee7d7ea620edb0d346f1ab9b5a502f4c378447d57aa9656744b3944663cedb581cd7f9fa99d2dd26e50dbe8862662a368fc46de4b5413189453c + languageName: node + linkType: hard + "@sideway/address@npm:^4.1.3": version: 4.1.4 resolution: "@sideway/address@npm:4.1.4" @@ -4166,6 +4213,13 @@ __metadata: languageName: node linkType: hard +"@xmldom/xmldom@npm:^0.8.8": + version: 0.8.10 + resolution: "@xmldom/xmldom@npm:0.8.10" + checksum: 10c0/c7647c442502720182b0d65b17d45d2d95317c1c8c497626fe524bda79b4fb768a9aa4fae2da919f308e7abcff7d67c058b102a9d641097e9a57f0b80187851f + languageName: node + linkType: hard + "@xtuc/ieee754@npm:^1.2.0": version: 1.2.0 resolution: "@xtuc/ieee754@npm:1.2.0" @@ -4430,6 +4484,13 @@ __metadata: languageName: node linkType: hard +"appdirsjs@npm:^1.2.4": + version: 1.2.7 + resolution: "appdirsjs@npm:1.2.7" + checksum: 10c0/79dd8d7a764cdde2b47efc4383e054814be917ba0cd661ee324bdf3fd11542834548316faea31344f96a7ebc898b5f89c11d1418f825a1d40c396bf1ecb0902b + languageName: node + linkType: hard + "arg@npm:^5.0.0": version: 5.0.2 resolution: "arg@npm:5.0.2" @@ -4689,7 +4750,7 @@ __metadata: languageName: node linkType: hard -"base64-js@npm:^1.3.1": +"base64-js@npm:^1.3.1, base64-js@npm:^1.5.1": version: 1.5.1 resolution: "base64-js@npm:1.5.1" checksum: 10c0/f23823513b63173a001030fae4f2dabe283b99a9d324ade3ad3d148e218134676f1ee8568c877cd79ec1c53158dcf2d2ba527a97c606618928ba99dd930102bf @@ -6419,6 +6480,8 @@ __metadata: "@easyops-cn/docusaurus-search-local": "npm:^0.33.4" "@material/material-color-utilities": "npm:0.2.4" "@mdx-js/react": "npm:^1.6.22" + "@react-native-vector-icons/common": "npm:^11.0.0" + "@react-native-vector-icons/material-design-icons": "npm:^7.4.47" "@tsconfig/docusaurus": "npm:^1.0.6" "@types/marked": "npm:^4.0.7" "@types/react-color": "npm:^3.0.6" @@ -6433,7 +6496,6 @@ __metadata: react-color: "npm:^2.19.3" react-dom: "npm:17.0.2" react-native-safe-area-context: "npm:^4.5.0" - react-native-vector-icons: "npm:^9.2.0" react-native-web: "npm:^0.18.12" typescript: "npm:^4.8.4" use-latest-callback: "npm:^0.1.7" @@ -9894,6 +9956,15 @@ __metadata: languageName: node linkType: hard +"mime@npm:^2.4.1": + version: 2.6.0 + resolution: "mime@npm:2.6.0" + bin: + mime: cli.js + checksum: 10c0/a7f2589900d9c16e3bdf7672d16a6274df903da958c1643c9c45771f0478f3846dcb1097f31eb9178452570271361e2149310931ec705c037210fc69639c8e6c + languageName: node + linkType: hard + "mimic-fn@npm:^2.1.0": version: 2.1.0 resolution: "mimic-fn@npm:2.1.0" @@ -10520,6 +10591,15 @@ __metadata: languageName: node linkType: hard +"open@npm:^6.2.0": + version: 6.4.0 + resolution: "open@npm:6.4.0" + dependencies: + is-wsl: "npm:^1.1.0" + checksum: 10c0/447115632b4f3939fa0d973c33e17f28538fd268fd8257fc49763f7de6e76d29d65585b15998bbd2137337cfb70a92084a0e1b183a466e53a4829f704f295823 + languageName: node + linkType: hard + "open@npm:^7.4.2": version: 7.4.2 resolution: "open@npm:7.4.2" @@ -10559,7 +10639,7 @@ __metadata: languageName: node linkType: hard -"ora@npm:^5.1.0": +"ora@npm:^5.1.0, ora@npm:^5.4.1": version: 5.4.1 resolution: "ora@npm:5.4.1" dependencies: @@ -10989,7 +11069,7 @@ __metadata: languageName: node linkType: hard -"picocolors@npm:^1.1.0": +"picocolors@npm:^1.1.0, picocolors@npm:^1.1.1": version: 1.1.1 resolution: "picocolors@npm:1.1.1" checksum: 10c0/e2e3e8170ab9d7c7421969adaa7e1b31434f789afb9b3f115f6b96d91945041ac3ceb02e9ec6fe6510ff036bcc0bf91e69a1772edc0b707e12b19c0f2d6bcf58 @@ -11044,6 +11124,17 @@ __metadata: languageName: node linkType: hard +"plist@npm:^3.1.0": + version: 3.1.0 + resolution: "plist@npm:3.1.0" + dependencies: + "@xmldom/xmldom": "npm:^0.8.8" + base64-js: "npm:^1.5.1" + xmlbuilder: "npm:^15.1.1" + checksum: 10c0/db19ba50faafc4103df8e79bcd6b08004a56db2a9dd30b3e5c8b0ef30398ef44344a674e594d012c8fc39e539a2b72cb58c60a76b4b4401cbbc7c8f6b028d93d + languageName: node + linkType: hard + "posix-character-classes@npm:^0.1.0": version: 0.1.1 resolution: "posix-character-classes@npm:0.1.1" @@ -11953,19 +12044,6 @@ __metadata: languageName: node linkType: hard -"react-native-vector-icons@npm:^9.2.0": - version: 9.2.0 - resolution: "react-native-vector-icons@npm:9.2.0" - dependencies: - prop-types: "npm:^15.7.2" - yargs: "npm:^16.1.1" - bin: - fa5-upgrade: bin/fa5-upgrade.sh - generate-icon: bin/generate-icon.js - checksum: 10c0/6a6c415195cfde49f3148e8568ffecb4b272e0ff6fe808fd2fd956834f3bdb2dbeac513b06be20497cce376a832909dfcba72431dc25e4aea076700cc34d8757 - languageName: node - linkType: hard - "react-native-web@npm:^0.18.12": version: 0.18.12 resolution: "react-native-web@npm:0.18.12" @@ -12848,6 +12926,15 @@ __metadata: languageName: node linkType: hard +"semver@npm:^7.5.2": + version: 7.7.1 + resolution: "semver@npm:7.7.1" + bin: + semver: bin/semver.js + checksum: 10c0/fd603a6fb9c399c6054015433051bdbe7b99a940a8fb44b85c2b524c4004b023d7928d47cb22154f8d054ea7ee8597f586605e05b52047f048278e4ac56ae958 + languageName: node + linkType: hard + "semver@npm:^7.5.3": version: 7.6.3 resolution: "semver@npm:7.6.3" @@ -13622,6 +13709,13 @@ __metadata: languageName: node linkType: hard +"sudo-prompt@npm:^9.0.0": + version: 9.2.1 + resolution: "sudo-prompt@npm:9.2.1" + checksum: 10c0/e56793513a9c95f66367a3be2ec4c1adee84a2a62f1b7ff6453d610586dcd373d7d8f4df522a7dae03aea8b779ef7f7ba25d1130d24fb1e495cfbbc2c72c7486 + languageName: node + linkType: hard + "supports-color@npm:^5.3.0": version: 5.5.0 resolution: "supports-color@npm:5.5.0" @@ -15076,6 +15170,13 @@ __metadata: languageName: node linkType: hard +"xmlbuilder@npm:^15.1.1": + version: 15.1.1 + resolution: "xmlbuilder@npm:15.1.1" + checksum: 10c0/665266a8916498ff8d82b3d46d3993913477a254b98149ff7cff060d9b7cc0db7cf5a3dae99aed92355254a808c0e2e3ec74ad1b04aa1061bdb8dfbea26c18b8 + languageName: node + linkType: hard + "xtend@npm:^4.0.0, xtend@npm:^4.0.1": version: 4.0.2 resolution: "xtend@npm:4.0.2" @@ -15153,7 +15254,7 @@ __metadata: languageName: node linkType: hard -"yargs@npm:^16.1.0, yargs@npm:^16.1.1, yargs@npm:^16.2.0": +"yargs@npm:^16.1.0, yargs@npm:^16.2.0": version: 16.2.0 resolution: "yargs@npm:16.2.0" dependencies: diff --git a/example/babel.config.js b/example/babel.config.js index 2017db6110..2908500a54 100644 --- a/example/babel.config.js +++ b/example/babel.config.js @@ -20,7 +20,6 @@ module.exports = function (api) { ), // For development, we want to alias the library to the source [pak.name]: path.join(__dirname, '..', 'src'), - 'react-native-vector-icons': '@expo/vector-icons', //Fixes issue with icons not showing up on web (I also had to add @expo/vector-icons to react-native-paper devDependencies) }, }, ], diff --git a/example/metro.config.js b/example/metro.config.js index 80b170239c..893f33509a 100644 --- a/example/metro.config.js +++ b/example/metro.config.js @@ -12,6 +12,8 @@ const root = path.resolve(__dirname, '..'); const defaultConfig = getDefaultConfig(__dirname); const modules = [ + '@react-native-vector-icons/common', + '@react-native-vector-icons/material-design-icons', '@expo/vector-icons', 'expo-constants', ...Object.keys(pak.peerDependencies), diff --git a/example/package.json b/example/package.json index 654493ac0d..1fa8e61959 100644 --- a/example/package.json +++ b/example/package.json @@ -14,7 +14,7 @@ "web": "EXPO_NO_TYPESCRIPT_SETUP=1 expo start --web" }, "dependencies": { - "@expo/vector-icons": "^14.0.0", + "@expo/vector-icons": "^14.1.0", "@expo/webpack-config": "~19.0.1", "@pchmn/expo-material3-theme": "^1.3.2", "@react-native-async-storage/async-storage": "1.23.1", @@ -39,7 +39,6 @@ "react-native-reanimated": "~3.16.1", "react-native-safe-area-context": "4.12.0", "react-native-screens": "~4.1.0", - "react-native-vector-icons": "^10.1.0", "react-native-web": "~0.19.13", "typeface-roboto": "^1.1.13" }, diff --git a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx b/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx index b2f475be0e..b22bab4ca5 100644 --- a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx +++ b/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native'; import { Animated, FlatList, Platform, StyleSheet, View } from 'react-native'; +import Icon from '@expo/vector-icons/MaterialCommunityIcons'; import { Avatar, MD2Colors, @@ -9,7 +10,6 @@ import { Paragraph, Text, } from 'react-native-paper'; -import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import CustomFAB from './CustomFAB'; import CustomFABControls, { diff --git a/example/src/Examples/BottomNavigationBarExample.tsx b/example/src/Examples/BottomNavigationBarExample.tsx index a8290eea26..1bdeb5e4be 100644 --- a/example/src/Examples/BottomNavigationBarExample.tsx +++ b/example/src/Examples/BottomNavigationBarExample.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { View, StyleSheet } from 'react-native'; +import Icon from '@expo/vector-icons/MaterialCommunityIcons'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { CommonActions } from '@react-navigation/native'; import { Text, BottomNavigation } from 'react-native-paper'; -import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; const Tab = createBottomTabNavigator(); diff --git a/example/src/Examples/MaterialBottomTabNavigatorExample.tsx b/example/src/Examples/MaterialBottomTabNavigatorExample.tsx index c0b5b5c1b7..cdddeb8369 100644 --- a/example/src/Examples/MaterialBottomTabNavigatorExample.tsx +++ b/example/src/Examples/MaterialBottomTabNavigatorExample.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; -import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; +import Icon from '@expo/vector-icons/MaterialCommunityIcons'; import { createMaterialBottomTabNavigator } from '../../../src/react-navigation'; diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx index c39c19021d..bed25b2844 100644 --- a/example/src/Examples/TextInputExample.tsx +++ b/example/src/Examples/TextInputExample.tsx @@ -7,6 +7,7 @@ import { View, } from 'react-native'; +import Icon from '@expo/vector-icons/MaterialCommunityIcons'; import { useFonts } from 'expo-font'; import { configureFonts, @@ -16,7 +17,6 @@ import { MD3Colors, TextInput, } from 'react-native-paper'; -import Icon from 'react-native-vector-icons/FontAwesome'; import { useExampleTheme } from '..'; import { inputReducer, State } from '../../utils'; diff --git a/example/src/Examples/ThemingWithReactNavigation.tsx b/example/src/Examples/ThemingWithReactNavigation.tsx index 5af77970a7..acd9e67e9a 100644 --- a/example/src/Examples/ThemingWithReactNavigation.tsx +++ b/example/src/Examples/ThemingWithReactNavigation.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { View, StyleSheet } from 'react-native'; +import Icon from '@expo/vector-icons/MaterialCommunityIcons'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createStackNavigator } from '@react-navigation/stack'; import { Text } from 'react-native-paper'; -import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; const Stack = createStackNavigator(); const Tab = createBottomTabNavigator(); diff --git a/example/webpack.config.js b/example/webpack.config.js index d77da4f30b..8e2ead1fda 100644 --- a/example/webpack.config.js +++ b/example/webpack.config.js @@ -22,7 +22,7 @@ module.exports = async function (env, argv) { loader: 'url-loader', // or directly file-loader include: path.resolve( __dirname, - 'node_modules/react-native-vector-icons' + 'node_modules/@react-native-vector-icons' ), } ); diff --git a/example/yarn.lock b/example/yarn.lock index 9e0ff29888..25e62483a9 100644 --- a/example/yarn.lock +++ b/example/yarn.lock @@ -2172,6 +2172,17 @@ __metadata: languageName: node linkType: hard +"@expo/vector-icons@npm:^14.1.0": + version: 14.1.0 + resolution: "@expo/vector-icons@npm:14.1.0" + peerDependencies: + expo-font: "*" + react: "*" + react-native: "*" + checksum: 10c0/f1dcea2c43c0808f48d1953395c6f8025ae5e811648e86b79158492c9ef8af7a40781e42844dfb1434242a08fcf6ab14886825eb2c79bad2a792aebd1eb5077c + languageName: node + linkType: hard + "@expo/webpack-config@npm:~19.0.1": version: 19.0.1 resolution: "@expo/webpack-config@npm:19.0.1" @@ -4504,17 +4515,6 @@ __metadata: languageName: node linkType: hard -"cliui@npm:^7.0.2": - version: 7.0.4 - resolution: "cliui@npm:7.0.4" - dependencies: - string-width: "npm:^4.2.0" - strip-ansi: "npm:^6.0.0" - wrap-ansi: "npm:^7.0.0" - checksum: 10c0/6035f5daf7383470cef82b3d3db00bec70afb3423538c50394386ffbbab135e26c3689c41791f911fa71b62d13d3863c712fdd70f0fbdffd938a1e6fd09aac00 - languageName: node - linkType: hard - "cliui@npm:^8.0.1": version: 8.0.1 resolution: "cliui@npm:8.0.1" @@ -9949,7 +9949,7 @@ __metadata: resolution: "react-native-paper-example@workspace:." dependencies: "@babel/core": "npm:^7.25.2" - "@expo/vector-icons": "npm:^14.0.0" + "@expo/vector-icons": "npm:^14.1.0" "@expo/webpack-config": "npm:~19.0.1" "@pchmn/expo-material3-theme": "npm:^1.3.2" "@react-native-async-storage/async-storage": "npm:1.23.1" @@ -9976,7 +9976,6 @@ __metadata: react-native-reanimated: "npm:~3.16.1" react-native-safe-area-context: "npm:4.12.0" react-native-screens: "npm:~4.1.0" - react-native-vector-icons: "npm:^10.1.0" react-native-web: "npm:~0.19.13" typeface-roboto: "npm:^1.1.13" url-loader: "npm:^4.1.1" @@ -10029,21 +10028,6 @@ __metadata: languageName: node linkType: hard -"react-native-vector-icons@npm:^10.1.0": - version: 10.1.0 - resolution: "react-native-vector-icons@npm:10.1.0" - dependencies: - prop-types: "npm:^15.7.2" - yargs: "npm:^16.1.1" - bin: - fa-upgrade.sh: bin/fa-upgrade.sh - fa5-upgrade: bin/fa5-upgrade.sh - fa6-upgrade: bin/fa6-upgrade.sh - generate-icon: bin/generate-icon.js - checksum: 10c0/fd6df2090857c7b124a0d2d800fb8c5fc1b1fa78e0af5136bd984bdd5690cf46ea7961689d41c5f324cb21f6b5375643d50384132d9321f52e73e7e6f1f7dd46 - languageName: node - linkType: hard - "react-native-web@npm:~0.19.13": version: 0.19.13 resolution: "react-native-web@npm:0.19.13" @@ -12352,13 +12336,6 @@ __metadata: languageName: node linkType: hard -"yargs-parser@npm:^20.2.2": - version: 20.2.9 - resolution: "yargs-parser@npm:20.2.9" - checksum: 10c0/0685a8e58bbfb57fab6aefe03c6da904a59769bd803a722bb098bd5b0f29d274a1357762c7258fb487512811b8063fb5d2824a3415a0a4540598335b3b086c72 - languageName: node - linkType: hard - "yargs-parser@npm:^21.1.1": version: 21.1.1 resolution: "yargs-parser@npm:21.1.1" @@ -12366,21 +12343,6 @@ __metadata: languageName: node linkType: hard -"yargs@npm:^16.1.1": - version: 16.2.0 - resolution: "yargs@npm:16.2.0" - dependencies: - cliui: "npm:^7.0.2" - escalade: "npm:^3.1.1" - get-caller-file: "npm:^2.0.5" - require-directory: "npm:^2.1.1" - string-width: "npm:^4.2.0" - y18n: "npm:^5.0.5" - yargs-parser: "npm:^20.2.2" - checksum: 10c0/b1dbfefa679848442454b60053a6c95d62f2d2e21dd28def92b647587f415969173c6e99a0f3bab4f1b67ee8283bf735ebe3544013f09491186ba9e8a9a2b651 - languageName: node - linkType: hard - "yargs@npm:^17.6.2": version: 17.7.2 resolution: "yargs@npm:17.7.2" diff --git a/package.json b/package.json index 3afdf1eb3e..74c9bd2cc2 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,8 @@ "@babel/runtime": "^7.25.0", "@callstack/eslint-config": "^13.0.2", "@commitlint/config-conventional": "^8.3.4", - "@expo/vector-icons": "^14.0.2", + "@react-native-vector-icons/common": "^11.0.0", + "@react-native-vector-icons/material-design-icons": "^7.4.47", "@react-navigation/native": "^6.1.2", "@release-it/conventional-changelog": "^1.1.0", "@testing-library/jest-native": "^5.4.1", @@ -94,7 +95,6 @@ "react-native": "0.76.3", "react-native-builder-bob": "^0.21.3", "react-native-safe-area-context": "4.12.0", - "react-native-vector-icons": "^10.1.0", "react-test-renderer": "18.3.1", "release-it": "^13.4.0", "rimraf": "^3.0.2", @@ -103,8 +103,7 @@ "peerDependencies": { "react": "*", "react-native": "*", - "react-native-safe-area-context": "*", - "react-native-vector-icons": "*" + "react-native-safe-area-context": "*" }, "husky": { "hooks": { diff --git a/src/components/BottomNavigation/BottomNavigationBar.tsx b/src/components/BottomNavigation/BottomNavigationBar.tsx index 789c38829e..8530b36443 100644 --- a/src/components/BottomNavigation/BottomNavigationBar.tsx +++ b/src/components/BottomNavigation/BottomNavigationBar.tsx @@ -255,7 +255,7 @@ const Touchable = ({ * import { CommonActions } from '@react-navigation/native'; * import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; * import { Text, BottomNavigation } from 'react-native-paper'; - * import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; + * import Icon from '@react-native-vector-icons/material-design-icons'; * * const Tab = createBottomTabNavigator(); * diff --git a/src/components/MaterialCommunityIcon.tsx b/src/components/MaterialCommunityIcon.tsx index 64a88a0786..a48bc0eefc 100644 --- a/src/components/MaterialCommunityIcon.tsx +++ b/src/components/MaterialCommunityIcon.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; -import { StyleSheet, Text, Platform, ViewProps, Role } from 'react-native'; +import { ComponentProps } from 'react'; +import { StyleSheet, Text, Platform, Role, ViewProps } from 'react-native'; import { black } from '../styles/themes/v2/colors'; export type IconProps = { - name: string; + name: ComponentProps['name']; color?: string; size: number; direction: 'rtl' | 'ltr'; @@ -22,94 +23,107 @@ type AccessibilityProps = importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants'; }; -let MaterialCommunityIcons: React.ComponentType< +export const accessibilityProps: AccessibilityProps = + Platform.OS === 'web' + ? { + role: 'img', + focusable: false, + } + : { + accessibilityElementsHidden: true, + importantForAccessibility: 'no-hide-descendants', + }; + +/** + * Loads the appropriate icon module based on available dependencies + */ +const loadIconModule = () => { + try { + return require('@expo/vector-icons/MaterialCommunityIcons').default; + } catch (e) { + try { + return require('@react-native-vector-icons/material-design-icons') + .default; + } catch (e) { + try { + return require('react-native-vector-icons/MaterialCommunityIcons') + .default; + } catch (e) { + return null; + } + } + } +}; + +type IconModuleType = React.ComponentType< React.ComponentProps< - typeof import('react-native-vector-icons/MaterialCommunityIcons').default + | typeof import('@react-native-vector-icons/material-design-icons').default + | typeof import('react-native-vector-icons/MaterialCommunityIcons').default > & { color: string; pointerEvents?: ViewProps['pointerEvents']; } >; -try { - // Optionally require vector-icons - MaterialCommunityIcons = - require('react-native-vector-icons/MaterialCommunityIcons').default; -} catch (e) { - let isErrorLogged = false; +const IconModule = loadIconModule(); - // Fallback component for icons - MaterialCommunityIcons = ({ name, color, size, ...rest }) => { - /* eslint-disable no-console */ - if (!isErrorLogged) { - if ( - !/(Cannot find module|Module not found|Cannot resolve module)/.test( - (e as any).message - ) - ) { - console.error(e); - } - - console.warn( - `Tried to use the icon '${name}' in a component from 'react-native-paper', but 'react-native-vector-icons/MaterialCommunityIcons' could not be loaded.`, - `To remove this warning, try installing 'react-native-vector-icons' or use another method to specify icon: https://callstack.github.io/react-native-paper/docs/guides/icons` - ); +/** + * Fallback component displayed when no icon library is available + */ +const FallbackIcon = ({ name, color, size, ...rest }: IconProps) => { + console.warn( + `Tried to use the icon '${name}' in a component from 'react-native-paper', but none of the required icon libraries are installed.`, + `To fix this, please install one of the following:\n` + + `- @expo/vector-icons\n` + + `- @react-native-vector-icons/material-design-icons\n` + + `- react-native-vector-icons\n\n` + + `You can also use another method to specify icon: https://callstack.github.io/react-native-paper/docs/guides/icons` + ); - isErrorLogged = true; - } + return ( + + □ + + ); +}; - return ( - - □ - - ); - }; -} +const MaterialCommunityIcons: IconModuleType = IconModule || FallbackIcon; -export const accessibilityProps: AccessibilityProps = - Platform.OS === 'web' - ? { - role: 'img', - focusable: false, - } - : { - accessibilityElementsHidden: true, - importantForAccessibility: - 'no-hide-descendants' as 'no-hide-descendants', - }; - -const defaultIcon = ({ +/** + * Default icon component that handles icon rendering with proper styling and accessibility + */ +const DefaultIcon = ({ name, color = black, size, direction, allowFontScaling, testID, -}: IconProps) => ( - -); +}: IconProps) => { + return ( + + ); +}; const styles = StyleSheet.create({ // eslint-disable-next-line react-native/no-color-literals @@ -118,4 +132,4 @@ const styles = StyleSheet.create({ }, }); -export default defaultIcon; +export default DefaultIcon; diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap index 9b00150ddf..ae39e3e94e 100644 --- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap +++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap @@ -183,7 +183,6 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` > - 󰍉 + magnify @@ -374,7 +367,6 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` > - 󰅖 + close @@ -838,7 +824,6 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A > - 󰍜 + menu diff --git a/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap index 061f291107..9e6deed50f 100644 --- a/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap +++ b/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap @@ -78,16 +78,10 @@ exports[`renders Checkbox with custom testID 1`] = ` "backgroundColor": "transparent", }, ], - { - "fontFamily": "Material Design Icons", - "fontStyle": "normal", - "fontWeight": "normal", - }, - {}, ] } > - 󰄬 + check @@ -171,16 +165,10 @@ exports[`renders checked Checkbox with color 1`] = ` "backgroundColor": "transparent", }, ], - { - "fontFamily": "Material Design Icons", - "fontStyle": "normal", - "fontWeight": "normal", - }, - {}, ] } > - 󰄬 + check @@ -263,16 +251,10 @@ exports[`renders checked Checkbox with onPress 1`] = ` "backgroundColor": "transparent", }, ], - { - "fontFamily": "Material Design Icons", - "fontStyle": "normal", - "fontWeight": "normal", - }, - {}, ] } > - 󰄬 + check @@ -355,16 +337,10 @@ exports[`renders indeterminate Checkbox 1`] = ` "backgroundColor": "transparent", }, ], - { - "fontFamily": "Material Design Icons", - "fontStyle": "normal", - "fontWeight": "normal", - }, - {}, ] } > - 󰍴 + minus @@ -448,16 +424,10 @@ exports[`renders indeterminate Checkbox with color 1`] = ` "backgroundColor": "transparent", }, ], - { - "fontFamily": "Material Design Icons", - "fontStyle": "normal", - "fontWeight": "normal", - }, - {}, ] } > - 󰍴 + minus @@ -541,16 +511,10 @@ exports[`renders unchecked Checkbox with color 1`] = ` "backgroundColor": "transparent", }, ], - { - "fontFamily": "Material Design Icons", - "fontStyle": "normal", - "fontWeight": "normal", - }, - {}, ] } > - 󰄬 + check @@ -633,16 +597,10 @@ exports[`renders unchecked Checkbox with onPress 1`] = ` "backgroundColor": "transparent", }, ], - { - "fontFamily": "Material Design Icons", - "fontStyle": "normal", - "fontWeight": "normal", - }, - {}, ] } > - 󰄬 + check diff --git a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap index 1011d71fab..b5f1d87e77 100644 --- a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap +++ b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap @@ -132,16 +132,10 @@ exports[`can render leading checkbox control 1`] = ` "backgroundColor": "transparent", }, ], - { - "fontFamily": "Material Design Icons", - "fontStyle": "normal", - "fontWeight": "normal", - }, - {}, ] } > - 󰄬 + check @@ -364,16 +358,10 @@ exports[`can render the Android checkbox on different platforms 1`] = ` "backgroundColor": "transparent", }, ], - { - "fontFamily": "Material Design Icons", - "fontStyle": "normal", - "fontWeight": "normal", - }, - {}, ] } > - 󰄱 + checkbox-blank-outline - 󰄬 + check @@ -767,16 +749,10 @@ exports[`renders unchecked 1`] = ` "backgroundColor": "transparent", }, ], - { - "fontFamily": "Material Design Icons", - "fontStyle": "normal", - "fontWeight": "normal", - }, - {}, ] } > - 󰄬 + check diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap index 59e9a0047f..5560a80f36 100644 --- a/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap +++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap @@ -78,16 +78,10 @@ exports[`RadioButton RadioButton with custom testID renders properly 1`] = ` "backgroundColor": "transparent", }, ], - { - "fontFamily": "Material Design Icons", - "fontStyle": "normal", - "fontWeight": "normal", - }, - {}, ] } > - 󰄬 + check @@ -170,16 +164,10 @@ exports[`RadioButton on default platform renders properly 1`] = ` "backgroundColor": "transparent", }, ], - { - "fontFamily": "Material Design Icons", - "fontStyle": "normal", - "fontWeight": "normal", - }, - {}, ] } > - 󰄬 + check @@ -262,16 +250,10 @@ exports[`RadioButton on ios platform renders properly 1`] = ` "backgroundColor": "transparent", }, ], - { - "fontFamily": "Material Design Icons", - "fontStyle": "normal", - "fontWeight": "normal", - }, - {}, ] } > - 󰄬 + check @@ -354,16 +336,10 @@ exports[`RadioButton when RadioButton is wrapped by RadioButtonContext.Provider "backgroundColor": "transparent", }, ], - { - "fontFamily": "Material Design Icons", - "fontStyle": "normal", - "fontWeight": "normal", - }, - {}, ] } > - 󰄬 + check diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap index 363b00a93d..5c3513d769 100644 --- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap +++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap @@ -80,16 +80,10 @@ exports[`RadioButtonGroup renders properly 1`] = ` "backgroundColor": "transparent", }, ], - { - "fontFamily": "Material Design Icons", - "fontStyle": "normal", - "fontWeight": "normal", - }, - {}, ] } > - 󰄬 + check diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap index 00f2f3aa16..dfbe5fa131 100644 --- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap +++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap @@ -131,16 +131,10 @@ exports[`can render leading radio button control 1`] = ` "backgroundColor": "transparent", }, ], - { - "fontFamily": "Material Design Icons", - "fontStyle": "normal", - "fontWeight": "normal", - }, - {}, ] } > - 󰄬 + check @@ -503,16 +497,10 @@ exports[`can render the iOS radio button on different platforms 1`] = ` "backgroundColor": "transparent", }, ], - { - "fontFamily": "Material Design Icons", - "fontStyle": "normal", - "fontWeight": "normal", - }, - {}, ] } > - 󰄬 + check @@ -687,16 +675,10 @@ exports[`renders unchecked 1`] = ` "backgroundColor": "transparent", }, ], - { - "fontFamily": "Material Design Icons", - "fontStyle": "normal", - "fontWeight": "normal", - }, - {}, ] } > - 󰄬 + check diff --git a/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap b/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap index ca124034a0..eea7087336 100644 --- a/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap @@ -222,7 +222,6 @@ exports[`renders animated fab 1`] = ` > - 󰐕 + plus - 󰐕 + plus - 󰐕 + plus - 󰋼 + information `; @@ -77,7 +70,6 @@ exports[`renders avatar with icon and custom background color 1`] = ` > - 󰋼 + information `; diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap index c6478d15fa..1678a472ab 100644 --- a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap @@ -900,7 +900,6 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` > - 󰍉 + magnify - 󰍉 + magnify - 󰄀 + camera - 󰄀 + camera - 󰚇 + inbox - 󰚇 + inbox - 󰍉 + magnify - 󰍉 + magnify - 󰄀 + camera - 󰄀 + camera - 󰚇 + inbox - 󰚇 + inbox - 󰍉 + magnify - 󰍉 + magnify - 󰄀 + camera - 󰄀 + camera - 󰚇 + inbox - 󰚇 + inbox - 󰋑 + heart - 󰋑 + heart - 󰒛 + shopping-music - 󰒛 + shopping-music - 󰍉 + magnify - 󰍉 + magnify - 󰄀 + camera - 󰄀 + camera - 󰚇 + inbox - 󰚇 + inbox - 󰋑 + heart - 󰋑 + heart - 󰒛 + shopping-music - 󰒛 + shopping-music - 󰍉 + magnify - 󰍉 + magnify - 󰄀 + camera - 󰄀 + camera - 󰚇 + inbox - 󰚇 + inbox - 󰍉 + magnify - 󰍉 + magnify - 󰄀 + camera - 󰄀 + camera - 󰚇 + inbox - 󰚇 + inbox - 󰍉 + magnify - 󰍉 + magnify - 󰄀 + camera - 󰄀 + camera - 󰚇 + inbox - 󰚇 + inbox - 󰍉 + magnify - 󰍉 + magnify - 󰄀 + camera - 󰄀 + camera - 󰚇 + inbox - 󰚇 + inbox - 󰋑 + heart - 󰋑 + heart - 󰒛 + shopping-music - 󰒛 + shopping-music - 󰄀 + camera - 󰅂 + chevron-right - 󰋼 + information - 󰅖 + close @@ -432,7 +418,6 @@ exports[`renders chip with custom close button 1`] = ` > - 󰋼 + information - 󰁅 + arrow-down @@ -741,7 +713,6 @@ exports[`renders chip with icon 1`] = ` > - 󰋼 + information - 󰄬 + check - 󰅁 + chevron-left @@ -624,7 +617,6 @@ exports[`DataTable.Pagination renders data table pagination 1`] = ` > - 󰅂 + chevron-right @@ -823,7 +809,6 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu > - 󰘀 + page-first @@ -964,7 +943,6 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu > - 󰅁 + chevron-left @@ -1105,7 +1077,6 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu > - 󰅂 + chevron-right @@ -1246,7 +1211,6 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu > - 󰘁 + page-last @@ -1445,7 +1403,6 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` > - 󰅁 + chevron-left @@ -1586,7 +1537,6 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` > - 󰅂 + chevron-right @@ -1803,7 +1747,6 @@ exports[`DataTable.Pagination renders data table pagination with options select > - 󰍝 + menu-down - 󰘀 + page-first @@ -2177,7 +2107,6 @@ exports[`DataTable.Pagination renders data table pagination with options select > - 󰅁 + chevron-left @@ -2318,7 +2241,6 @@ exports[`DataTable.Pagination renders data table pagination with options select > - 󰅂 + chevron-right @@ -2459,7 +2375,6 @@ exports[`DataTable.Pagination renders data table pagination with options select > - 󰘁 + page-last @@ -2560,7 +2469,6 @@ exports[`DataTable.Title renders data table title with press handler 1`] = ` > - 󰁝 + arrow-up - 󰁝 + arrow-up - 󰋼 + information - 󰋼 + information - 󰐕 + plus @@ -320,7 +313,6 @@ exports[`renders custom color for the icon and label of the FAB 1`] = ` > - 󰐕 + plus @@ -501,7 +487,6 @@ exports[`renders default FAB 1`] = ` > - 󰐕 + plus @@ -682,7 +661,6 @@ exports[`renders disabled FAB 1`] = ` > - 󰐕 + plus @@ -864,7 +836,6 @@ exports[`renders extended FAB 1`] = ` > - 󰐕 + plus @@ -1085,7 +1050,6 @@ exports[`renders extended FAB with custom size prop 1`] = ` > - 󰐕 + plus @@ -1306,7 +1264,6 @@ exports[`renders large FAB 1`] = ` > - 󰐕 + plus @@ -2097,7 +2048,6 @@ exports[`renders not visible FAB 1`] = ` > - 󰐕 + plus @@ -2278,7 +2222,6 @@ exports[`renders small FAB 1`] = ` > - 󰐕 + plus @@ -2459,7 +2396,6 @@ exports[`renders visible FAB 1`] = ` > - 󰐕 + plus diff --git a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap index f221c7af64..1fe2b72a3d 100644 --- a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap @@ -109,7 +109,6 @@ exports[`renders disabled icon button 1`] = ` > - 󰄀 + camera @@ -252,7 +245,6 @@ exports[`renders icon button by default 1`] = ` > - 󰄀 + camera @@ -395,7 +381,6 @@ exports[`renders icon button with color 1`] = ` > - 󰄀 + camera @@ -538,7 +517,6 @@ exports[`renders icon button with size 1`] = ` > - 󰄀 + camera @@ -714,7 +686,6 @@ exports[`renders icon change animated 1`] = ` > - 󰄀 + camera diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap index c828bdc743..4713baad25 100644 --- a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap @@ -122,7 +122,6 @@ exports[`renders expanded accordion 1`] = ` > - 󰅃 + chevron-up @@ -348,7 +341,6 @@ exports[`renders list accordion with children 1`] = ` > - 󰉋 + folder - 󰅀 + chevron-down @@ -644,7 +623,6 @@ exports[`renders list accordion with custom title and description styles 1`] = ` > - 󰅀 + chevron-down @@ -768,7 +740,6 @@ exports[`renders list accordion with left items 1`] = ` > - 󰓎 + star - 󰅀 + chevron-down @@ -1060,7 +1018,6 @@ exports[`renders multiline list accordion 1`] = ` > - 󰅀 + chevron-down diff --git a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap index 1333d5931e..058cca23b6 100644 --- a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap @@ -236,7 +236,6 @@ exports[`renders list item with custom description 1`] = ` > - 󰈦 + file-pdf-box - 󰉋 + folder @@ -736,7 +722,6 @@ exports[`renders list item with left item 1`] = ` > - 󰉋 + folder - 󰉋 + folder - 󰉋 + folder - 󰉋 + folder - 󰉋 + folder - 󰉋 + folder - 󰉋 + folder - 󰑎 + redo - 󰕌 + undo - 󰆐 + content-cut - 󰆏 + content-copy - 󰍉 + magnify @@ -559,7 +552,6 @@ exports[`renders with placeholder 1`] = ` > - 󰍉 + magnify @@ -750,7 +736,6 @@ exports[`renders with placeholder 1`] = ` > - 󰅖 + close @@ -934,7 +913,6 @@ exports[`renders with text 1`] = ` > - 󰍉 + magnify @@ -1121,7 +1093,6 @@ exports[`renders with text 1`] = ` > - 󰅖 + close diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap index f57eb469b0..76ad8d4e54 100644 --- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -2090,7 +2090,6 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm > - 󰋑 + heart @@ -2477,7 +2470,6 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm > - 󰋑 + heart diff --git a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap index 28f14f2e56..456c0402fa 100644 --- a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap @@ -107,7 +107,6 @@ exports[`renders disabled toggle button 1`] = ` > - 󰋑 + heart @@ -248,7 +241,6 @@ exports[`renders toggle button 1`] = ` > - 󰋑 + heart @@ -394,7 +380,6 @@ exports[`renders unchecked toggle button 1`] = ` > - 󰋑 + heart diff --git a/testSetup.js b/testSetup.js index 1aaf715b69..c3a9694325 100644 --- a/testSetup.js +++ b/testSetup.js @@ -1 +1,24 @@ jest.useFakeTimers(); + +jest.mock('@react-native-vector-icons/material-design-icons', () => { + const React = require('react'); + const { Text } = require('react-native'); + + const MockIcon = ({ name, color, size, style, ...props }) => { + return ( + + {name || '□'} + + ); + }; + + MockIcon.displayName = 'MockedMaterialDesignIcon'; + + return { + __esModule: true, + default: MockIcon, + }; +}); \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 1036d9f4a8..8f93e9c82c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2892,15 +2892,6 @@ __metadata: languageName: node linkType: hard -"@expo/vector-icons@npm:^14.0.2": - version: 14.0.2 - resolution: "@expo/vector-icons@npm:14.0.2" - dependencies: - prop-types: "npm:^15.8.1" - checksum: 10c0/6784cc75b1dbaa7c589d41e8229469bc9aa1abe36efc2290e8b38ce39c2ec3e889a520ebd818ce0d084128fa19df9f69d77962e4bd70a21cc038a46ef6753f22 - languageName: node - linkType: hard - "@humanwhocodes/config-array@npm:^0.11.8": version: 0.11.10 resolution: "@humanwhocodes/config-array@npm:0.11.10" @@ -3550,6 +3541,53 @@ __metadata: languageName: node linkType: hard +"@react-native-community/cli-tools@npm:^15.1.2": + version: 15.1.3 + resolution: "@react-native-community/cli-tools@npm:15.1.3" + dependencies: + appdirsjs: "npm:^1.2.4" + chalk: "npm:^4.1.2" + execa: "npm:^5.0.0" + find-up: "npm:^5.0.0" + mime: "npm:^2.4.1" + open: "npm:^6.2.0" + ora: "npm:^5.4.1" + prompts: "npm:^2.4.2" + semver: "npm:^7.5.2" + shell-quote: "npm:^1.7.3" + sudo-prompt: "npm:^9.0.0" + checksum: 10c0/e458f3a5e97456b6fa8741cd8c04ca384b7657df9f53111daaf132911b00b6b5bf08fad2206c8461d0974b71548296b9da669af76dddf7f3261ac5d527df6bcc + languageName: node + linkType: hard + +"@react-native-vector-icons/common@npm:^11.0.0": + version: 11.0.0 + resolution: "@react-native-vector-icons/common@npm:11.0.0" + dependencies: + "@react-native-community/cli-tools": "npm:^15.1.2" + picocolors: "npm:^1.1.1" + plist: "npm:^3.1.0" + peerDependencies: + react: "*" + react-native: "*" + bin: + rnvi-update-plist: lib/commonjs/scripts/updatePlist.js + checksum: 10c0/4463ee8abfaa3560afe7ff8d395217590ab484295831bf16e32615c3741a8c6a017f73b3162d819c3181a4d7007e57915be0328256943c8388b128055f1dd8c7 + languageName: node + linkType: hard + +"@react-native-vector-icons/material-design-icons@npm:^7.4.47": + version: 7.4.47 + resolution: "@react-native-vector-icons/material-design-icons@npm:7.4.47" + dependencies: + "@react-native-vector-icons/common": "npm:^11.0.0" + peerDependencies: + react: "*" + react-native: "*" + checksum: 10c0/8c86c0310eb3ee7d7ea620edb0d346f1ab9b5a502f4c378447d57aa9656744b3944663cedb581cd7f9fa99d2dd26e50dbe8862662a368fc46de4b5413189453c + languageName: node + linkType: hard + "@react-native/assets-registry@npm:0.76.3": version: 0.76.3 resolution: "@react-native/assets-registry@npm:0.76.3" @@ -4322,6 +4360,13 @@ __metadata: languageName: node linkType: hard +"@xmldom/xmldom@npm:^0.8.8": + version: 0.8.10 + resolution: "@xmldom/xmldom@npm:0.8.10" + checksum: 10c0/c7647c442502720182b0d65b17d45d2d95317c1c8c497626fe524bda79b4fb768a9aa4fae2da919f308e7abcff7d67c058b102a9d641097e9a57f0b80187851f + languageName: node + linkType: hard + "JSONStream@npm:^1.0.4": version: 1.3.5 resolution: "JSONStream@npm:1.3.5" @@ -4561,6 +4606,13 @@ __metadata: languageName: node linkType: hard +"appdirsjs@npm:^1.2.4": + version: 1.2.7 + resolution: "appdirsjs@npm:1.2.7" + checksum: 10c0/79dd8d7a764cdde2b47efc4383e054814be917ba0cd661ee324bdf3fd11542834548316faea31344f96a7ebc898b5f89c11d1418f825a1d40c396bf1ecb0902b + languageName: node + linkType: hard + "argparse@npm:^1.0.7": version: 1.0.10 resolution: "argparse@npm:1.0.10" @@ -9671,6 +9723,13 @@ __metadata: languageName: node linkType: hard +"is-wsl@npm:^1.1.0": + version: 1.1.0 + resolution: "is-wsl@npm:1.1.0" + checksum: 10c0/7ad0012f21092d6f586c7faad84755a8ef0da9b9ec295e4dc82313cce4e1a93a3da3c217265016461f9b141503fe55fa6eb1fd5457d3f05e8d1bdbb48e50c13a + languageName: node + linkType: hard + "is-wsl@npm:^2.1.1, is-wsl@npm:^2.2.0": version: 2.2.0 resolution: "is-wsl@npm:2.2.0" @@ -11444,6 +11503,15 @@ __metadata: languageName: node linkType: hard +"mime@npm:^2.4.1": + version: 2.6.0 + resolution: "mime@npm:2.6.0" + bin: + mime: cli.js + checksum: 10c0/a7f2589900d9c16e3bdf7672d16a6274df903da958c1643c9c45771f0478f3846dcb1097f31eb9178452570271361e2149310931ec705c037210fc69639c8e6c + languageName: node + linkType: hard + "mimic-fn@npm:^2.1.0": version: 2.1.0 resolution: "mimic-fn@npm:2.1.0" @@ -12095,6 +12163,15 @@ __metadata: languageName: node linkType: hard +"open@npm:^6.2.0": + version: 6.4.0 + resolution: "open@npm:6.4.0" + dependencies: + is-wsl: "npm:^1.1.0" + checksum: 10c0/447115632b4f3939fa0d973c33e17f28538fd268fd8257fc49763f7de6e76d29d65585b15998bbd2137337cfb70a92084a0e1b183a466e53a4829f704f295823 + languageName: node + linkType: hard + "open@npm:^7.0.3": version: 7.4.2 resolution: "open@npm:7.4.2" @@ -12119,7 +12196,7 @@ __metadata: languageName: node linkType: hard -"ora@npm:5.4.1": +"ora@npm:5.4.1, ora@npm:^5.4.1": version: 5.4.1 resolution: "ora@npm:5.4.1" dependencies: @@ -12469,7 +12546,7 @@ __metadata: languageName: node linkType: hard -"picocolors@npm:^1.1.0": +"picocolors@npm:^1.1.0, picocolors@npm:^1.1.1": version: 1.1.1 resolution: "picocolors@npm:1.1.1" checksum: 10c0/e2e3e8170ab9d7c7421969adaa7e1b31434f789afb9b3f115f6b96d91945041ac3ceb02e9ec6fe6510ff036bcc0bf91e69a1772edc0b707e12b19c0f2d6bcf58 @@ -12545,6 +12622,17 @@ __metadata: languageName: node linkType: hard +"plist@npm:^3.1.0": + version: 3.1.0 + resolution: "plist@npm:3.1.0" + dependencies: + "@xmldom/xmldom": "npm:^0.8.8" + base64-js: "npm:^1.5.1" + xmlbuilder: "npm:^15.1.1" + checksum: 10c0/db19ba50faafc4103df8e79bcd6b08004a56db2a9dd30b3e5c8b0ef30398ef44344a674e594d012c8fc39e539a2b72cb58c60a76b4b4401cbbc7c8f6b028d93d + languageName: node + linkType: hard + "posix-character-classes@npm:^0.1.0": version: 0.1.1 resolution: "posix-character-classes@npm:0.1.1" @@ -12684,7 +12772,7 @@ __metadata: languageName: node linkType: hard -"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1": +"prop-types@npm:^15.8.1": version: 15.8.1 resolution: "prop-types@npm:15.8.1" dependencies: @@ -12937,7 +13025,8 @@ __metadata: "@callstack/eslint-config": "npm:^13.0.2" "@callstack/react-theme-provider": "npm:^3.0.9" "@commitlint/config-conventional": "npm:^8.3.4" - "@expo/vector-icons": "npm:^14.0.2" + "@react-native-vector-icons/common": "npm:^11.0.0" + "@react-native-vector-icons/material-design-icons": "npm:^7.4.47" "@react-navigation/native": "npm:^6.1.2" "@release-it/conventional-changelog": "npm:^1.1.0" "@testing-library/jest-native": "npm:^5.4.1" @@ -12974,7 +13063,6 @@ __metadata: react-native: "npm:0.76.3" react-native-builder-bob: "npm:^0.21.3" react-native-safe-area-context: "npm:4.12.0" - react-native-vector-icons: "npm:^10.1.0" react-test-renderer: "npm:18.3.1" release-it: "npm:^13.4.0" rimraf: "npm:^3.0.2" @@ -12984,7 +13072,6 @@ __metadata: react: "*" react-native: "*" react-native-safe-area-context: "*" - react-native-vector-icons: "*" languageName: unknown linkType: soft @@ -12998,21 +13085,6 @@ __metadata: languageName: node linkType: hard -"react-native-vector-icons@npm:^10.1.0": - version: 10.1.0 - resolution: "react-native-vector-icons@npm:10.1.0" - dependencies: - prop-types: "npm:^15.7.2" - yargs: "npm:^16.1.1" - bin: - fa-upgrade.sh: bin/fa-upgrade.sh - fa5-upgrade: bin/fa5-upgrade.sh - fa6-upgrade: bin/fa6-upgrade.sh - generate-icon: bin/generate-icon.js - checksum: 10c0/fd6df2090857c7b124a0d2d800fb8c5fc1b1fa78e0af5136bd984bdd5690cf46ea7961689d41c5f324cb21f6b5375643d50384132d9321f52e73e7e6f1f7dd46 - languageName: node - linkType: hard - "react-native@npm:0.76.3": version: 0.76.3 resolution: "react-native@npm:0.76.3" @@ -13931,6 +14003,15 @@ __metadata: languageName: node linkType: hard +"semver@npm:^7.5.2": + version: 7.7.1 + resolution: "semver@npm:7.7.1" + bin: + semver: bin/semver.js + checksum: 10c0/fd603a6fb9c399c6054015433051bdbe7b99a940a8fb44b85c2b524c4004b023d7928d47cb22154f8d054ea7ee8597f586605e05b52047f048278e4ac56ae958 + languageName: node + linkType: hard + "send@npm:0.18.0": version: 0.18.0 resolution: "send@npm:0.18.0" @@ -14045,6 +14126,13 @@ __metadata: languageName: node linkType: hard +"shell-quote@npm:^1.7.3": + version: 1.8.2 + resolution: "shell-quote@npm:1.8.2" + checksum: 10c0/85fdd44f2ad76e723d34eb72c753f04d847ab64e9f1f10677e3f518d0e5b0752a176fd805297b30bb8c3a1556ebe6e77d2288dbd7b7b0110c7e941e9e9c20ce1 + languageName: node + linkType: hard + "shelljs@npm:0.8.4": version: 0.8.4 resolution: "shelljs@npm:0.8.4" @@ -14603,6 +14691,13 @@ __metadata: languageName: node linkType: hard +"sudo-prompt@npm:^9.0.0": + version: 9.2.1 + resolution: "sudo-prompt@npm:9.2.1" + checksum: 10c0/e56793513a9c95f66367a3be2ec4c1adee84a2a62f1b7ff6453d610586dcd373d7d8f4df522a7dae03aea8b779ef7f7ba25d1130d24fb1e495cfbbc2c72c7486 + languageName: node + linkType: hard + "supports-color@npm:7.2.0, supports-color@npm:^7.1.0": version: 7.2.0 resolution: "supports-color@npm:7.2.0" @@ -15694,6 +15789,13 @@ __metadata: languageName: node linkType: hard +"xmlbuilder@npm:^15.1.1": + version: 15.1.1 + resolution: "xmlbuilder@npm:15.1.1" + checksum: 10c0/665266a8916498ff8d82b3d46d3993913477a254b98149ff7cff060d9b7cc0db7cf5a3dae99aed92355254a808c0e2e3ec74ad1b04aa1061bdb8dfbea26c18b8 + languageName: node + linkType: hard + "xtend@npm:~4.0.1": version: 4.0.2 resolution: "xtend@npm:4.0.2" @@ -15795,7 +15897,7 @@ __metadata: languageName: node linkType: hard -"yargs@npm:^16.1.1, yargs@npm:^16.2.0": +"yargs@npm:^16.2.0": version: 16.2.0 resolution: "yargs@npm:16.2.0" dependencies: