search

andrew-levy / jetpack-compose-react-native

105 stars 2 forks source link

Adding support for LazyColumn (FlatList) #9

Open fabOnReact opened 1 week ago

fabOnReact commented 1 week ago

Related Issue https://github.com/fabOnReact/react-native-wear-connectivity/issues/12

What are the limitations of using LazyColumn component instead of traditional ScollView? What are the limitations of using Jetpack Compose Components with React Native?

Searching ShikaSD in https://github.com/react-native-community/discussions-and-proposals/issues/446 brings up some interesting info.

I would like to add support for ScalingLaxyColumn in the library as it is important for WearOS development with react-native-wear-connectivity.

cc @gaurav21r also interested in helping with this

I'm asking you, as you probably investigated limitations and maybe found workarounds around them. Thanks a lot

andrew-levy commented 1 week ago

@fabOnReact Hello! I am no expert, but Column doesn't scroll by default. I think you need LazyColumn for that to scroll. I tried implementing it but it was giving me errors so I stopped for now. If you can get it working that would be great!

As for limitations of compose in RN, it's just very untested. There are some kinks we need to work out and it doesn't always work how you'd expect. I'm hoping to solve most of the issues in this library though.

fabOnReact commented 5 days ago

https://github.com/fabOnReact/react-native-wear-connectivity/issues/12#issuecomment-2482538520

my problem with ScalingLazyColumn was rendering a ViewGroup, like done with FlatList renderItem and data.

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:glance/glance-appwidget/src/main/java/androidx/glance/appwidget/lazy/LazyList.kt;l=44?q=LazyColumn

I believe there is a difference in implementation between LazyColumn and FlatList.

LazyColumn maybe is a similar implementation to RecyclerView. The problem is that with our React Native architecture handles in JavaScript the virtualization (mounting and unmounting of items in a list), which may not be compatible with this APIs.

The RecyclerView adds/removes rows while scrolling the content. As done with the FlatList component, the renderItem prop defines the Layout for each row and the data prop the information to populate in each row. React Native FlatList implementation calculates these rows in JavaScript with the VirtualizedList. The rows are added/removed in VirtualizedList JS implementation and sent to Android API as children of the ScrollView.js component. ReactScrollView is a ViewGroup and adds the views with addViews.

4h2wjwo0dlzkenw9ewnm

There is an implement of RecyclerView (react-native-recyclerview-list), but the library has some limitations.

There are some issues with setState which does not update the UI. The updates need to be triggered manually. https://github.com/godness84/react-native-recyclerview-list/blob/864021c01ef42b1a451c526c8f65a30ff33c2d2a/android/src/main/java/com/github/godness84/RNRecyclerViewList/RecyclerViewBackedScrollView.java#L191-L200

I don't believe there is an easy way to do this. Many big companies like Shopify, Flipkart did not try to use RecyclerView, instead they followed the FlatList implementation which leverages ScrollView native API.

You may be able to render the Jetpack Compose items (like Text) in a traditional ScrollView.