feat:add keyboardAwareScrollView in scrollBottomOffset

[box8741]

📜 Description

💡 Motivation and Context

If there is another view under "keyboardAwareScrollView", I think the keyboard should be able to change the height to be pushed

📢 Changelog

JS

• Added KeyboardAwareScrollView in scrollBottomOffset props

🤔 How Has This Been Tested?

Please refer to the video below

📸 Screenshots (if appropriate):

Before

https://github.com/kirillzyusko/react-native-keyboard-controller/assets/57166515/ce62642e-b251-407f-a3f2-bac94869f03a

After

https://github.com/kirillzyusko/react-native-keyboard-controller/assets/57166515/58134068-eaa7-47d4-af76-e5dcd80a4d11

📝 Checklist

• [x] CI successfully passed
• [x] I added new mocks and corresponding unit-tests if library API was changed

[kirillzyusko]

Hey @box8741

I think I kind of understand a problem, but would like to ask you one question - can you share a real layout of the app where it's needed? Just curious what do you have in bottom view under KeyboardAwareScrollView 🤔 Is there any buttons? Is it okay if that view is overlapped by the keyboard?

Can you share the test code that you used in your testing?

[box8741]

Sorry, we're in the early design stages of the app, so we don't have any examples to show you

The reason I presented this feature is that when I made the app in the past, if the bottom tab navigator exists, there was a problem with the margin at the bottom Even if it's not this problem, I think there are cases where I don't want a button or other layout to appear on the keyboard

This is the test code in the video

// example/src/screens/Examples/AwareScrollView
...
 <KeyboardAwareScrollView
     testID="aware_scroll_view_container"
     bottomOffset={50}
     enabled={enabled}
     disableScrollOnKeyboardHide={disableScrollOnKeyboardHide}
     style={styles.container}
     contentContainerStyle={styles.content}
     scrollBottomOffset={-100} // <-- add here
 >
     {new Array(10).fill(0).map((_, i) => (
       <TextInput
          key={i}
          placeholder={`TextInput#${i}`}
          keyboardType={i % 2 === 0 ? "numeric" : "default"}
       />
     ))}
</KeyboardAwareScrollView>
<View style={{ height: 100, backgroundColor: "#233123" }} />  // <-- add here
...

[kirillzyusko]

@box8741 yeah, a case with a bottom-tab a good catch 👍

Overall I think I like these changes, but scrollBottomOffset name sounds not very clear (at least for me) - I'll think about it (about better names) and will also play around the example you provided 👍

Thank you for your PR! ❤️

[box8741]

Thank you for your positive review :)

[argos-ci[bot]]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	👍 Changes approved	1 changed	May 31, 2024, 8:49 AM