2022: How can we improve React Native?

[lunaleaps]

Update - Nov. 17, 2022

The survey is now closed.

This discussion will remain unlocked as there is still valuable feedback to be shared and its great to have it one place but do not expect team engagement.

We will be running another survey in 2023 and will reference any new comments here.

You can read the team's feedback to comments shared before Nov. 17th in this dedicated discussion.

---

Update - Nov. 1, 2022

Thanks everyone for all your feedback! I will leave this survey unlocked for now as there continues to be great discussion. We are actively reviewing your comments, drafting a reply which we hope to share by next couple of weeks. Thank you again!

---

The React Native team is looking for feedback to improve the developer experience of React Native. Our team has gotten so much value from past responses in 2019, 2018 (#64) — we had to miss 2020, 2021 😔.

This year, your input matters more than ever as we look to prioritize your feedback into our planning.

Guidelines:

• We’re excited to hear from you! Let’s keep conversation respectful and within our code of conduct.
• Scan through existing comments and upvote/downvote posts that also affect you. Feel free to comment and expand to provide more context.
• Please make one comment per issue so that feedback stays focused
• Keep your descriptions short and ideally link to other places with more context. See example post below:

[Example Issue] Cmd+R doesn’t work

React Native docs and the new app template all mention that cmd+r is the way to reload. On my simulator, cmd+r starts a screen recording as documented on this issue. This has been a huge source of confusion on my team when new engineers join and are mis-led and we’ve spent hours trying to debug it and we have a fix on our fork.

Example areas of feedback

• Tooling: Metro, Flipper, React DevTools
• Debugging, Profiling your apps
• Adopting React 18, TurboModules, Fabric, Concurrent features
• Developing for many platforms
• Upgrading
• Education, Documentation, Staying informed
• Contributing to React Native, community support

What happens next?

• We’ll leave this discussion unlocked for roughly two weeks (Oct. 25th, 2022). During and after, our team will closely review responses and attempt to consolidate issues to themes.
• After, we will share responses to each point, share our thoughts and how we plan to action on it.
• We hope build out and run this survey yearly to help us measure our progress and also share with our community. If you have feedback about this, feel free to also share!
• We also started a discussion about workflows in React Native, if you'd like to share yours! https://github.com/react-native-community/discussions-and-proposals/discussions/530

[sixpathdev]

UI Difference

React Native makes cross-platform development easy, but one feature I'd appreciate is if there are little to no difference in cross-platform looks. I think it's one edge flutter has when it comes to development, spending less time customizing the user interface across platforms.

[gochev]

the whole point is to have native widgets and they are different. If you want them the same just use a webview

[kevinvangelder]

React Native is intended to looks like the native platform by default. If that's a negative to you use a different library.

[intrnl]

I feel like it would still be good to have this option regardless, no?

[stanleyugwu]

I used to think It's an edge that flutter has, but lately I've realised it's a disadvantage. Having same looks on all platforms hurts UX badly.

Users need to have that "native feeling" when using the app and I guess that's the whole point of "Native" in React Native 😀

Think about it when the native alert dialog of iOS and Android are same-looking.

[likeSo]

I agree. Because it's very hard to find a component that both works on iOS and Android...

[tom-sherman]

CSS Features

Yoga has fallen behind modern CSS features such as grid.

[nandorojo]

Flex Gap is a huge addition to RN. Echoing my appreciation for the recent work there.

Some other gaps with CSS I find myself wanting regularly:

• fixed & sticky position

• Modern things like like mask and clip-path, as mentioned here

• Multiple shadows, as mentioned on the umbrella styles issue

• filter for things like blur(20px)

• All kinds of gradient backgrounds

[natew]

Some other big ones:

• display: contents - really important for attaching events to child components you don’t have control over without changing flex behavior
• shadows not breaking with overflow hidden
• Multiple shadows

[efstathiosntonas]

Bottom shadows only, without the need to wrap the element in a parent with overflow: hidden

[aliveornot]

Shadows that can be used consistently in android and iOS

[dmahajan980]

Text outline support on both Android and iOS.

[a7medev]

Upgrades

React Native upgrades have always been very painful and the react-native upgrade command doesn't work even for new apps, the upgrading experience should be easier.

[bogas04]

Solve this problem first, you drive quicker adoption.
Add other crazy features first, you cause segmentation.

[AtilaDev]

Agree! But Expo does upgrade very good recently. I use one command, expo upgrade from expo 45 to 46. It works like a charm. Try it.

But not all companies use Expo. It would be convenient if React Native works in a similar way to Expo in terms of version updates. Upgrading an app with Expo is a delight. I can't say the same for React Native CLI.

[yurykorzun]

I never use react-native upgrade because every project is different and I always do it manually by referencing https://react-native-community.github.io/upgrade-helper/. Lack of transparency in the upgrade process prevents using the upgrade command.

[lovetingyuan]

offer an easy way to get updates on the fly.

[varemenos]

Changes to project.pbproj are very easily missed/ignored when upgrading, and even if notice them, 99% of the time, the changes are very hard to comprehend or apply. References are being moved around and they generate unique IDs, files are added/removed, build scripts are changed, it's just chaos for someone that doesn't have a very concrete understanding of how iOS development works.

If React Native wants to improve it's upgrade experience, this is the #1 issue to take.

[aarongrider]

Enabling The New Architecture

Fabric & TurboModules are obviously the future of React Native, and a vital component of continued relevance.

Unfortunately the upgrade story is a non-starter for any app at scale using dozens of native packages that are either abandoned or unwilling to migrate. (abandoned packages are also a huge problem).

We need to find a story for these cornerstone apps, and ideally provide an upgrade path to enable the new architecture.

[kelset]

the "tracker" is here: reactwg/react-native-new-architecture#6

[ltcaosj]

Support legacy component in New Architecture app by a proxy or a virtualization layer. This will motivate people adopts the New Architecture much quicker and earlier.

[alexandrius]

Support legacy component in New Architecture app by a proxy or a virtualization layer. This will motivate people adopts the New Architecture much quicker and earlier.

This should get most attention tbf

[aarongrider-sx]

Support legacy component in New Architecture app by a proxy or a virtualization layer. This will motivate people adopts the New Architecture much quicker and earlier.

This would be ideal. Any ideas on the technical feasibly of this?

[zoontek]

@ltcaosj This could be amazing.

I maintain several libraries (react-native-{localize, permissions, bootsplash, etc.}) and don't really want to supports both architectures at the same time (at least, without a compatibility layer).
My current strategy is maybe to wait a bit until it's stable enough, ship a library new major version which is only compatible with the new arch. Users would have to stick to the previous version if they still use the previous one.

PS: It's currently quite hard to maintain RN libraries: The documentation is light (until recently, no guides for Kotlin / Swift), OS features evolves each year (the permissions changes, ugh), we often have to support multiple platforms: iOS, Android, but also the web, windows and macOS!

Focusing on maintainer DX could be a nice, necessary move.

[dylancom]

Add native UITableView (iOS) integration for lists. Which has much better performance than FlatList and extra features such as a A-Z list (sectionIndexTitles).

Large lists are a pain now.

[dylancom]

FlashList is still missing native features such as the sectionIndexTitles as far as I'm aware.
(A-Z list on the right which allows fast scrolling trough a large set.)
https://github.com/aksonov/react-native-tableview came pretty far but isn't maintained anymore unfortunately.

[NickGerleman]

react-native-tableview takes an approach that's good for performance, where list items are purely native components, controlled by props, instead of arbitrary complexity React components. So it gives you some styling options, and works for lists where items are just text and an image.

If React Native offered a similar API, would that fit the usages where folks are seeing perf issues? Or should we be spending the effort on lists which allow children to be React components?

[enahum]

items with dynamic height is a pain, specially trying to render initially a item on an index that it hasn't been already measured.

Ex: Say a list of 1000 items all with different heights (unknown heights like the posts in this discussion) and you want to render item 458 as the first visible item on the list.

[jacobp100]

https://github.com/jacobp100/react-native-tableview-list

[todorone]

react-native-tableview takes an approach that's good for performance, where list items are purely native components, controlled by props, instead of arbitrary complexity React components. So it gives you some styling options, and works for lists where items are just text and an image.

If React Native offered a similar API, would that fit the usages where folks are seeing perf issues? Or should we be spending the effort on lists which allow children to be React components?

We definitely want to leave React components as items. FlashList proofed that performant lists are possible(maybe with some constraints like fixed height), it's performance significantly superior to the FlatList.

[scarlac]

Debugging with Flipper

"How do I debug a RN app?" - The official answer is Flipper. However, anyone working with Flipper eventually experiences the same thing: Flipper is unbearably slow and buggy. Flipper is slower to boot than both Xcode and Android Studio.
Once booted, every click is an exercise in patience and luck. Expanding the "Disabled" plugins list may take a few seconds. The UI frequently freezes up for seconds. It ships with a log of plugins by default, but few of them are actually usable, e.g. "Headless-Demo", "Bridge-Spy", "KaiOS RAM graph". Even "Databases", which could be helpful, only works on Andriod, which isn't at all clear.

There's a very long list of bugs and useless warnings, e.g. "You're using an outdated version" which must be dismissed manually, socket warnings that cannot be fixed, clicking the settings icon doesn't open settings, dev menu button does nothing, screenshot button fails, plugin manager search doesn't show results that it should, it's hard to figure out what plugin maps to what GitHub project, plugins come with no instructions, and the list just goes on.

To sum up, when people ask me "What do you do to debug?" I simply avoid mentioning Flipper. The whole plugin arch is a nice thought but what we really need is a performant, bug-free, tool for a small set of problems that many have:

• Debugger
• Redux state inspector (reality is that many use redux, so even if it's a bit specific, this is an extremely useful tool)
• Database inspector (AsyncStorage, SQLite)
• App filesystem browser
• Network inspector
• ADB Logcat / Xcode logs

Improving the debug cycle would have an enormous effect on developing apps.

[declanelcocks]

Definitely one of the main pain points and something that a lot of devs coming from web development struggle with. On the web you have things like Profiler, debuggers, flame graphs etc. that are all helpful. On React Native issues with UI, animation, performance etc. can easily crop up and it's difficult to debug the root cause or measure improvements.

[abhay-rana]

yeah react-native flipper is not compaitable with the latest version of firebase

[Return-1]

You are not alone, every team/company i've ever worked with small to big has always had grievances with the DX experience ( a testament to how great RN is overall since they still use it ).

Debugging is hard. It's generally difficult understanding what went wrong, where in the code the error actually is and how to fix it. Not being able to debug properly ( including native side of things which is already arcane to most RN developers that aren't coming from a native background ) takes a lot of time.

P.S : Flipper also consumes so much memory as things are

[Bardiamist]

Flipper uses many CPU resourses so I don't used this
I still always have Reactotron in background
I'd keep Flipper if background if it will not load CPU much (and will fork with Firebase)

[birminghamallen]

Interesting. I need to learn more about flipper.

[irekrog]

• create a docs with cases and examples that developers can meet every day (like beta.reactjs.org)
• add examples related to different libraries, tools, problems: eg. store sensitive data like auth tokens etc. (like examples folder in next.js repo)
• more frequent updates
• better support for monorepos and different packages manager like pnpm
• nice to have would be videos on yt for every release with described changes

[EvanBacon]

Metro team is working on pnpm support cite.

[arasrezaei]

There is no way to specify items of context menu in textInputs ... I think it's pretty easy to implement and should be a prop for text input, like:
<TextInput contextMenu={[{title: 'remove', icon: myIcon}, ...]} withDefaultContextMenuItems={true/false} />

[fabOnReact]

An explanation of the requirement is in this StackOverflow code example.

• Adding the contextMenu prop to the TextInput component [{title: 'remove', icon: myIcon}]
• Adding ReactEditText API setCustomSelectionActionModeCallback (an example of implementation on StackOverflow)
• Trigger a JavaScript callback as done with onAccessibilityAction.

[niraj-khatiwada]

Native forms, better debugging information in Logbox, performant list, and better UI Inspector.

[pushpender-singh-ap]

1. Provide better support for control of every single pixel that is drawn on the screen like flutter control.
2. Provide support for watchOS and wearOS.
3. Provide better documentation for VR.

[alexandrius]

Use react-native-svg or skia.

[pushpender-singh-ap]

Use react-native-svg or skia.

But what about 2 & 3 points?

[AdityaPahilwani]

These are some things which I would like to be addressed and fixed.

• The new architecture is out, but there are no performance benchmarks to check on what benefits we are getting.
• No proper documentation if synchronous methods in new architecture can harm or have any penalties attached to it, bridge synchronous clearly mentions cautions around synchronous methods.
• No documentation around concurrent rendering in react-native, any benefit or benchmark to properly look upon.
• Document the native areas. for example, createContextInBackground was advocated in Parashurama's talk otherwise nobody knew about it.
• There are plenty of react-native packages on which many projects depend on, and all of them are abandoned becoming a big hurdle to migrate.
• Fix nested text accessibility issues.
• Please fix the Modal issues.
• Give better support to handle blob files.
• Please give us a nice performant list component.

[kelset]

@AdityaPahilwani can you add links for the issues you mention for nested text and modal?

[fabOnReact]

can you add links for the issues you mention for nested text and modal?

@kelset [a11y] Accessibility for nested text components #32004 (iOS)
facebook/react-native#32004

[fabOnReact]

facebook/react-native#32004 (comment)

VID_20221219_153333.mp4

[fabOnReact]

Please fix the Modal issues.

He may refer to the issue facebook/react-native#30097, which is fixed with facebook/react-native#34969. This comment includes a video and the explanation of the fix.

[arasrezaei]

Another issue:
Measure function (positions) of nested Text component returns 0 or undefined always, and not working And you should use View inside text.
And if you put a view inside a text component you will get a misaligned text.

[fabOnReact]

Hidden as Outdated

react-native uses android spans for nested text components https://developer.android.com/develop/ui/views/text-and-emoji/spans
There is a related issue facebook/react-native#30375

[fabOnReact]

Hidden as Outdated

#528

Similar issues have been reported in react-native. Text on Android is represented with TextView, while nested Texts are represented as spans (Images as TextInlineImageSpan).

The style prop does not apply to nested Text. A solution to this issue is supporting the style prop for Nested Text on Android. The issue has also been reported here. I will work on landing a series of PRs that add this functionality to react-native. The PRs will close following react-native issues (if you have an open issues in react-native, feel free to comment it here):

• [Android] textAlignVertical doesn't work on nested text #30375
• Nested Text on Android broken with fontWeight and fontStyle #34554
• Nested View and Text vertical alignment issue. #31955
• [Android] Bad fontFamily and color styles merging with 3 Text nesting levels #31826
• display: none style property ignored on Android for nested text #31717
• Image nested in Text only show half content part on Android. facebook/react-native#29559
• [Android] Custom fonts not applied on nested text facebook/react-native#20398
• Nested text with different lineHeight are cropped on Android facebook/react-native#30794
• Nested Text with onPress / TouchableOpacity Bug facebook/react-native#27549
• [TextInput] Nested Text Components not able to have different Colors [iOS] facebook/react-native#29584

[fabOnReact]

The parameters returned from the measure callback are calculated in TextLayoutManagerBuffer method measureMapBuffer. Changing the value returned in measureMapBuffer changes the callback parameters.

The functionalities are implemented as follows:

• measure callback is defined as a Spec of FabricUIManager.js (link)
• codegen generates native types for the measure Spec (more info in generator tests, parser tests, codegen implementation, generateMethods)
• The JavaScript implementation of measure is included in UIManager and FabricUIManager
• ReactFabric-dev.js adds the measure method to the prototype (ref) (more info in Eli commit)
• The JavaScript measure method calls the FabricUIManager.java measureMapBuffer (FabricUIManager => MountingManager => ReactTextViewManager => TextLayoutManagerMapBuffer)
• The measureText method in TextLayoutManagerMapBuffer already includes logic to calculate the position of attachments (inline images). A modified version could be used to calculate the position of nested text.