search

react-native-community / discussions-and-proposals

Discussions and proposal related to the main React Native project
https://facebook.github.io/react-native/
1.66k stars 125 forks source link

"What do you dislike about React Native?" June 2019 Edition #134

Closed cpojer closed 3 years ago

cpojer commented 5 years ago

The React Native team at Facebook would like to collect a list of problems that people are experiencing on the latest versions of React Native (0.59 or 0.60). This was done six months ago in "What do you dislike about React Native?" and now it is time to get another pulse to understand what's causing problems for people. Today, we posted an update about React Native on our blog which tracks the progress we have made towards the top concerns from last time.

Please reply with all the issues that you are having with current versions of React Native, one comment at a time. Keep your descriptions short and ideally link to other places with more context. Feel free to mention not just technical things but rather any issue related to the React Native project. Add hashtags for easier categorization.

If something has been mentioned already, please use the upvote/emoji buttons instead of repeating the same thing so that it's easier to see how many people care about each issue. Please make one comment per topic so that people can upvote just one thing at a time.

Hypothetical Example:

Documentation needs more pictures of cats and dogs

When reading the React Native documentation I tend to get frustrated. Have you considered adding pictures of cute dogs and cats to make them more relaxing to look at? #documentation

Simple template with header (feel free to copy and paste)

###
RWOverdijk commented 5 years ago

Live reload often causes issues

When using Typescript I have to reload my app often when using live reload. It does reload, but it shows the red screen with "Unable to find module for EventDispatcher". It has done this for a while. This combined with hot module reloading not working very stable causes some frustrations in dev. xcode also logs a lot of noise. There are plenty of issues about these things, too.

TL;DR; I guess for me it's #devExperience?

jono-allen commented 5 years ago

No documentation for adding build flavours for both platforms

Currently react-native only ships with debug and production builds. Quite often in a development stage, the use of multiple builds (Staging, QA, Sandbox) is beneficial. Would be an opportunity to better describe and add tools (maybe for the cli).

jono-allen commented 5 years ago

When adding native code warnings aren't clear that a new build is needed.

When adding a module. Often reloading the bundle the warnings can be confusing. I think like with react-native, a warning saying native modules are out of sync with a bundle or need a rebuild would be a good developer experience.

jono-allen commented 5 years ago

Imports are not from root.

When setting up a react-native project all imports are relative. It's very common that a developer will add babel-plugin-module-resolver. I would like to see this done in a way by default.

jono-allen commented 5 years ago

Cold start warnings.

React native doesn't have a friendly way to track down which modules are causing long startup times. I often struggle to track down these issues.

AndreiCalazans commented 5 years ago

Extend react-native cli to accept terminal commands

After starting the packager, I would like to be able to send commands to the running apps through the command line. It would be nice to accept commands for live reload, hot reloading, toggle debugger, and et cetera.

Doing so would improve developer experience, currently shaking the phone or using shortcuts to toggle the Dev Menu is a bigger hassle.

The available commands should be ideally displayed after you run react-native start

After dependencies are loaded:


Metro Bundler ready.

Loading dependency graph, done.

To hot reload press "r"
To restart the app press "R"
To toggle debugging mode press "d"

More commands could be included...

ChuksFestus commented 5 years ago

Expo!!!

Seriously the fact that you have to use expo to get this up and running is not cool. Don't get me wrong I like expo but it is usually very heavy so no matter how simple your app is, it will always be 20mb or more

yinhangfeng commented 5 years ago

Android JSC Crash

https://github.com/facebook/react-native/issues/24261

xzilja commented 5 years ago

Assets for all resolutions are bundled with the app

Right now we can specify images for various screen resolutions by appending suffixes like @2x and @3x to their filenames. This gives benefit of performance on lower end / low res devices, but at the same time increases app size since all of these assets are included.

