setNavigationColor('transparent') will make `KeyboardAvoidingView` not work

[farmer00317558]

Hi, I found an issue that when I use KeyboardAvoidingView after call setNavigationColor('transparent'), KeyboardAvoidingView will not work.

After some debugging, I found it is caused by:

view.setFlags(
        WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
        WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
);

I am not very familiar with Android development. Is there a way to keep the effect of setNavigationColor('transparent'), but also make KeyboardAvoidingView works properly?

[kadiraydinli]

Hi, can you share screenshots with and without KeyboardAvoidingView?

[farmer00317558]

with and not setNavigationColor('transparent'):

without KeyboardAvoidingView:

[kadiraydinli]

I made changes for this issue, you can find it in the latest version.

[ale-mazz]

Hi @kadiraydinli, seems like this issue is still present in version 2.6.1 (only on Android) Any tips to make it work? I am using height as the behavior of the KeyboardAvoidingView RN version: 0.71.8

[ale-mazz]

Hey @kadiraydinli, any updates on this?

[kadiraydinli]

Hey @ale-mazz, can you explain this issue in more detail with screenshots and sample code?

[ale-mazz]

@kadiraydinli Sure! (Sorry for the delay)

If I use SystemNavigationBar.setNavigationColor('transparent', undefined, 'navigation'), the result obtained is this one

https://github.com/kadiraydinli/react-native-system-navigation-bar/assets/15525839/8cfb4283-fa77-42bd-8f56-f147aff3e5c8

If I use SystemNavigationBar.setNavigationColor('white', undefined, 'navigation'), the result is this one. Note, I am using the standard KeyboardAvoidingView provided by React Native

https://github.com/kadiraydinli/react-native-system-navigation-bar/assets/15525839/bbb6137b-6016-427c-b161-e386cc633c92

The correct behavior should be as in the second video, that is, the keyboard should push up the purple button. I want to specify that I am using this method only on Android, since on iOS I do not have to change the color of the navigation bar.

I cannot give you parts of the code I am using (company policy) but to sum up, I am using a SafeAreaView, inside it I am using a KeyboardAvoidingView, inside it a Scrollview and at the same level of the Scrollview a Pressable

I tried looking at your library but honestly could not solve the problem. I hope you can help me. Thank you!

[kadiraydinli]

Hey @ale-mazz, thank you for the explanation. I am working on it. I'll let you know when there's an improvement. 👍🏼

[kadiraydinli]

Hi @ale-mazz, despite my research and attempts, I couldn't find a healthy solution. I believe this issue is partially rooted in Android. Unfortunately, I cannot provide a fix for this problem at the moment. If you have a solution for this issue, please don't hesitate to open a PR. Thanks you.

[ale-mazz]

Thanks, @kadiraydinli, since I'm not that comfortable with Android native development, I found a solution using Expo's packages. Thanks anyway!

[pekq]

@ale-mazz what was your solution? Can you elaborate?

[ale-mazz]

Hi @pekq, it's been a long time but if I remember correctly I used this library from Expo, it has all the useful features to interact with the navigation bar. I no longer have access to that repo with the code but I think I set the transparent color to the navigation bar in case the device used was Android.

[pekq]

@ale-mazz thanks! Unfortunately I see the same issue when using the Expo's package. That package requires to set two variables to achieve true transparency:

NavigationBar.setPositionAsync('absolute') // <=== Breaks keyboard avoidance
NavigationBar.setBackgroundColorAsync('transparent')

I'll keep searching.