New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Android][ScrollView] Support sticky section headers on Android #2700

Closed
ide opened this Issue Sep 15, 2015 · 43 comments

Comments

Projects
None yet
@ide
Collaborator

ide commented Sep 15, 2015

These are just good for UX. Since the iOS RCTScrollView implements sticky headers (instead of using something provided by the system) I imagine it's doable on Android as well.

@ide ide added the Android label Sep 15, 2015

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Sep 15, 2015

Collaborator

cc @sahrens heard you were working on ListView. Is this something on FB's roadmap?

Collaborator

ide commented Sep 15, 2015

cc @sahrens heard you were working on ListView. Is this something on FB's roadmap?

@astreet

This comment has been minimized.

Show comment
Hide comment
@astreet

astreet Sep 15, 2015

Contributor

Internally, I don't think we'll implement this until we have a client that wants it. I think the cases for sticky headers on android are probably more narrow: e.g. the design of many lists that might have sticky headers on iOS wouldn't on Android in keeping consistent with the platform (e.g. compare the contacts app on the two platforms), but I can see apps on Android (the schedule view in the F8 app comes to mind) where this would be nice.

Contributor

astreet commented Sep 15, 2015

Internally, I don't think we'll implement this until we have a client that wants it. I think the cases for sticky headers on android are probably more narrow: e.g. the design of many lists that might have sticky headers on iOS wouldn't on Android in keeping consistent with the platform (e.g. compare the contacts app on the two platforms), but I can see apps on Android (the schedule view in the F8 app comes to mind) where this would be nice.

@ojkelly

This comment has been minimized.

Show comment
Hide comment
@ojkelly

ojkelly Sep 16, 2015

Contributor

I'd definitely also like to see this. Would it make sense to incorporate something like https://github.com/emilsjolander/StickyScrollViewItems

Or event to implement this as a 3rd party component, if it can't go in core?

Contributor

ojkelly commented Sep 16, 2015

I'd definitely also like to see this. Would it make sense to incorporate something like https://github.com/emilsjolander/StickyScrollViewItems

Or event to implement this as a 3rd party component, if it can't go in core?

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Sep 16, 2015

Collaborator

@ojkelly Nice find. That's helpful to have an implementation as reference.

