inverse didn't work

[Nikneoberg]

I've tried using inverse infinite scrolling, but it doesn't work. I checked an example from the documentation https://codesandbox.io/s/boring-haze-4c49t?file=/src/index.js:922-935

[zeroonedev01]

try with the latest version bro

[ghost]

bumping the version in the sandbox does not work

[ghost]

Although the loading message is only being loaded at the bottom, so you do have to include style={{ display: 'flex', flexDirection: 'column-reverse' }} //To put endMessage and loader to the top.

[ghost]

I finally got it to work. THe parent scrollableTarget that it is listening to needs to be included and have the same inverse styles. Took a lot of refreshes to get to work tho

[Nikneoberg]

@ryan-Church, thank you.

[baj84]

@ryan-Church can you explain your solution or give an example? I'm struggling to get it working

[ghost]

 <ChatWrapper id={CHAT_AREA} >
          <InfiniteScroll
            dataLength={chats.length}
            next={() => {  getMoreMessages()   }}
            hasMore={true}
            inverse={true}
            scrollableTarget={CHAT_AREA}
            style={{ display: "flex", flexDirection: "column-reverse" }}
          >
              {chats.map((chat) => {
                  return (<FormatChat/> );
                })}
          </InfiniteScroll>
      </ChatWrapper >
   

const ChatWrapper = styled.div`
  display: flex;
  flex-direction: column-reverse;
  overflow: auto;
`;
   

[stevesizer]

I still cant get this to work.

https://codesandbox.io/s/silly-glitter-iszzh?file=/src/index.js

anyone see whats wrong with the above?

[edutilos6666]

Change version from 4.1.0 to 5.1.0 or later.

[choijiho0021]

@same issue

[duke7able]

working example : inverse infinite scroll here https://codesandbox.io/s/youthful-kapitsa-nlv1j

[nalendro16]

@duke7able hi this work fine, but any suggest for pullDownToRefresh props if i inverse it?