fix: inverted list padding

[lpatrun]

📜 Description

I noticed the padding is incorrectly added if the Flatlist/Flashlist is inverted. Also, I have noticed that because of the bottom tab navigation, the offset when the keyboard is opened is not correctly calculated and the bottom tab height should be deducted.

💡 Motivation and Context

This problem fixes padding on inverted flatlist/flashlist if the keyboard is opened.

📢 Changelog

JS

• added inverted handling
• added property to be able to adjust the offset when the keyboard is opened

🤔 How Has This Been Tested?

It was tested in the app.

[kirillzyusko]

@lpatrun may I also ask you to give a sample of a layout so that I can test it in example app?

[lpatrun]

@kirillzyusko I will try your suggestion and get back to you. Thank you for your promptness

[kirillzyusko]

I think this property can be derived from style property?

style?.transform?.some(({scaleY}) => scaleY === -1);

[lpatrun]

Maybe I am missing how to call style, but when I call it as is in the component, I get

"Cannot find name 'style'."

and in rest.style I have only
"style": {"backgroundColor": "#FFFFFF", "flex": 1}} so ni scaleY.

But this inverted prop should be ok because it is a Flatlist/Flashlist prop. Right?

[kirillzyusko]

@lpatrun can you show me how do you use FlatList and KeyboardAwareScrollView?

I assumed it would be something like that:

<FlatList
  data={[]}
  renderItem={() => <></>}
  inverted
  renderScrollComponent={(props) => <KeyboardAwareScrollView {...props} />}
/>

And here (if I understand correctly) props.style should contain transform property (it should be injected by FlatList). Or no? 🙈

[lpatrun]

This is the code from the app

 <FlatList
   contentContainerStyle={styles.dataStyles}
   data={[...messages].reverse()}
   inverted
   renderItem={({ item }) => renderChatElement(item)}
   ItemSeparatorComponent={() => <SpacingComponent val={4} />}
   renderScrollComponent={props => <KeyboardAwareScrollView {...props} />}
   ListHeaderComponent={() => (isLoading ? <Loading /> : <></>)}
/>

[kirillzyusko]

Thanks @lpatrun

I'll check it today! ❤️

[kirillzyusko]

Hi @lpatrun

I added this code to KeyboardAwareScrollView (it has TS errors):

    const inverted = Array.isArray(rest.style)
      ? rest.style?.[0]?.transform[0]?.scaleY === -1
      : false;

    console.log("rest", rest.style, inverted);

And this code I used for testing:

    <FlatList
      // contentContainerStyle={{flex: 1}}
      // style={{flexGrow: 1}}
      data={[1]}
      inverted
      renderItem={({ item }) => <></>}
      renderScrollComponent={props => <KeyboardAwareScrollView {...props} />}
  />

And it seems to work fine:

Can you check on your side again?

[kirillzyusko]

@lpatrun I also merged some PRs into main and I think they can produce a conflict with your PR. May I ask you to merge/rebase your branch onto latest main?

[kirillzyusko]

@lpatrun what is the status of this PR? Are you going to finish the changes that I requested or not? 👀

[lpatrun]

@kirillzyusko my apologies, I will finish it

[lpatrun]

@kirillzyusko I made changes and I have tested with and without the inverted prop.

[kirillzyusko]

Why in case of inverted we do need to remove extraKeyboardSpace?

[kirillzyusko]

I approved to see if CI passes or not 👀

[kirillzyusko]

@lpatrun TS is failing 😔

[lpatrun]

@kirillzyusko how about now?

[kirillzyusko]

Still a question about negative extraKeyboardSpace and 0 otherwise 🤔

Why do we need to remove extraKeyboardSpace in case of inverted value?

[kirillzyusko]

Ideally I would create a function isInverted (should be a pure function), I think you can put it in utils

And I would add useMemo here to avoid expensive checks 🤔

So the code should be:

const inverted = useMemo(() => isInverted(rest.style), [rest.style]);

What do you think?

[kirillzyusko]

@lpatrun just a friendly ping 👋

[github-actions]

📊 Package size report

Current size	Target Size	Difference
165756 bytes	164428 bytes	1328 bytes 📈