I'm usually in favor of standalone npm modules though in this case iOS's RCTScrollView already implements sticky headers and so far we (people I've talked to or have worked with) have found that narrowing the gap between platforms improves the developer experience (<3 Navigator). I think a reasonable first step would be for the component to start as an npm module that offers the same API as the existing ScrollView plus sticky headers, and then backport the implementation into core if it's good.

Collaborator

ide commented Sep 16, 2015

@ojkelly Nice find. That's helpful to have an implementation as reference.

I'm usually in favor of standalone npm modules though in this case iOS's RCTScrollView already implements sticky headers and so far we (people I've talked to or have worked with) have found that narrowing the gap between platforms improves the developer experience (<3 Navigator). I think a reasonable first step would be for the component to start as an npm module that offers the same API as the existing ScrollView plus sticky headers, and then backport the implementation into core if it's good.

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Sep 16, 2015

Collaborator

@ide - I believe @kmagiera is working on ListView too

Collaborator

brentvatne commented Sep 16, 2015

@ide - I believe @kmagiera is working on ListView too

@richarddewit

This comment has been minimized.

Show comment
Hide comment

+1

@NormannEiland

This comment has been minimized.

Show comment
Hide comment

+1

@chartrandf

This comment has been minimized.

Show comment
Hide comment

+1

@sahrens

This comment has been minimized.

Show comment
Hide comment
@sahrens

sahrens Nov 18, 2015

Contributor

What @ide and @andrews said. Not going to build this ourselves since we
have no need for it internally.

On Tuesday, November 17, 2015, Francis Chartrand notifications@github.com
wrote:

+1


Reply to this email directly or view it on GitHub
#2700 (comment)
.

Contributor

sahrens commented Nov 18, 2015

What @ide and @andrews said. Not going to build this ourselves since we
have no need for it internally.

On Tuesday, November 17, 2015, Francis Chartrand notifications@github.com
wrote:

+1


Reply to this email directly or view it on GitHub
#2700 (comment)
.

@ide ide added the Help Wanted :octocat: label Nov 18, 2015

@mhagmajer

This comment has been minimized.

Show comment
Hide comment

+1

@getreup

This comment has been minimized.

Show comment
Hide comment

getreup commented Dec 30, 2015

+1

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Jan 1, 2016

Collaborator

Created a ProductPains issue for this: https://productpains.com/post/react-native/scrollview-sticky-section-headers-on-android/

It shouldn't be too hard to build, if you have some Android experience, just check out the iOS implementation in RCTScrollView and try to port it :)

Collaborator

brentvatne commented Jan 1, 2016

Created a ProductPains issue for this: https://productpains.com/post/react-native/scrollview-sticky-section-headers-on-android/

It shouldn't be too hard to build, if you have some Android experience, just check out the iOS implementation in RCTScrollView and try to port it :)

@brentvatne brentvatne closed this Jan 1, 2016

@Taakn

This comment has been minimized.

Show comment
Hide comment

Taakn commented Feb 18, 2016

+1

@sam26880

This comment has been minimized.

Show comment
Hide comment

+1

@bsinc

This comment has been minimized.

Show comment
Hide comment

bsinc commented Apr 8, 2016

+1

@foxcode7

This comment has been minimized.

Show comment
Hide comment
@foxcode7

foxcode7 Apr 22, 2016

looking for it

looking for it

@srikanthkh

This comment has been minimized.

Show comment
Hide comment
@srikanthkh

srikanthkh May 11, 2016

Contributor

+1

Contributor

srikanthkh commented May 11, 2016

+1

@Ehesp

This comment has been minimized.

Show comment
Hide comment
@Ehesp

Ehesp Jun 10, 2016

Contributor

Still no implementation :( +1

Contributor

Ehesp commented Jun 10, 2016

Still no implementation :( +1

@zhongjie-chen

This comment has been minimized.

Show comment
Hide comment
@zhongjie-chen

zhongjie-chen Jun 12, 2016

+10086 (funny)

+10086 (funny)

@HelloHxz

This comment has been minimized.

Show comment
Hide comment

+1

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Jun 30, 2016

Collaborator

This issue has been closed -- build it if it's truly important to you or upvote it on Product Pains otherwise.

Collaborator

ide commented Jun 30, 2016

This issue has been closed -- build it if it's truly important to you or upvote it on Product Pains otherwise.

@amos80m

This comment has been minimized.

Show comment
Hide comment

amos80m commented Jul 27, 2016

+1

@roysG

This comment has been minimized.

Show comment
Hide comment

roysG commented Aug 29, 2016

+1

@alexandergorskih

This comment has been minimized.

Show comment
Hide comment
@danleveille

This comment has been minimized.

Show comment
Hide comment

+1

@antoinerousseau

This comment has been minimized.

Show comment
Hide comment
@antoinerousseau

antoinerousseau Oct 4, 2016

Contributor

Your +1's have no added value to this thread... besides, it has been closed and moved to Product Pains... https://productpains.com/post/react-native/scrollview-sticky-section-headers-on-android/

It has also already been implemented in #9456 (then reverted but it should come back: see thread)

Please read before posting dumb +1's

Contributor

antoinerousseau commented Oct 4, 2016

Your +1's have no added value to this thread... besides, it has been closed and moved to Product Pains... https://productpains.com/post/react-native/scrollview-sticky-section-headers-on-android/

It has also already been implemented in #9456 (then reverted but it should come back: see thread)

Please read before posting dumb +1's

@kenma9123

This comment has been minimized.

Show comment
Hide comment

+1 :D

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Oct 4, 2016

Collaborator

The current PR is #9957. It requires a bunch of work to get right -- if you need this feature urgently then your best bets are either to fork RN and pull in that PR yourself (I do this) or compensate someone for their expertise & time to work on it (I also do this).

Collaborator

ide commented Oct 4, 2016

The current PR is #9957. It requires a bunch of work to get right -- if you need this feature urgently then your best bets are either to fork RN and pull in that PR yourself (I do this) or compensate someone for their expertise & time to work on it (I also do this).

@jasan-s

This comment has been minimized.

Show comment
Hide comment
@jasan-s

jasan-s Mar 10, 2017

Is sticky Header working for android yet?

jasan-s commented Mar 10, 2017

Is sticky Header working for android yet?

@nihgwu

This comment has been minimized.

Show comment
Hide comment
@nihgwu

nihgwu Mar 10, 2017

Contributor

sticky header is in master now, will be shipped on 0.44

Contributor

nihgwu commented Mar 10, 2017

sticky header is in master now, will be shipped on 0.44

@jasan-s

This comment has been minimized.

Show comment
Hide comment
@jasan-s

jasan-s Mar 10, 2017

@nihgwu any timeline on that release date?

jasan-s commented Mar 10, 2017

@nihgwu any timeline on that release date?

@kenma9123

This comment has been minimized.

Show comment
Hide comment
@kenma9123

kenma9123 Mar 10, 2017

@jasan-s they just released 0.42 and 0.43 next month. So it would go around April I guess.

@jasan-s they just released 0.42 and 0.43 next month. So it would go around April I guess.

@avigil06

This comment has been minimized.

Show comment
Hide comment
@avigil06

avigil06 May 3, 2017

My team recently discovered, after implementing sticky headers on iOS, that it did not work in Android. After finding this thread and lucking into already having the solution released in 0.44. We just upgraded our React project from 0.42 to 0.44. After resolving some dependency issues, the upgrade process hates our shrinkwrap file, we tested again. iOS is working fine, however Android is still not sticky. I am attaching our ListView usage in case anyone spots something we are just overlooking.

<ListView stickySectionHeadersEnabled={true} dataSource={dataSource} renderRow={row => { return row}} renderSectionHeader={header => { return header}} />

avigil06 commented May 3, 2017

My team recently discovered, after implementing sticky headers on iOS, that it did not work in Android. After finding this thread and lucking into already having the solution released in 0.44. We just upgraded our React project from 0.42 to 0.44. After resolving some dependency issues, the upgrade process hates our shrinkwrap file, we tested again. iOS is working fine, however Android is still not sticky. I am attaching our ListView usage in case anyone spots something we are just overlooking.

<ListView stickySectionHeadersEnabled={true} dataSource={dataSource} renderRow={row => { return row}} renderSectionHeader={header => { return header}} />

@borisyankov

This comment has been minimized.

Show comment
Hide comment
@borisyankov

borisyankov May 5, 2017

The only reference for sticky headers I see in the release notes for 0.44 is for FlatList.

The only reference for sticky headers I see in the release notes for 0.44 is for FlatList.

@avigil06

This comment has been minimized.

Show comment
Hide comment
@avigil06

avigil06 May 5, 2017

@borisyankov We spent a long time debugging it but it looks like our shrinkwrap file prevented a proper react-native upgrade.

After cloning our repo, installing our node modules, disabling the shrinkwrap, and upgrading react-native, it worked on Android with the Listview component I previously posted.

We have the fun task of trying to figure out why animations inside the modal component disrupt the modal slide animation on Android now. That's another story.

avigil06 commented May 5, 2017

@borisyankov We spent a long time debugging it but it looks like our shrinkwrap file prevented a proper react-native upgrade.

After cloning our repo, installing our node modules, disabling the shrinkwrap, and upgrading react-native, it worked on Android with the Listview component I previously posted.

We have the fun task of trying to figure out why animations inside the modal component disrupt the modal slide animation on Android now. That's another story.

@Jeyloh

This comment has been minimized.

Show comment
Hide comment
@Jeyloh

Jeyloh Jul 25, 2017

Is this currently working on Android with React 0.44? I'm considering the upgrade but would prefer to be completely sure before doing so. Cheers

Jeyloh commented Jul 25, 2017

Is this currently working on Android with React 0.44? I'm considering the upgrade but would prefer to be completely sure before doing so. Cheers

@muhammedbasilsk

This comment has been minimized.

Show comment
Hide comment
@muhammedbasilsk

muhammedbasilsk Aug 9, 2017

I have used scrollView with stickyHeaderIndices, it works excellent in iOS but have very bad flickering issue in Android.

<ScrollView
        stickyHeaderIndices={[1]}>
        <View>
          <Text>Text</Text>
          <Text>Text</Text>
          <Text>Text</Text>
          <Text>Text</Text>
          <Text>Text</Text>
          <Text>Text</Text>
        </View>
        <View>
          <Text>Sticky Header</Text>
        </View>
        <Text>Text</Text>
          <Text>Text</Text>
          <Text>Text</Text>
          <Text>Text</Text>
          <Text>Text</Text>
          <Text>Text</Text>
      </ScrollView>

This is my component structure.
Attaching the gif for reference.

android_scrollview_flickering

I have used scrollView with stickyHeaderIndices, it works excellent in iOS but have very bad flickering issue in Android.

<ScrollView
        stickyHeaderIndices={[1]}>
        <View>
          <Text>Text</Text>
          <Text>Text</Text>
          <Text>Text</Text>
          <Text>Text</Text>
          <Text>Text</Text>
          <Text>Text</Text>
        </View>
        <View>
          <Text>Sticky Header</Text>
        </View>
        <Text>Text</Text>
          <Text>Text</Text>
          <Text>Text</Text>
          <Text>Text</Text>
          <Text>Text</Text>
          <Text>Text</Text>
      </ScrollView>

This is my component structure.
Attaching the gif for reference.

android_scrollview_flickering

@nihgwu

This comment has been minimized.

Show comment
Hide comment
@nihgwu

nihgwu Aug 9, 2017

Contributor
Contributor

nihgwu commented Aug 9, 2017

@muhammedbasilsk

This comment has been minimized.

Show comment
Hide comment
@muhammedbasilsk

muhammedbasilsk Aug 9, 2017

@nihgwu I am using the latest

react-native -v
react-native-cli: 2.0.1
react-native: 0.47.1

But I tried with pre-release version and it has the same issue.

muhammedbasilsk commented Aug 9, 2017

@nihgwu I am using the latest

react-native -v
react-native-cli: 2.0.1
react-native: 0.47.1

But I tried with pre-release version and it has the same issue.

@nihgwu

This comment has been minimized.

Show comment
Hide comment
@nihgwu

nihgwu Aug 9, 2017

Contributor

@muhammedbasilsk I noticed the issue you described with RN0.47 but not with RN0.46, but I don't have time to investigate why

Contributor

nihgwu commented Aug 9, 2017

@muhammedbasilsk I noticed the issue you described with RN0.47 but not with RN0.46, but I don't have time to investigate why

@muhammedbasilsk

This comment has been minimized.

Show comment
Hide comment
@muhammedbasilsk

muhammedbasilsk Aug 9, 2017

@nihgwu , I verified again with the RN0.46.4 and 0.46.0, it works fine.
Thanks for pointing to the correct direction. I think too much sample codes messed up with the versions I was checking.
I have updated the above comment, as it shouldn't misdirect anyone looking for same issue.

Should I raise a separate issue as it happens with the current version but not in the older versions?

muhammedbasilsk commented Aug 9, 2017

@nihgwu , I verified again with the RN0.46.4 and 0.46.0, it works fine.
Thanks for pointing to the correct direction. I think too much sample codes messed up with the versions I was checking.
I have updated the above comment, as it shouldn't misdirect anyone looking for same issue.

Should I raise a separate issue as it happens with the current version but not in the older versions?

@nihgwu

This comment has been minimized.

Show comment
Hide comment
@nihgwu

nihgwu Aug 9, 2017

Contributor

@janicduplessis it would be great if you have any chance to check what happened with stickySectionHeader support for Android on RN0.47, I noticed that issue described b @muhammedbasilsk 3 weeks ago, I planed to create an issue to report it, but I'm a bit busy nowadays, that's really a annoying regression

Contributor

nihgwu commented Aug 9, 2017

@janicduplessis it would be great if you have any chance to check what happened with stickySectionHeader support for Android on RN0.47, I noticed that issue described b @muhammedbasilsk 3 weeks ago, I planed to create an issue to report it, but I'm a bit busy nowadays, that's really a annoying regression

@nihgwu

This comment has been minimized.

Show comment
Hide comment
@nihgwu

nihgwu Aug 10, 2017

Contributor

@muhammedbasilsk I think you'd better create a new ticket to tracking this issue

Contributor

nihgwu commented Aug 10, 2017

@muhammedbasilsk I think you'd better create a new ticket to tracking this issue

@facebook facebook locked as resolved and limited conversation to collaborators Jul 21, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.