What is best practice of handling dynamic safe areas WITH COLORS with this library?

[zollipaul]

I have this chat app with a flatlist and a TextInput-Component at bottom.

I want this:

1. The TextInput-Component should have a dynamic height: If Keyboard shown, show no bottom safe area. If Keyboard is not shown, there should be a bottom safe are. AND this height of the safe Area needs to be animated, when opening the keyboard. I saw KeyboardStickyView have this feature, but couldn't get it done.
2. The background color of the TextInput-Component needs to be different than the overall chat background (like in WhatsApp).

Any ideas how to achieve that with this library? Combination of KeyboardAvoidingView and KeyboardStickyView? Only KeyboardAvoidingView like in this example: https://github.com/kirillzyusko/react-native-keyboard-controller/blob/main/example/src/screens/Examples/ReanimatedChatFlatList/index.tsx ? Custom build solution with useReanimatedKeyboardAnimation or useKeyboardHandler?

[kirillzyusko]

Only KeyboardAvoidingView like in this example: https://github.com/kirillzyusko/react-native-keyboard-controller/blob/main/example/src/screens/Examples/ReanimatedChatFlatList/index.tsx ?

I'd suggest to go with this solution first and see if you can discover any drawbacks. Can you attach a video of what you are trying to achieve (i. e. whats app) and what you currently have?

Custom build solution with useReanimatedKeyboardAnimation or useKeyboardHandler?

This is good if you build really complex interactions, involving interactive keyboard dismissal etc. For simple scenarios KeyboardAvoidingView should be enough

Combination of KeyboardAvoidingView and KeyboardStickyView?

I think for your example the correct decision will be wrapping list + input inside KeyboardAvoidingView with behavior="translate-with-padding"

If you want to change colors depending on whether keyboard is shown or not, the you can use progress value returned from useKeyboardHandler events and interpolate colors based on this.

Let me know if you have any further questions ❤️

[zollipaul]

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-02-26.at.16.56.59.mp4

I am doing that for now, but it seems complicated: I kinda reinvent the wheel here. I tried using KeyboardAvoidingView, but no luck: animation of this bottom safe area seems not possible.

const SMALL_BUFFER = 10;

export const KeyboardAdaptiveChat = ({
  children,
  SendComponent
}: KeyboardAdaptiveChatProps) => {
  const { height, progress } = useReanimatedKeyboardAnimation();
  const { bottom } = useSafeAreaInsets();

  // animate the bottom margin of view when keyboard is shown including some Buffer
  const animatedPaddingBottom = useAnimatedStyle(
    () => ({
      paddingBottom: interpolate(progress.value, [0, 1], [bottom, SMALL_BUFFER])
    }),
    []
  );

  const fakeView = useAnimatedStyle(
    () => ({
      height: Math.abs(height.value)
    }),
    []
  );

  return (
    <View style={$styles.flex1}>
      {/* For allowing keyboardDismissMode 'interactive' on android */}
      <KeyboardGestureArea interpolator="ios" style={$styles.flex1}>
        {children}
      </KeyboardGestureArea>

      {/* Here animation of bottom margin */}
      <Reanimated.View style={[animatedPaddingBottom, $sendComponent]}>
        {SendComponent}
      </Reanimated.View>
      {/* This is needed, that keyboard doesn't hide the rest. */}
      <Reanimated.View style={[fakeView, $sendComponent]} />
    </View>
  );
};

const $sendComponent: ViewStyle = {
  backgroundColor: colors.wizardBottomBar
};

[kirillzyusko]

Well, if you are using interactive dismissal and all that advanced stuff then I would recommend you to use primitives to achieve best possible performance

However I also feel like a lot of people have to re-invent a wheel when building chat-like interfaces. In example app you can find how to use KeyboardAvoidingView for chat screen, how to implement Interactive keyboard dismissal in app etc. Maybe I need to create a re-usable hook/component that can simplify that integration, but at the moment I don't have all details/corner cases that needs to be handled, so if you want to co-operate - I'm happy to do it 😊