android:windowSoftInputMode="adjustResize" not working properly with Unistyles

[Ashabu]

Description

When you try to avoid the keyboard on android and get the same behavior as for ios with config

<KeyboardAvoidingView 
      style={{ flex: 1}}  
       behavior={Platform.select({
             ios: 'padding',
              android: undefined,
        })}>
</KeyboardAvoidingView> 

I also use
android:windowSoftInputMode="adjustResize" in AndroidManifest.xml

After installing unistyles i guess android:windowSoftInputMode="adjustResize this breaks because the keyboard is not avoiding the view and content anymore

I tried different configuration for behavior or android:windowSoftInputMode but none of them fix the issue. Could you please help me with that? Thanks in advance!

Steps to reproduce

1. Initiate React native app
2. Install Unistyles 2.8.3
3. Wrap the children in

Snack or a link to a repository (optional)

https://snack.expo.dev/NgtgmuKmO1oj1XRjeBgdL

Unistyles version

2.8.3

React Native version

0.74

Platforms

Android

Engine

Hermes

Architecture

Fabric (new)

[VolodymyrKashaniy]

Same here.

[jpudysz]

I will check it out today. Thanks for the report 🙏🏼

[jpudysz]

Have you tried to use padding behaviour for Android too? It works as expected. Default behaviour is different with Unistyles as I'm enabling edge-to-edge layout.

 <KeyboardAvoidingView
    style={styles.container}
    behavior="padding"
 >
   <TextInput
      placeholder="Type something"
      style={styles.textInput}
   />
</KeyboardAvoidingView>

[jpudysz]

You can run the demo in Unistyles examples:

https://github.com/jpudysz/react-native-unistyles/blob/main/examples/expo/src/examples/KeyboardScreen.tsx

Let me know if that works for you guys, if so I'll update the docs.

[Ashabu]

Thanks for a reply. behavior="padding" really did the job. Sorry it took me long to reply, i was testing in on multiple android devices as well as emulators to make sure that it worked. I remember trying it as well but most probably i tried it with android:windowSoftInputMode="adjustPan" and thats why it didn't work.

One more little tip that you could maybe also put in the docs is that with this configuration

 <KeyboardAvoidingView
    style={styles.container}
    behavior="padding"

 >
   {children}
</KeyboardAvoidingView>

keyboardVerticalOffset -- this prop is needed here work it good. As i was trying the behavior="padding" , i could see that the bottom element was pushed up but the keyboard was still covering it at some point. then adding the keyboardVerticalOffset completely solved the issue. Calculating the offset can be a little tricky but in the most cases this is the formula: native stack header height + runtime.insets.top. There is a really good article about it on medium https://medium.com/@felippepuhle/react-native-quick-tip-solving-keyboardavoidingview-problems-on-screens-using-native-headers-or-1c77b5ec417c . Long story short, i confirm from my side that its working ^_^

[jpudysz]

Thats a great news @Ashabu ! I always appreciate ppl that reports such issues. I'm happy that it works with padding.

I will add info to docs later today 🙏🏼

[jpudysz]

Added to: https://www.unistyl.es/reference/faq/#my-android-app-is-not-edgetoedge-or-insets-are-incorrect