Mobile: Migrate to `react-native-paper` #7477

personalizedrefrigerator · 2022-12-18T00:51:00Z

Summary

react-native-action-button is no longer maintained and is blocking upgrade to the most recent version of React Native (see the relevant forum post).
- Edit: It might have been broken because I didn't apply the rather large diff provided by React Native's upgrade tool.
react-native-paper provides a FAB.Group component that looks and acts very similar to react-native-action-button.

Screenshots

Testing plan

Using the "add new" menu, make a new to-do.
Using the "add new" menu, make a new note.
Open and close the "add new" menu.
Edit a note using the "edit note" button

Notes

The "edit" button can be used when the sidebar is open:
- react-native-paper provides its own sidebar. Switching to that might fix this issue (and current sidebar-related accessibility issues).

…dev' into pr/react-native-paper-action-buttons

laurent22

Looks like a good change, but aren't we adding a huge dependency with React Native Paper.

That being said, over the medium term it would make sense to start using an existing UI lib to make our life easier. How good is React Native Paper compared to other popular alternatives?

laurent22 · 2022-12-18T12:54:14Z

packages/app-mobile/package.json

+ "react-native-paper": "^5.0.2",
 "react-native-popup-menu": "0.16.1",
 "react-native-quick-actions": "0.3.13",
 "react-native-rsa-native": "2.0.5",
+ "react-native-safe-area-context": "^4.4.1",


Dependencies must be pinned (no ^)

laurent22 · 2022-12-18T12:55:45Z

packages/app-mobile/ios/Joplin.xcodeproj/project.pbxproj

- PRODUCT_BUNDLE_IDENTIFIER = net.cozic.joplin.ShareExtension;
+ PRODUCT_BUNDLE_IDENTIFIER = net.personalizedrefrigerator.joplin.ShareExtension;


That should probably not be changed

Oops! Sorry! That was for my own custom build!!! I'll fix that!!!

laurent22 · 2022-12-18T12:55:55Z

packages/app-mobile/ios/Joplin.xcodeproj/project.pbxproj

 GCC_C_LANGUAGE_STANDARD = gnu11;
 INFOPLIST_FILE = ShareExtension/Info.plist;
 IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @executable_path/../../Frameworks";
 MARKETING_VERSION = 12.10.0;
 MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 MTL_FAST_MATH = YES;
- PRODUCT_BUNDLE_IDENTIFIER = net.cozic.joplin.ShareExtension;
+ PRODUCT_BUNDLE_IDENTIFIER = net.personalizedrefrigerator.joplin.ShareExtension;


Same, shouldn't be changed

laurent22 · 2022-12-18T12:56:36Z

packages/app-mobile/ios/Joplin.xcodeproj/project.pbxproj

