Skip to content

Conversation

@personalizedrefrigerator
Copy link
Collaborator

@personalizedrefrigerator personalizedrefrigerator commented Dec 13, 2025

Summary

Upgrades react-native-vector-icons to v12.

Fixes #13869.

Notes

  • react-native-vector-icons has been split into multiple packages in the @react-native-vector-icons/ NPM organization.
  • The ant indent-left and ant indent-right icons seem to no longer exist. These icons have been replaced with material format-indent-decrease and material format-indent-increase, respectively.

Testing

Android 16 emulator (release mode APK):

  1. Open the Markdown editor. Verify that the default toolbar buttons have icons.
  2. Open the Markdown toolbar configuration dialog. Verify that the close button is visible.
  3. Open the Rich Text Editor. Verify that the default toolbar buttons have icons.
  4. Open the find/replace dialog and show the hidden-by-default options. Verify that all options have icons.
  5. Open settings. Verify that all visible tabs have icons.

Note

The below testing was done prior to removing the unused fontisto icon font.

Testing (iOS 18.4 simulator, dev mode):

  1. Open the Markdown editor. Verify that all buttons in the Markdown toolbar have icons.
  2. Verify that all items in the "choose what to display" menu have icons.
  3. Repeat steps 1-2 for the Rich Text Editor.
  4. Open the note screen, then the sidebar. Verify that sidebar items have icons.
  5. Open settings, verify that all settings items have icons.

Android 10 emulator, dev mode:

  1. Start the Android application in development mode.
  2. Open the Markdown editor.
  3. Verify that all default toolbar buttons have icons.
    • Missing icons would be shown as question marks.
  4. Verify that all possible toolbar buttons have icons.
    • Open the toolbar configuration dialog and check manually.
  5. Repeat steps 3-4 for the Rich Text Editor.
  6. Open a plugin dialog. Verify that the close button is visible.
  7. Open the search panel. Verify that the clear button is visible.
  8. Open settings. Verify that the settings tab icons are visible.

Web (Chrome):

  1. Open the Rich Text Editor. Verify that all buttons in the toolbar have icons.
    • Note: In my browser, some icons appear bolder than on Android. This seems to also be the case on app.joplincloud.com, so is not a regression.
  2. Open the Rich Text Editor's "Manage toolbar options". Verify that all icons are present.
  3. Repeat steps 1-2 for the Markdown editor.
  4. Verify that all settings tabs have icons.
  5. Open the beta dialog. Verify that the close button has an icon.

Testing done:
1. Start the Android application in development mode.
2. Open the Markdown editor.
3. Verify that all default toolbar buttons have icons.
   - Missing icons would be shown as question marks.
4. Verify that all possible toolbar buttons have icons.
   - Open the toolbar configuration dialog and check manually.
5. Repeat steps 3-4 for the Rich Text Editor.
6. Open a plugin dialog. Verify that the close button is visible.
7. Open the search panel. Verify that the clear button is visible.
8. Open settings. Verify that the settings tab icons are visible.
1. Open the Rich Text Editor. Verify that all buttons in the toolbar have icons.
   - Note: In my browser (Chrome), some icons appear bolder than on Android. This seems to also be the case on app.joplincloud.com, so is not a regression.
2. Open the Rich Text Editor's "Manage toolbar options". Verify that all icons are present.
3. Repeat steps 1-2 for the Markdown editor.
4. Verify that all settings tabs have icons.
5. Open the beta dialog. Verify that the close button has an icon.
Testing (iOS 18.4 simulator):
1. Open the Markdown editor. Verify that all buttons in the Markdown toolbar have icons.
2. Verify that all items in the "choose what to display" menu have icons.
3. Repeat steps 1-2 for the Rich Text Editor.
4. Open the note screen, then the sidebar. Verify that sidebar items have icons.
5. Open settings, verify that all settings items have icons.
@personalizedrefrigerator personalizedrefrigerator changed the title Mobile: Upgrade react-native-vector-icons to v12 Mobile: Fixes #13869: Upgrade react-native-vector-icons to v12 Dec 13, 2025
@personalizedrefrigerator personalizedrefrigerator changed the title Mobile: Fixes #13869: Upgrade react-native-vector-icons to v12 Mobile: Fixes #13869: Fix some icons are invisible: Upgrade react-native-vector-icons to v12 Dec 13, 2025
@laurent22
Copy link
Owner

Looks like there may be some issue with the types?

[@joplin/app-mobile]:     SyntaxError: Invalid or unexpected token
[@joplin/app-mobile]: 
[@joplin/app-mobile]:       3 | import { TextStyle, Text, StyleProp } from 'react-native';
[@joplin/app-mobile]:       4 |
[@joplin/app-mobile]:     > 5 | import { FontAwesome5 } from '@react-native-vector-icons/fontawesome5';
[@joplin/app-mobile]:         | ^
[@joplin/app-mobile]:       6 | import { MaterialDesignIcons } from '@react-native-vector-icons/material-design-icons';
[@joplin/app-mobile]:       7 | import { Ionicons } from '@react-native-vector-icons/ionicons';
[@joplin/app-mobile]:       8 |
[@joplin/app-mobile]: 
[@joplin/app-mobile]:       at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
[@joplin/app-mobile]:       at Object.require (node_modules/@react-native-vector-icons/fontawesome5/src/index.tsx:36:15)
[@joplin/app-mobile]:       at Object.<anonymous> (components/Icon.tsx:5:1)
[@joplin/app-mobile]:       at Object.<anonymous> (components/DialogManager/PromptButton.tsx:7:1)
[@joplin/app-mobile]:       at Object.<anonymous> (components/DialogManager/PromptDialog.tsx:6:1)
[@joplin/app-mobile]:       at Object.<anonymous> (components/DialogManager/index.tsx:10:1)
[@joplin/app-mobile]:       at Object.<anonymous> (components/NoteBodyViewer/hooks/useOnResourceLongPress.ts:10:1)
[@joplin/app-mobile]:       at Object.<anonymous> (components/NoteBodyViewer/NoteBodyViewer.tsx:8:1)
[@joplin/app-mobile]:       at Object.<anonymous> (components/screens/Note/Note.tsx:6:1)
[@joplin/app-mobile]:       at Object.<anonymous> (components/screens/Note/Note.test.tsx:6:1)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants