12 ms·
Show HN: React Native scrollable bottom sheet native animations gestures 60FPS
- nerdbaggy 6y agoWould love to see an actual demo link in the GitHub. Although there is a lot lot of stuff so I may have missed it
- victor9000 6y agoHera ya go, requires Expo on Android: https://expo.io/@rgommezz/react-native-scroll-bottom-sheet-example https://expo.io/@rgommezz/react-native-scroll-bottom-sheet-e...
- nabn 6y agothat's not fast
- victor9000 6y agoThen don't use it? The amount of useless negativity in this thread is really amazing. The repo has ~650 stars right now, so clearly developers are finding this work to be useful. Yet look at all the mindless poo slinging going on in this "community".
- sandGorgon 6y agoThis is super brilliant. Have you tested this with the new Hermes engine on both iOS and Android?
- rgommezz 6y agoI haven't. Although I reckon there shouldn't be much difference performance wise, since all the heavy lifting is done on the native thread. Maybe it could potentially improve the mounting time, which is the only code JS has to run during the lifecycle of the component.
- evv 6y agoHermes is Android-only because on iOS, Apple only allows downloadable code to run in JSC.
- ericwood 6y agoThis seems to be one of those react native holy grails; I've been building an emoji picker similar to the one Slack uses but it's been a chore! I recently discovered Modalize, and it's working fairly well, but for a long SectionList performance was abysmal; there's so many levers to pull with any of those VirtualizedList components it's tough to tell if it was me or modalize. Excited to check this out!
- bhl 6y agoAre you building an emoji picker with each emoji per row, or multiple emojis per row? I'm wondering since there's virtualization libraries for lists, but not for grids.
- 411111111111111 6y agoIf flexbox taught me anything, it's that a grid is a list of lists.
- k__ 6y agoDon't let the CSS-Grid people hear this :D
- ericwood 6y agoIt's around 8 emojis per row; FlatList can do multiple columns out of the box, but in order to allow scrolling through all categories I was forced to use SectionList to get the headings. Chunking the larger data array into groups of 8 and rendering them as single columns worked well enough, but the perf was abysmal, and it wasn't immediately clear why. I've found all of the VirtualizedList components are an absolute nightmare to perf tune, so I replaced the SectionList with a ScrollView and instead force users to tap on categories to switch.
- cosmotic 6y agoA+ job on a polished version of that interface element. It's too bad it's an interface element that causes a lot of pain by covering content and embracing dark patterns.
- ghayes 6y agoCan you elaborate on how it's used as a dark pattern?
- cosmotic 6y agoAdded to a previous comment.
- victorvation 6y agoIn my opinion bottom sheets are actually a far superior experience to the previous pattern of dialogs/modals or push screens: - The user doesn't lose their navigation stack because they can tell the bottom sheet can be dismissed, they know where they "came from" - The user keeps visual context on whatever triggered the bottom sheet, because they can still see what's behind it - The user doesn't get forcibly navigated away from whatever they were browsing, they know that once whatever they're doing in the sheet is done, they can "go back". My only complaint is that Apple added them to stock apps in iOS 12, so many iOS users got used to the pattern, but didn't provide an easy way to give the same experience for developers which creating a need for libraries like this.
- cosmotic 6y agoI'm not defending dialogs or modals, but at least with those (on a larger screen) you have control over what hey cover. I suspect most users wouldn't even know the bottom sheet is there nor how to bring it up nor how to dismiss it had they brought it up. The visual context on whatever is underneath is lost once the sheet is brought up. The user absolutely get forcibly navigated away; their context is shifted to the new layer which is slapped on top of the other layer. I can't count the number of times I either accidentally activated the bottom sheet or used it then got lost. Bottom sheets are like hamburger menus; they are rugs that UX designers sweep all their baggage underneath.
- Austin_Conlon 6y agoI wonder if Apple will release first-party API for this kind of UI in a month at WWDC.
- nxc18 6y agoIt’s sorely needed at this point, it’s clearly a standard UI control now and countless developer hours have been wasted on it. I’ve got several apps on my phone (maps, DoorDash, google maps, etc) all doing the same thing, but inconsistently and it’s infuriating. What makes iOS great (IMO) is consistency in UI patterns with things like navigation controllers, toolbars, etc. floating sheets are worthy of that treatment.
- kall 6y agoespecially frustrating because apple themselves have a good version of it (in Maps, Shortcuts)
- julius_set 6y agoLol at all the web dudes amazed by this, making this on native mobile is a breeze (Android and iOS)
- nxc18 6y agoNative iOS alone is a substantial project in its own right. https://github.com/SCENEE/FloatingPanel https://github.com/SCENEE/FloatingPanel There are several of these implementations. I’ve recently had to implement something similar in Xamarin.iOS. It isn’t a breeze.
- LeoNatan25 6y ago60fps and gesture handling is a breeze on iOS. There is nothing impressive about achieving this. We’ve had it for 13 years now on iPhones. We now have 120hz displays on iPads, and guess what, animations there are easy to achieve too, at 120fps.
- exogen 6y agoMaybe you should let the amateur devs at Facebook and Pinterest know how easy it is? After all, they developed this entire framework in Objective-C to address UI performance, and – shocker here – they consider 60fps a selling point there, too. https://www.youtube.com/watch?v=8ngXakpE2x8 https://www.youtube.com/watch?v=8ngXakpE2x8 I guess you probably have better insight than the devs of two of the most popular native apps, though. Cheers!
- julius_set 6y agoYes I’ve worked at FAANG companies, and yes it’s great Instagram used AsyncDisplayKit (which is archived by the way). For most companies (maybe all), it’s not needed. Apple is doing a fantastic job abstracting views into SwiftUI and Android team is doing the same with Jetpack Compose. Then what? More abstractions over abstractions to achieve 60 or 120 FPS through another framework? And this is not related to the OP post, making these bottom sheets is a breeze. Literally: 1.) Custom ViewController with custom UIView as base view 2.) Add as child or present over root controller 3.) Translate and animate custom base view from bottom (top... left... whatever the hell you like)
- robertoandred 6y agoCan you scroll down to close or do you have to drag the handle itself?
- rgommezz 6y agoAbsolutely! You can scroll down to close it as well
- ex3ndr 6y agoVery cool! I just really recommend to use our library (https://github.com/openland/react-native-fast-animations https://github.com/openland/react-native-fast-animations) for non interactive animations like appearing and disappearing. Since iOS and Android could block UI thread during initial layouting if there are a lot of content and you will get dropped frames or just broken animation (if freeze will be ~200ms). This is important since iOS actually rely that all animations are done via Core Animation that could not be blocked by main thread and therefore a lot of UI widgets are just slow on first view. Most iOS developers don't care if instantiating view will take 50ms since you have 300ms budget for all transition animations. This library does same thing for Android by "hacking" native API the same way as official Google Apps do. This is a shame that google not opening this API.
- sandGorgon 6y agoWhat about MotionLayout ?
- ex3ndr 6y agoAll Android API executes animations on main thread except for vector animations, but in reality you need transitions to be fast.
- hadrien01 6y ago> This library does same thing for Android by "hacking" native API the same way as official Google Apps do. This is a shame that google not opening this API. I'm interested to read more about that, do you have an article or something?
- ex3ndr 6y agoI have an idea about an article unfortunately I can’t write in polite way about this issue, will try again soon.
- dep_b 6y agoWe thought maintaining two platforms was too much, so we got React Native. Now we have three to maintain.
- Kiro 6y ago> Also, it's 100% compatible with Expo. What does this mean? I thought Expo was just tooling for React Native.
- HeinZawHtet 6y ago"Expo compatible: no need to eject to enjoy this component!"
- fknop 6y agoExpo comes with pre-installed native bindings. If you want to add native bindings to your expo app you need to eject. This means it does not use any native bindings not included in the Expo SDK.
- deleted 6y ago[deleted]
- jiofih 6y agoWhy would you put a list or carousel inside a bottom sheet? Please don’t.
- polynomial 6y agoWhy not? Don't have a lot of experience with React Native, so it's not immediately obvious why that is a bad thing.
- jiofih 6y agoNot specific to RN, just terrible UI. Bottom sheets are for contextual info, action sheets, not loads of content.
- nicoburns 6y agoDo you use iOS? On Android I agree, but iOS seems to have adopted bottom sheets as a way to make up for it's lack of a back button, which means that you have to reach all the way to the top of the screen to dismiss a traditional modal, and it works pretty well.
- jiofih 6y agoJust look at the example videos they have in the repo. You won’t find any of that in iOS apps.
- evv 6y agoApple Maps has vertical and horizontal(carousel) scrolling inside the bottom sheet. Apple is often regarded as the industry leader in mobile interaction design. Why would you make a remark like this without any explanation or supporting argument? Please don't.
- tcmb 6y ago> Show HN: React Native scrollable bottom sheet native animations gestures 60FPS What a trainwreck of a headline. It sounds like someone fell asleep on the push button of a 'modern web dev' phrase generator.
- 0xDEEPFAC 6y agoYou mean our modern super-computer level machines with gigabytes of RAM and GHz level processors can actually show basic animations at 60 FPS!? Wow! RIP native development, long live non-native native development?
- jfkebwjsbx 6y agoYeah, is a bit shocking this being news in 2020...
- tomaskafka 6y agoBut apparently only in the bottom sheet. Scientist estimate, though, that humanity might be able to achieve 60fps scrolling in other app areas as soon as 2035, on a schedule right after cold fusion!
- tenaciousDaniel 6y agoAs someone with a shallow grasp of rendering in general, it amazes me that we can achieve near 60fps for these insanely detailed games with tons of 3D objects, and yet we find it difficult to do the same with 2D UI rendering.
- 0xDEEPFAC 6y agoIts the abstraction on abstraction culture which seems to be the norm these days, because, hey "ECMA script is portable and accessible"! So lets "browserify" all the things... Just wait until your BBQ has its own browser - oh shit wait https://news.ycombinator.com/item?id=23277594 https://news.ycombinator.com/item?id=23277594 https://www.youtube.com/watch?v=_SCfNhyIo_U https://www.youtube.com/watch?v=_SCfNhyIo_U
- h-cobordism 6y ago> hey "ECMA script is portable and accessible"! So lets "browserify" all the things It's not because JavaScript is portable or accessible (it's definitely not portable, and if you wanted accessibility you could do much better), it's simply because it's the most popular language.
- CleanCoder 6y agoFinally, we can do tabs in tabs!
- philplckthun 6y agoThere’s a small asterisk to this in that it says “No Native Dependencies” .” This is true for Expo which comes with a couple of libraries for Reagt Native with native bindings to iOS and Android (and also for Web) A lot of fluid animations and interactions in React Native are finally not that much of a hurdle anymore thanks to react-native-gesture-handler and reanimated, which are brilliant abstractions that fully offload work to the native thread and don’t interrupt interactions due to work on the main thread. React Native’s own primitives, like Animated, can only go so far until they require intervention or activation from the main thread. These libraries by Software Mansion have basically become a “must have” for creating compelling apps in React Native.
- matchbok 6y agoIs RN still used widely? Most people/companies I know have ditched it. It's never a time saver and usually just a pain once you wanna do something complicated.
- ericwood 6y agoIt seems to be more and more a niche tool. I don't think there's really anything better for situations where you have a small startup that needs an app, has JS experience, but can't justify a full-time mobile dev for each platform. This is the situation I'm in now, at least, and despite a few warts I couldn't imagine anything better for getting some fairly high quality apps out the door.
- la_fayette 6y agoWhy don't you use ionic or a pwa? It is known that RN has an extreme impact on battery consumption, the web browser is much more efficient in terms of energy use...
- ericwood 6y agoNot familiar with Ionic, honestly, and React Native has been around a few years and supported all the use-cases we'd want, and I've been doing React for a number of years, so a familiar environment was a huge win. Energy consumption is definitely a concern, but our app isn't exactly something people are going to be on all the time...it's more of a "check it a few times a day and move on" sort of deal. It's a fairly complex app with quite a few screens and with daily usage I haven't noticed any hit on battery life. A PWA could be a good fit, and while I think there's many cases where it makes a lot of sense, there's a handful of native features we wanted to utilize (most importantly, push notifications!) that aren't possible yet in the PWA world. There's always tradeoffs with any of these abstractions and React Native fit the bill with what we were comfortable trading off. I'd love to see the whole thing get the full native experience on iOS and Android once we're profitable and can hire full-time devs on those projects, but we're not there yet and so far the decision to go with RN has paid huge dividends in terms of shipping this. You'd be hard-pressed to tell it wasn't a native app, seriously!
- LeoNatan25 6y agoCome September, when new iPhone comes with 90 or 120hz display comes out, web devs will be back to square one with these nonsense “60fps animations” “challenges”, which are the simplest thing to do in native development.
- yagodragon 6y agomeanwhile, I've made a small app with Flutter and loved it. Everything just works. Install it in 10 minutes and you're good to go. In flutter everything is a widget and creating your own widgets by composing other widgets makes so much sense. Seriously, you have to try it to appreciate it. Dart is also nice and easy for those familiar with Java and JavaScript.
- merrvk 6y agoSorry but what has this got to do with this package?
- mihaela 6y agoLet's just learn one language and do everything with it, NOT.