Skip to content

Commit

Permalink
docs: mention keyboard avoiding view and how to handle it with edege …
Browse files Browse the repository at this point in the history
…to edege
  • Loading branch information
jpudysz committed Jul 16, 2024
1 parent 6864d2a commit 4fdccfa
Showing 1 changed file with 19 additions and 0 deletions.
19 changes: 19 additions & 0 deletions docs/src/content/docs/reference/faq.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,20 @@ If your app still doesn't automatically switch themes, ensure that:
Please check libraries used in your app that might interfere with the edge-to-edge layout.
Before submitting an issue, verify insets reported by Unistyles **with and without** other libraries.

The most common issue is that some libraries disable `edgeToEdge` mode without notifying you. To confirm that your insets/layout are correct, simply move the app to the background and back to the foreground.
Unistyles enables `edgeToEdge` every time the app comes to the foreground.

You can also look for following line in 3rd party libraries:

```kotlin
WindowCompat.setDecorFitsSystemWindows
```

Unistyles requires that second argument is **always** set to `false`!

Another common issue is that third-party libraries override top inset to make status bar `translucent`, and Android reports them as system insets.
There is no way to distinguish between system insets and 3rd party insets, so you need to avoid some common mistakes listed below:

<Steps>

1. `react-native-keyboard-controller`
Expand Down Expand Up @@ -79,6 +93,11 @@ Before submitting an issue, verify insets reported by Unistyles **with and witho
You must set `isStatusBarTranslucent` to `true` in your `useAnimatedKeyboard` [hook](https://docs.swmansion.com/react-native-reanimated/docs/device/useAnimatedKeyboard#arguments)
as keeping default value will interfere with Unistyles.

5. `KeyboardAvoidingView` from `react-native`:

If you use `android:windowSoftInputMode="adjustResize"` (default for expo projects) and try to avoid view on Android, make sure you set `behavior="padding"`,
otherwise your input will stay hidden behind the keyboard.

</Steps>

### I'm getting some TypeScript error for my stylesheet
Expand Down

0 comments on commit 4fdccfa

Please sign in to comment.