iOS solves this through combination of asset catalogs and bytecode enabled builds, where app store serves versions with correct image resolutions based on user device. (I'm not sure if android has something like this).

It would be awesome if we could still keep images in one place and use those suffixes as well as optimise our bundle / apk sizes.

rebeccatownsend-rally commented 5 years ago

Metro Symlinks aren't supported by default

We need symlink support to do a lot of things. For me, it's a major headache trying to to develop package dependencies and work with Lerna monorepos without this support. There are currently a few workarounds that the community has shared, but none are one-size-fits all, and it's a major time suck to finesse a fix that works for your specific use case. This should really be something that everyone can leverage out of the box.

robertying commented 5 years ago

Lean Core is great but extracted repos may not be well-attended

I believe Lean Core is a great idea. But I have seen some projects that were previously extracted become inactive. People can get responses quickly from the main repo but not from those repos residing in react-native-community.

Current disappointment:

robertying commented 5 years ago

Swift not being the default language for iOS

It would be much better for JavaScript programmers (at least for me) to quickly navigate through iOS source code written in Swift than Objective-C which lacks readability compared to the other languages (Java, JavaScript ...). Besides, many examples concerning iOS are now written in Swift. Encouraging Swift in RN projects can make it easier for developers to debug native code or make their own (common case: add custom logics into lifecycle functions).

I personally would like RN to:

hrastnik commented 5 years ago

Linking native modules

This is by far my greatest pain point. I know it's up to the developers of native modules to provide linking instructions and maintain the libraries, but I feel that there could be improvements there. For example, if there was a mechanism exposed by react-native-cli that would enable maintainers a clean way to inject code and assets into the native project, it would make things much more consistent. react-native link should do the trick, but in practice it fails more often than not, and running the command twice causes even more complications. Then we're stuck going through the module install docs, and fixing stuff line by line. On Android it's mostly adding some permissions to the manifest, build.gradle, checking minSdk versions etc. A lot of that could be done programmatically if only there was an API exposed by rn-cli. For custom stuff like API Keys, custom configurations etc. an interactive shell could prompt the user to enter the needed data.

Shaking to get to dev menu

I'd love if there was an option to configure another way to get to the dev menu. Expo has a cool feature with having a menu in the notification bar. I wish this was the case with react-native init

firofame commented 5 years ago

Documentation on creating a wrapper for iOS and Android SDKs would be great!

iremlopsum commented 5 years ago

This might not exactly be the feedback that you are expecting, but the fact that when child has elevation, and you animate alpha of the parent, the elevation alpha does not animate in Android P (https://github.com/facebook/react-native/issues/23090). This requires me to constantly write hacks in my app and really is the thing that hinders me the most on a daily basis

rakibtg commented 5 years ago

Navigation Library

React Native doesn't have a proper native navigation library built in! It should have a native nav implementation where all of its animations etc could be on the main thread, dont have to block js thread.

maleking commented 5 years ago

Hot reloading

Hook incompatibility with hot reloader

OwenMelbz commented 5 years ago

Unify dev tooling between pure and expo

Currently the expo tool chain seems to have so much more love, not asking for expo SDK stuff, but simple things like the webpack config, debug menus, developer UIs with metro etc.

It’s so much nicer with expo and maybe sharing some of that sugar back to pure will be a nice addition ❤️

esbenp commented 5 years ago

Random build errors / lack of troubleshooting documentation

I very frequently run into random build errors like

Undefined symbols for architecture arm64:
  "_OBJC_CLASS_$_RCTSRWebSocket", referenced from:
      objc-class-ref in libReact.a(RCTInspectorPackagerConnection.o)
  "_OBJC_CLASS_$_RCTReconnectingWebSocket", referenced from:
      objc-class-ref in libReact.a(RCTPackagerConnection.o)
ld: symbol(s) not found for architecture arm64

etc. (see https://github.com/facebook/react-native/issues/15838). The linked issue is almost 2 years old and I had this issue 2 days ago on 0.59.8. I assume this is some build step thing and not directly related to react-native as such but more on how its dependencies are handled by xcode/cocoapods or something, but to me this is the most annoying thing developing react-native. You end up spending far too much time trying to fix non-application errors like this. And I realize its hard for you guys to debug since its most likely very stateful and hard to reproduce, but I think there is a huge lack of troubleshooting/best-practice guides around building/running.

E.g. dealing with Cocoapods have been a huge pain for us. And the actual documentation about it is a small subsection of another topic (Integration with Existing Apps). I think a lot of react-native developers are confused about these things because we come from web. My first experience with xcode/cocoapods have been with react-native. There are no "this is how to set up cocoapods inside xcode, this is how to deal with common error a,b,c, this is how to reset everything when all else fails" etc. A lot of times it feels like you cannot develop react-native in the long run unless you are already skilled with xcode and the ios ecosystem

brunolemos commented 5 years ago

Hot reloading

Fix hot reloading to work reliably with hooks and state support.

It was one of the things that made me love react-native a few years ago and it's been broken for a while. I see Dan has been working on it which is super great, hopefully it gets released soon.

suretarget commented 5 years ago

Flatlist Component

There are 69 open issues related to this component (Some duplicated). Some issue related to Flatlist is opened since 2017. The bug is still present in the latest version. https://github.com/facebook/react-native/issues/16067 I wish the bug is fixed before releasing v0.60 stable. If we can resolve this component most of the issues is solved.

diegolmello commented 5 years ago

Slow TextInput is still a thing

https://github.com/facebook/react-native/issues/20119

brunolemos commented 5 years ago

macOS support via Project Catalyst

iOS apps will be able to run natively in macOS. Currently the build doesn't pass. React Native only needs to make sure the build passes as the first step.

https://github.com/react-native-community/discussions-and-proposals/issues/131

Doko-Demo-Doa commented 5 years ago

FlatList performance

FlatList isn’t performant as it is advertised. It’s more like a workaround for long ScrollView. I was so hyped with Sophie’s blog post last year about Fabric and potential UICollectionView / RecyclerView interop, but it seems that it’s still not possible as of now

vishaljani2 commented 5 years ago

Performance and fabric

Performance issues are big headache. Flatlist, navigation and animation waiting for fabric(https://github.com/react-native-community/discussions-and-proposals/issues/4) . Hoping it will come soon.

gwmccull commented 5 years ago

errors on the React Native bridge don't give enough context to debug the error

I spent a day (not the first time) trying to locate an error, Attempt to invoke virtual method 'double java.lang.Double.doubleValue()' on a null object reference. It was a fatal error that only occurred on beta versions of our Android app (didn't happen when the app was side-loaded in a debug build). The stacktrace wasn't helpful either:

com.facebook.react.bridge.ReadableNativeArray in getDouble at line 115
com.facebook.react.bridge.JavaMethodWrapper$4 in extractArgument at line 64
com.facebook.react.bridge.JavaMethodWrapper$4 in extractArgument at line 60
com.facebook.react.bridge.JavaMethodWrapper in invoke at line 359
com.facebook.react.bridge.JavaModuleWrapper in invoke at line 158
com.facebook.react.bridge.queue.NativeRunnable in run
android.os.Handler in handleCallback at line 789
android.os.Handler in dispatchMessage at line 98
com.facebook.react.bridge.queue.MessageQueueThreadHandler in dispatchMessage at line 29
android.os.Looper in loop at line 164
com.facebook.react.bridge.queue.MessageQueueThreadImpl$4 in run at line 232
java.lang.Thread in run at line 764

I've done this long enough to know that this means a null/undefined is being passed to bridge module when it's expecting a number. But figuring out which library is getting the bad value takes forever.

I feel like there should be some way to add some context or bridge name to the stacktrace to make this error easier to debug

ChuksFestus commented 5 years ago

Java and ObjC as default :disappointed:

It would be nice to actually select which language to target. Java and objC are great though but both the Android and iOS community are moving to kotlin and swift respectively. It would be nice to actually use these too. In flutter you could run flutter create -i swift -a kotlin hello and it will output Swift and kotlin files instead of java/objC

liaopen123 commented 5 years ago

online app how to get crash info？？

wuao commented 5 years ago

我 已经习惯了动不动 就编译不通过 然后多Reload 就几次就好了 极大的提升了我的耐心 以前看到报错总想解决 现在想法是 fuck 能他妈的跑起来就不错了 我已经用它开发了1年多了 习惯了他的不靠谱了

artechventure commented 5 years ago

Native animation and gestures

The originial animated API is not that smooth, and JS blocking if not using useNativeDriver. And useNativeDriver doesn't support all type of animations. Libraries like react-native-gesture-handler and react-native-reanimated solves pretty much of this issue, but it would be nice if react native team implement things from these libraries

uiue commented 5 years ago

When can I support large list views When can I support large list views? our e-commerce application has a list of 10,000 items. Fast swipe will cause the application to white screen and memory growth, and FlatList does not solve the problem.

garrettm commented 5 years ago

Performance

It's difficult to execute cpu heavy tasks with only one thread. It would be great if RN supported the web worker API.

Related (the linked implementation is no longer functioning)

RWOverdijk commented 5 years ago

animated scrollToX on FlatList callback

A couple of my apps contain several timeouts in them because there's no way to wait for scrollToX (for example scrollToIndex) to complete when animated: true.

https://react-native.canny.io/feature-requests/p/scrollview-add-completion-callback-to-scrollto

This has caused some trouble. More than once, especially because I can't know how long an animation will take. Slow animations enabled in the simulator for example causes things to go bonkers; bonkers I tell you!

yeswanth commented 5 years ago

Better documentation for Button components

A better understanding of Button components namely Button,TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback and the use cases they serve would be of great help.

ancyrweb commented 5 years ago

Improve Styling

Multiple problems with styling :

brentvatne commented 5 years ago

@ChuksFestus and those who 👍'd his comment re: Expo being recommended as a way to get started:

1) We updated the getting started a couple months ago to more clearly outline the choices you have, and recommend that if you come from a web background you use Expo to get started because you don't need to install Xcode / Android Studio to do so. Keep in mind that this is called "Getting Started" not "Minimizing the size of your binary" - if that was the objective then clearly we would recommend different things. Take a read and let me know what looks wrong about it, probably not in this thread though because it would derail. Send me a message on Twitter (@notbrent) or something. 2) With respect to binary size, we're in the process of making it possible to opt-out of APIs at build time so the binary will be smaller. Also comparing "Hello World" app sizes isn't particularly useful, because as soon as you actually add any meat to your app you will start to get closer to the initial size of the current "Hello World" app built with managed Expo workflow, whereas the size doesn't change much in an app built with Expo because the tools you need are already there (unless they aren't, then you need to eject, see the next point). 3) In our next release, Expo eject will give you just a plain React Native app with the APIs you're using from Expo pre-installed, so going from an "Expo managed" project to a bare React Native project will be as simple as expo eject.

brentvatne commented 5 years ago

Portals

It'd be quite useful to have first-class support for Portals in React Native. Right now the best solution is to fake a portal by providing a React element from some nested child to be rendered inside another container, but this results in losing access to context.

ywongweb commented 5 years ago

No documentation for adding build flavours for both platforms

Currently react-native only ships with debug and production builds. Quite often in a development stage, the use of multiple builds (Staging, QA, Sandbox) is beneficial. Would be an opportunity to better describe and add tools (maybe for the cli).

Shameless plug 😉 I wrote a guide on how to add multi-tenancy to a React Native project. Happy to contribute to the official React Native readme if the method used is up to Facebook's standard. Also would love to hear any suggestions and advice on how to make it better.

https://medium.com/@ywongcode/building-multiple-versions-of-a-react-native-app-4361252ddde5

ericwooley commented 5 years ago

Communication in the issues is lacking.

https://github.com/facebook/react-native/issues/17986 has been an issue that is a major pain for a lot of people, for a long time, and only 1 (official?) reply that it's difficult to fix.

Long running issues like this are just filled with people trying to figure out how such a painful issue could persist for years, and confirming that it's still broken in whatever release just came out.

Maybe consider triaging and prioritizing issues? Adding labels or milestones for the issues?

It's very frustrating to have to unsubscribe from an issue that you have been following for years, or months, because your tired of people spamming workarounds and confirming it's broken (still).

Jekiwijaya commented 5 years ago

FlatList / ScrollView scroll animation speed

It would be more beautiful if we could modify the speed of scrollview animation speed

Related Links: https://github.com/facebook/react-native/pull/22884 https://react-native.canny.io/feature-requests/p/add-speed-attribute-to-scrollto

iremlopsum commented 5 years ago

@Jekiwijaya This is already a thing https://facebook.github.io/react-native/docs/scrollview#scrollto

But to piggyback on your comment. I would love the possibility to define decay values within a paginated scrollview when snapping. There is a decelerationRate prop, but it doesn't seem to do much for paginated scroll

creambyemute commented 5 years ago

Keyboard Handling

Even after over a year of working with RN I find myself as well a colleagues and a lot of ppl in the community struggling with handling Layout when the Keyboard is present.

There are so many libraries trying to solve this but I haven't seen a single example where it actually worked. It's always a finicky let's try that and then that library until you find one that works in the specific case...

If this could be included in the new documentation with a more extensive example than what is shown here: https://facebook.github.io/react-native/docs/keyboardavoidingview (which doesn't seem to work), that would be great I think

The keyboard is a very important "component" but can "destroy" your layout and the docs aren't lending a helping hand there. So it'd be nice if beginners don't have to google for hours to find a working/acceptable solution.

If you see more points that could be covered let me know :-).

rakibtg commented 5 years ago

Depending too much on community effort

Don't get me wrong to begin with, community efforts makes a lot of thing possible today that revolutionized our society, including React Native.

However, When we love and use a framework that means we love it's consistency and the consistency of it's ecosystem, depending too much on community effort would cause frustration while development, and will hurt the concept of cross-platform development. There is lot of solutions today that either works on iOS or android which counteractive of being cross platform.

To uphold the situation one of the most popular module is react-native-push-notification by zo0r!! People already started to ask if it is abandoned being helpless there no other way but to use it.

Core app features that is a part of the app's ecosystem should be built in-house and then let the community to improve as they need them.

Bessonov commented 5 years ago

Usage of existing prioritization tools

There already tools, which can be used for prioritization of pain points:

Bessonov commented 5 years ago

Better TypeScript support

Same as 👻 Flow Typing NativeModules, but for TS.

pvinis commented 5 years ago

Becoming its own thing, too far from the native platforms

React native started as a way to control native stuff like views, buttons, managers etc from javascript and react. For a while, it has been like that, and any new type of view or control etc has been implemented.

My fear is that maybe in the future RN will be something like other "multiplatform" tools, where they have their own layer of views or controls, completely abstracted from the native platforms it is underneath. I like the idea of having the Button. I like the idea of having Button with all the props available that could fit ios and/or android. I like the idea of a Button producing a simple native button on ios and a simple native button on android, even if they look different. I would be really sad if a Button would produce a button in both platforms that looks the same, but different to other native controls of each platform. Does that make sense?

Basically, I want RN to be a js/react layer juuuust above the native platforms, and I want to know that the native platforms are right underneath there, and I can play and manipulate them.

I don't want RN to be it's own rendering engine, replacing what native platforms have built. I don't want RN to be such an abstracted layer that I can't even see the native platforms hiding underneath it.

simonedavico commented 5 years ago

Starting with native modules is very hard

The docs section explaining how to create a custom native module are ok, but there is no guidance regarding setting up these modules as separate dependencies.

Third party projects like create-react-native-library and create-react-native-bridge are a starting point, but are not actively maintained.

Moreover, a beginner will find very hard to setup development environments for native modules (how to properly setup a project for developing the iOS/Android side of the bridge), what is the advised package structure, is it best practice to include a podspec and so on...

I feel that some guidance/tutorial/set of best practices included in the docs could be a start, but also having some command to scaffold correctly a custom native module would be great.

ATShiTou commented 5 years ago

Version updating is too frequent. And it is a disaster to upgrade for an old project with many third libraries.

I'm always out of date with the latest react-native version.But scared to upgrade it. And I do not think it is necessary to publish the new main version so frequently.

Basic framework problems are always ignored for years.

Custom JS component in some case can't receive event from native UI component. Issue 16122 and Issue 17646 are examples. This also happen on iOS when you drag several times quickly before it rebound. It is the reason why there is no a good third library to support customizing refreshing component in ScrollView or FlatList. The event which is ignored will destroy the user experience.

I have tried my best to support it via always sending onScroll event with extra data to JavaScript to resolve this problems. react-native-spring-scrollview

It is too slow to communicate with native modules on Android.

A native calling in JavaScript is more than 30ms delay. This is the reason why you can double click a button to navigate to two different screen with react-native-navigation. And it stops the ability on performance optimization in some special case, and stops high quality third libraries.

The worst gesture system I have used.

Now react-native-gesture-handler is a much better choice.

No optional import method

Any import or require is before compile. Can not support optional import.

dayhaysoos commented 5 years ago

React Native (FlatList) is not built to support Robust Spreadsheets

It's incredibly painful to do things like have a spreadsheet with bi-directional swiping to view data (horizontally and vertically). right now you have to nest FlatList in a ScrollView that is set to scroll horizontally which causes more problems if you wanted to style things in a very specific way.

Also, there should be a prop to make the left column a stickyHeader.

I know we've talked about this @cpojer, just want to see if there are others that have the same problems as me.

dayhaysoos commented 5 years ago

React Native needs better support for in-app-purchasing.

IAP is a very important aspect for mobile development, Bug Snag reports that MOST React Native apps are free:

https://www.bugsnag.com/content/state-of-react-native-2019

There are actually some helpful libraries out there (react-native-iap) but dealing with IAP is not very well documented in the React Native ecosystem in general. Perhaps this would encourage developers to make more money from their work or be taken more seriously by companies that plan on making money off mobile.