insets.top changed during render on Android with <Statusbar translucent={true} />

[wong2]

const insets = useSafeArea()

return (
  <Layout>
    <Statusbar translucent={true} />
    <Content />
  </Layout>
)

insets.top will change during render(from 0 to the right value), which makes my element position jump

[satya164]

You are making the statusbar translucent in render, so it's going to happen after the component mounts which will then trigger event with new size. It seems expected. You need to set translucent statusbar in your native theme to avoid this.

[wong2]

What do you mean by native theme?

[lumberman]

What do you mean by native theme?

[davidgovea]

@wong2 @lumberman 'native theme' means setting the values in XML using android theme values (edit: or programattically in java app code, I suppose)

see: https://developer.android.com/reference/android/R.attr#windowTranslucentStatus

In my case, I specified this behavior in android/app/src/main/res/values/styles.xml:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
        <item name="android:windowTranslucentStatus">true</item> <!-- Added this -->

With this style, content extends under the statusbar, and the safe area insets properly include the status bar.