React Native Bootsplash вызывает появление нижней панели на Android, но не на iOS.

Я использую React Native Bootsplash в своем проекте. Заставка работает отлично на iOS, но я столкнулся с проблемой на Android. В частности, при запуске приложения на Android на экране появляется нижняя панель, которая не отображается на iOS.

Вот соответствующий код в MainActivity.kt:

package com.packageName

import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
import com.facebook.react.defaults.DefaultReactActivityDelegate
import android.os.Bundle
import com.zoontek.rnbootsplash.RNBootSplash

class MainActivity : ReactActivity() {

    override fun getMainComponentName(): String = "packageName"

    override fun createReactActivityDelegate(): ReactActivityDelegate =
        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)

    override fun onCreate(savedInstanceState: Bundle?) {
        RNBootSplash.init(this, R.style.BootTheme) // ⬅️ инициализация заставки
        super.onCreate(null) // super.onCreate(null) с react-native-screens 
    }
}

Вот мой styles.xml (android -> src -> main -> res -> values -> styles.xml)

<resources>

    <!-- Базовая тема приложения. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Настройте свою тему здесь. -->
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
        <item name="android:forceDarkAllowed">false</item>
    </style>

    <!-- BootTheme должен наследоваться от Theme.BootSplash или Theme.BootSplash.EdgeToEdge -->
    <style name="BootTheme" parent="Theme.BootSplash">
        <item name="bootSplashBackground">@color/bootsplash_background</item>
        <item name="bootSplashLogo">@mipmap/bootsplash_logo</item>
        <item name="postBootSplashTheme">@style/AppTheme</item>
    </style>


</resources>

изображение с проблемой

Моя конфигурация:
Версия React Native: 0.74.1
React Native Bootsplash: 6.3.1

Когда я удаляю функцию onCreate из MainActivity.kt, нижняя панель исчезает, но тогда, конечно, заставка больше не работает должным образом.

Я также пытался упростить компонент после заставки, чтобы изолировать проблему. Вот код, который я тестировал:

файл index.js

const Comp = () => {
  BootSplash.hide({fade: true});
  return <View style={{flex: 1, backgroundColor: 'red'}}></View>;
};

// AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerComponent(appName, () => Comp)

Я видел предложения, указывающие на то, что это может быть связано с правилами “safe-area-inset-*” или поведением макета. К сожалению, я не могу подключить отладчик, чтобы напрямую проверить детали рендеринга. Я также протестировал на физном устройстве Android, чтобы исключить проблемы рендеринга, специфичные для симулятора, но проблема остается.

Если я удаляю

<item name="bootSplashBackground">@color/bootsplash_background</item>
<item name="bootSplashLogo">@mipmap/bootsplash_logo</item>
<item name="postBootSplashTheme">@style/AppTheme</item>

из styles.xml (android -> src -> main -> res -> values -> styles.xml), мой экран выглядит как изображение.
Внизу, где появляется отступ, мы можем видеть часть BootSplash.

Я также протестировал на физном устройстве Android, чтобы исключить проблемы рендеринга, специфичные для симулятора, но проблема остается.

Эта проблема распространена с React Native BootSplash на Android и обычно возникает из-за того, как BootTheme настроен в styles.xml и, возможно, как система обрабатывает инклюзии или безопасные области на Android. Давайте пройдемся по нескольким шагам по устранению неполадок и рекомендациям, чтобы решить проблему с нижней панелью и инклюзиями.

1. Используйте Theme.BootSplash.EdgeToEdge
   Вы используете Theme.BootSplash как родительский для BootTheme. Переключитесь на Theme.BootSplash.EdgeToEdge, который предназначен для обработки полноэкранных приложений на Android, расширяя содержимое от края до края, особенно в случаях, когда видны инклюзии макета (строка состояния, навигационная панель).

Измените это в styles.xml:

<style name="BootTheme" parent="Theme.BootSplash.EdgeToEdge">
    <item name="bootSplashBackground">@color/bootsplash_background</item>
    <item name="bootSplashLogo">@mipmap/bootsplash_logo</item>
    <item name="postBootSplashTheme">@style/AppTheme</item>
</style>

2. Настройте макет MainActivity
   Иногда добавление WindowCompat.setDecorFitsSystemWindows(window, false) в MainActivity.kt может помочь устранить отступы, которые могут возникнуть из-за системных инклюзий. Эта строка кода указывает Android игнорировать системные инклюзии (например, нижнюю панель) и позволяет содержимому полностью расширяться до краев экрана.

Добавьте это в ваш onCreate метод:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
    WindowCompat.setDecorFitsSystemWindows(window, false)
    RNBootSplash.init(this, R.style.BootTheme)
}

Это часто может решить проблемы с отступами макета.

3. Проверьте безопасные области или инклюзии
   Если вы используете какие-либо SafeAreaView или аналогичные инклюзии в ваших компонентах React Native, проверьте, что они не применяют дополнительные отступы или маргины к макету после скрытия заставки. Это обычно будет видно в вашем макете основного компонента, что может влиять на видимую область.

4. Проверьте полноэкранные флаги на Android
   Другой подход – установить приложение в полноэкранный режим, изменив флаги макета напрямую. Чтобы убедиться, что заставка и последующие экраны занимают весь экран, используйте эти флаги в MainActivity.kt:

Добавьте это после RNBootSplash.init(...):

window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
                                      View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION or
                                      View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or
                                      View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or
                                      View.SYSTEM_UI_FLAG_FULLSCREEN or
                                      View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY

Это должно гарантировать, что ваша заставка отображается без какой-либо дополнительной нижней панели или отступов.

5. Очистите и пересоберите
   После внесения этих изменений очистите кеш сборки и пересоберите проект:

   cd android && ./gradlew clean
   cd .. && npx react-native run-android

• Используйте Theme.BootSplash.EdgeToEdge в styles.xml.
• Добавьте WindowCompat.setDecorFitsSystemWindows(window, false) в MainActivity.kt.
• Убедитесь, что нет компонентов SafeAreaView или Insets, которые вызывают дополнительные отступы.
• При необходимости установите полноэкранные флаги в MainActivity.kt.

Это должно помочь