@@ -265,12 +265,12 @@
 ORGANIZATIONNAME = joplinapp.org;
 TargetAttributes = {
 13B07F861A680F5B00A75B9A = {
- DevelopmentTeam = A9BXAFS6CT;


In fact I suspect all the changes in this file should be undone, because it looks like it's changes from your profile

Thank you for catching this! I've reverted changes to the ios/ directory and re-run npx pod-install.

packages/app-mobile/ios/Joplin/Info.plist

packages/app-mobile/ios/Joplin/Joplin.entitlements

personalizedrefrigerator · 2022-12-18T21:13:41Z

Looks like a good change, but aren't we adding a huge dependency with React Native Paper.

That being said, over the medium term it would make sense to start using an existing UI lib to make our life easier. How good is React Native Paper compared to other popular alternatives?

We are adding a huge dependency. According to yarnpkg.com's "size in browser", react-native-paper is at least 230 KiB, though only about 60 KiB if gzipped.

I looked at two other popular alternatives. Neither have floating action button groups.

nativebase
- Advertises its accessibility.
- Developed by GeekyAnts
- Doesn't seem to have floating action button groups or a navigation drawer.
  - It does have normal floating action buttons. We could use these to implement the nested floating action buttons used by Joplin.
  - Suggests using react-native-navigation for a navigation drawer.
react-native-elements
- Also doesn't seem to have floating action button groups or a navigation drawer (sidebar).

We could also try forking react-native-action-button (there haven't been new commits since 2020) or submitting a pull request to a fork (react-native-action-button-warnings-fixed).

I'm also looking at component libraries for sidebars (navigation drawers) as well. Our app's current sidebar library react-native-side-menu-updated is not very accessible — when using a screen reader, the app's (closed) sidebar can still be focused, and is navigated through before the main content of the app. Additionally, when using a screen reader, I can drag my finger across the screen and have the screen reader focus/read what I move my finger over. It reads and focuses the sidebar even when it's closed. This is very annoying.

I did notice some accessibility issues in the React Native Paper demo app with their sidebar — the sidebar can't be closed with a screen reader. I think we can work around this, though.

In fact I suspect all the changes in this file should be undone, because it looks like it's changes from your profile

I changed the iOS project team to allow running the app on my device, then ran npx pod-install and committed the result. I should have run npx pod-install before changing project settings in XCode. I'll do that and commit the result.

…r-action-buttons

laurent22 · 2022-12-27T14:38:23Z

Thanks for checking the libs. Ideally we also want to find one that is likely to be well supported over the long term, although usually we can't really know. RNP appears to be growing more popular, while the other two are going down or stagnating in terms of downloads:

laurent22 · 2023-01-05T17:48:40Z

When I try to run this pull request, I'm getting this error:

ERROR  Invariant Violation: requireNativeComponent: "RNCSafeAreaProvider" was not found in the UIManager.

This error is located at:
	in RNCSafeAreaProvider (at SafeAreaContext.tsx:87)
	in SafeAreaProvider (at SafeAreaProviderCompat.tsx:50)
	in SafeAreaProviderCompat (at Provider.tsx:102)
	in Provider (created by AppComponent)
	in AppComponent (created by Connect(AppComponent))
	in Connect(AppComponent) (created by Root)
	in Provider (created by Root)
	in Root (at renderApplication.js:50)
	in RCTView (at View.js:32)
	in View (at AppContainer.js:92)
	in RCTView (at View.js:32)
	in View (at AppContainer.js:119)
	in AppContainer (at renderApplication.js:43)
	in Joplin(RootComponent) (at renderApplication.js:60)

Have you ever had this issue and do you know how to fix it? I wanted to try RN Paper to develop the Profile Switcher UI, as a way to assess if we can use it as our main UI lib.

personalizedrefrigerator · 2023-01-05T18:23:14Z

When I try to run this pull request, I'm getting this error:
ERROR  Invariant Violation: requireNativeComponent: "RNCSafeAreaProvider" was not found in the UIManager.
...
Have you ever had this issue and do you know how to fix it? I wanted to try RN Paper to develop the Profile Switcher UI, as a way to assess if we can use it as our main UI lib.

If you're building from this branch, re-run npx pod-install and re-deploy from XCode. If you're adding react-native-paper as a new dependency, be sure to follow their getting started guide!

laurent22 · 2023-01-05T21:46:39Z

Yes that was it, thank you. I thought pod installation would happen during yarn install but looks like it didn't. It seems to be working well now. I'll do more tests and if we go for RN paper, we can merge this PR

laurent22 · 2023-01-06T20:01:30Z

Ok I've created the profile switcher using react-native-paper and it seems good enough for our use. Could you fix the conflicts please? Then I'll merge it, and then merge mine since it's based on this PR.

personalizedrefrigerator · 2023-01-06T20:37:06Z

Ok I've created the profile switcher using react-native-paper and it seems good enough for our use. Could you fix the conflicts please? Then I'll merge it, and then merge mine since it's based on this PR.

I won't be able to fix the conflicts for a few hours — I need access to a Mac to resolve conflicts in Podfile.lock. Expect conflicts to be resolved later tonight. Edit: Done.

…r-action-buttons

laurent22 · 2023-01-08T12:23:15Z

The old action button indeed seems incompatible with RN-0.69

personalizedrefrigerator added 4 commits October 1, 2022 15:28

Migrate to React Native Paper

7af794d

Commit yarn.lock

ad5a211

Update react-native-paper and Merge remote-tracking branch 'upstream/…

22a10b0

…dev' into pr/react-native-paper-action-buttons

Spaces -> tabs in ActionButton.tsx

63a9c57

laurent22 reviewed Dec 18, 2022

View reviewed changes

Restore project.pbxproj

3b7fdd5

personalizedrefrigerator commented Dec 18, 2022

View reviewed changes

packages/app-mobile/ios/Joplin/Info.plist Outdated Show resolved Hide resolved

personalizedrefrigerator commented Dec 18, 2022

View reviewed changes

packages/app-mobile/ios/Joplin/Joplin.entitlements Outdated Show resolved Hide resolved

personalizedrefrigerator added 2 commits December 18, 2022 12:37

Reset entire iOS directory. npx pod-install will need to be re-run

54aa68b

Reset to newer version ios directory

b0c8988

personalizedrefrigerator changed the title ~~Mobile: Migrate to react-native-paper~~ WIP: Mobile: Migrate to react-native-paper Dec 18, 2022

personalizedrefrigerator added 2 commits December 18, 2022 13:19

Update yarn.lock

b169283

Run npx pod-install

887e03e

personalizedrefrigerator changed the title ~~WIP: Mobile: Migrate to react-native-paper~~ Mobile: Migrate to react-native-paper Dec 18, 2022

personalizedrefrigerator and others added 3 commits December 18, 2022 14:07

Merge remote-tracking branch 'upstream/dev' into pr/react-native-pape…

f7a003f

…r-action-buttons

Merge remote-tracking branch 'upstream/dev' into pr/react-native-pape…

d14ec82

…r-action-buttons

Merge branch 'dev' into pr/react-native-paper-action-buttons

d3ca725

Update Podfile.lock after merge

c0d0c16

Merge remote-tracking branch 'upstream/dev' into pr/react-native-pape…

001345c

…r-action-buttons

laurent22 merged commit 257a241 into laurent22:dev Jan 8, 2023

github-actions bot locked and limited conversation to collaborators Jan 8, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mobile: Migrate to `react-native-paper` #7477

Mobile: Migrate to `react-native-paper` #7477

personalizedrefrigerator commented Dec 18, 2022 •

edited

Loading

laurent22 left a comment

laurent22 Dec 18, 2022

laurent22 Dec 18, 2022

personalizedrefrigerator Dec 18, 2022

laurent22 Dec 18, 2022

laurent22 Dec 18, 2022

personalizedrefrigerator Dec 18, 2022 •

edited

Loading

personalizedrefrigerator commented Dec 18, 2022 •

edited

Loading

laurent22 commented Dec 27, 2022

laurent22 commented Jan 5, 2023

personalizedrefrigerator commented Jan 5, 2023 •

edited

Loading

laurent22 commented Jan 5, 2023

laurent22 commented Jan 6, 2023

personalizedrefrigerator commented Jan 6, 2023 •

edited

Loading

laurent22 commented Jan 8, 2023

		PRODUCT_BUNDLE_IDENTIFIER = net.cozic.joplin.ShareExtension;
		PRODUCT_BUNDLE_IDENTIFIER = net.personalizedrefrigerator.joplin.ShareExtension;

Mobile: Migrate to react-native-paper #7477

Mobile: Migrate to react-native-paper #7477

Conversation

personalizedrefrigerator commented Dec 18, 2022 • edited Loading

Summary

Screenshots

Testing plan

Notes

laurent22 left a comment

Choose a reason for hiding this comment

laurent22 Dec 18, 2022

Choose a reason for hiding this comment

laurent22 Dec 18, 2022

Choose a reason for hiding this comment

personalizedrefrigerator Dec 18, 2022

Choose a reason for hiding this comment

laurent22 Dec 18, 2022

Choose a reason for hiding this comment

laurent22 Dec 18, 2022

Choose a reason for hiding this comment

personalizedrefrigerator Dec 18, 2022 • edited Loading

Choose a reason for hiding this comment

personalizedrefrigerator commented Dec 18, 2022 • edited Loading

laurent22 commented Dec 27, 2022

laurent22 commented Jan 5, 2023

personalizedrefrigerator commented Jan 5, 2023 • edited Loading

laurent22 commented Jan 5, 2023

laurent22 commented Jan 6, 2023

personalizedrefrigerator commented Jan 6, 2023 • edited Loading

laurent22 commented Jan 8, 2023

Mobile: Migrate to `react-native-paper` #7477

Mobile: Migrate to `react-native-paper` #7477

personalizedrefrigerator commented Dec 18, 2022 •

edited

Loading

personalizedrefrigerator Dec 18, 2022 •

edited

Loading

personalizedrefrigerator commented Dec 18, 2022 •

edited

Loading

personalizedrefrigerator commented Jan 5, 2023 •

edited

Loading

personalizedrefrigerator commented Jan 6, 2023 •

edited

Loading