Comments (1)
Hey @LuisTejedaDev, useAnimatedKeyboard
hook doesn't really care whether there is a SafeAreaView or not. It has just one task - to return the height that keyboard takes up. And it does it well. See, when I looked at your example, the view before clicking the TextInput looks like this:
![image](https://private-user-images.githubusercontent.com/77503811/342385728-aedd33d9-2c86-4b7f-9cdb-e65a04896d1c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyMzE4NzIsIm5iZiI6MTcyMTIzMTU3MiwicGF0aCI6Ii83NzUwMzgxMS8zNDIzODU3MjgtYWVkZDMzZDktMmM4Ni00YjdmLTljZGItZTY1YTA0ODk2ZDFjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE3VDE1NTI1MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE0NmM0MWQ2NjFiNGUzY2Y4NzEzYTQzYjMwYzc0ZDFiYjU3OTJjNjU0ZmI5M2Y5ZmZlNjI2NTNkNTA2M2QyZmEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.nzretHubGLyb8XErsuL-ekPLLOkTV-87zks8irBi7Y0)
You can clearly see, that the accessory bar isn't perfectly in the bottom of the screen but rather moved up by SafeAreaView. You can fix it in one of such ways:
- Have the accessory bar at the very bottom of the screen (e.g. by removing safeAreaView)
- Somehow find out what is the margin that SafeAreaView adds at the bottom and substract its height from the animatedStyle translateY.
- Have the bar use absolute position and be not dependent on SafeAreaView (so far example make it at the same view hierarchy level as the mentioned SafeAreaView). Then you will know exactly how far it is from the bottom.
There is not much more I can help you with, unfortunately. The hook does everything it is supposed to do.
from react-native-reanimated.
Related Issues (20)
- useAnimatedProps not updating on web HOT 3
- Animations in recycled components seem to be broken from v3.9.0 and up HOT 9
- An ability to have JS handler along with animated handler simultaneously HOT 16
- [3.13.0] IllegalArgumentException - Expected receiver of type com.swmansion.rnscreens.ScreenFragment HOT 3
- [SET] Element nor reappearing when navigating back to earlier screen
- ShareableObject unable to handle utf-8 key on Android HOT 1
- App is crashing when I use with react-navigation-bottom-tabs and native-stack HOT 3
- Build failure for Windows 10 HOT 11
- [BUILD ERROR] C++ build system [build] failed while executing HOT 24
- Animating a nested scrollview disables all gestures and touch events on IOS HOT 4
- Shared element transition doesnt work with border radius HOT 2
- Race condition in NativeReanimatedModule::performOperations() HOT 7
- Bad performance if setState while running animation HOT 5
- KeyboardAwareScrollView not figuring style or contentContainerStyle (IOS & Android)
- On web, with React's strict mode, animations don't work on first render HOT 1
- [Vite] [Web] No matching export in RNRenderer.web.js for import "RNRenderer" HOT 6
- No animations on Chromium 73 or older HOT 4
- Setting shared value used in `transform` prop of `useAnimatedStyle` doesn't trigger UI change if assigned on component re-render HOT 5
- Layout Transitions does not work with custom list (FlashList) HOT 4
- Children position does not animate when animating view's width using Layout Animations HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-reanimated.