Add Simple component for keyboard avoiding

[beqramo]

Is your feature request related to a problem? Please describe.
Hi,
In most of the cases in app we just want to move button on top if it is open or something like that.
So it is missing base component that will do this thing. it isn't handy to build animation again and again for simply placing button on top.

Because of that, I would suggest adding base Component that will do simple avoiding like the below:

import React from 'react';
import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller';
import Animated,  { interpolate, useAnimatedStyle, Extrapolation }  from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

interface IKeyboardAwareComponent {
  children: React.ReactNode;
  withBottomInset: boolean;
}


function KeyboardAwareComponent({ children, withBottomInset, ...rest }: IKeyboardAwareComponent) {
  const { height } = useReanimatedKeyboardAnimation();
  const { bottom } = useSafeAreaInsets();

  const styles = useAnimatedStyle(() => {
    const paddingBottom = withBottomInset ? interpolate(
      height.value,
      [0, bottom],
      [bottom, 0],
      Extrapolation.IDENTITY,
    ) : 0;
    
    return {
      transform: [{ translateY: height.value }],
      paddingBottom,
    };
  }, [bottom]);

  return (
    <Animated.View style={styles} {...rest}>
      {children}
    </Animated.View>
  );
}

export default KeyboardAwareComponent;

This solution will work only if it is a fixed button, without any scroll.
Depending on where you will put the relative position in the parent component it most likely will work in most cases.
Sorry I didn't answer other paragraphs and I removed it.

Thank you.
Great library btw.

[kirillzyusko]

@beqramo maybe it makes sense to replicate default components, such as KeyboardAvoidingView/KeyboardAwareScrollView?

[beqramo]

@kirillzyusko I updated the codes. there were some stupid mistakes :).
Replicate in what term? For the example above component will do the same thing as KeyboardAvoidingView exactly. but as KeyboardAvoidingView doesn't work always, this will work

[beqramo]

Oh you mean to add as an improvement, moving the input field with the keyboard if it is going to be behind?

[kirillzyusko]

@beqramo With the support of this library you can achieve better animations of KeyboardAvoidingView or any other component. You can checkout example app and find how KeyboardAwareScrollView was implemented and compare it with react-native-keyboard-aware-scroll-view package, for example.

I thought about adding basic components into the package, but I need to allocate time for that 😅

[beqramo]

Yes, this lib is amazing. I am indicating some missing components that instead of in the example file can be inside the package itself.
I dropped one of the simplest component that can be exported from the lib.
Nothig special is written above just instead of everyone to create custom component of base the functionality everyone can use exported component from this lib

[Noitham]

I agree with @beqramo, would be awesome to have some components replacing the KeyboardAvoidingView/KeyboardAwareScrollView using this library. 🙌

[kirillzyusko]

@Noitham for sure I'll add them, but a little bit later. Right now want to close some old GH issues, enhance API a little bit and after that I'll develop these KeyboardAvoidingView/KeyboardAwareScrollView views - just need some time.

By the way - contributions are always welcome! If you have a desire to add them to the library - you can open PR and after a review I'll merge it 🙂

[kirillzyusko]

@beqramo you can use KeyboardAvoidingView with behavior="position" to achieve the same effect described in your issue. This component will be available in 1.7.0