Effortlessly enable edge-to-edge display in React Native (formerly known as react-native-bars).
MIT License
Published by zoontek 10 months ago
AndroidManifest.xml
namespace deprecation warningPublished by zoontek 10 months ago
darkContentBarsStyle
value for easier light / dark themes handlingPublished by zoontek 10 months ago
android:windowLayoutInDisplayCutoutMode
: always
on Android >= 11Published by zoontek 10 months ago
darkContentBarsStyle
android custom style property (documentation)RNBars.init(activity: Activity, enableKeyboardHandling: Boolean = true)
new static method that read the value darkContentBarsStyle
property valuereact-native
0.73 (Kotlin) instructionsPublished by zoontek about 1 year ago
windowLayoutInDisplayCutoutMode
for Android API 27+Published by zoontek over 1 year ago
namespace
conditionally in order to improve old react native version compatibility.Published by zoontek over 1 year ago
namespace
for react native 0.73 compatibilityPublished by zoontek over 1 year ago
Theme.EdgeToEdge
for easier android setup (#22)styles.xml
:<resources xmlns:tools="http://schemas.android.com/tools"><!-- use tools -->
<!-- make AppTheme inherit from Theme.EdgeToEdge -->
<style name="AppTheme" parent="Theme.EdgeToEdge">
<!-- … -->
<!-- set bars initial styles: true = dark-content, false = light-content -->
<item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
<item name="android:windowLightNavigationBar" tools:targetApi="o_mr1">true</item>
</style>
</resources>
Published by zoontek over 1 year ago
RNBars.init
: enableKeyboardHandling
(default true
). This allow using libraries like react-native-keyboard-controller.Published by zoontek over 1 year ago
react-native
< 0.70Published by zoontek about 2 years ago
Add android:windowSoftInputMode="adjustResize"
compatibility (#16). Remove the need to switch to adjustPan
.
Published by zoontek about 2 years ago
adjustPan
(fixes #15)To fix keyboard issues, update your AndroidManifest.xml
file to set android:windowSoftInputMode
to adjustPan
:
<activity
android:name=".MainActivity"
// …
android:launchMode="singleTask"
- android:windowSoftInputMode="adjustResize"
+ android:windowSoftInputMode="adjustPan"
Published by zoontek about 2 years ago
postinstall
(https://github.com/zoontek/react-native-bars/commit/9909581a726fe3fc5d7434c59edfabe03eef7967)Published by zoontek about 2 years ago
onCreate
instead of loadApp
to init react-native-bars
as soon as possible:import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
+ import android.os.Bundle;
import com.zoontek.rnbars.RNBars;
public class MainActivity extends ReactActivity {
// …
+ @Override
+ protected void onCreate(Bundle savedInstanceState) {
+ super.onCreate(savedInstanceState); // or super.onCreate(null) with react-native-screens
+ RNBars.init(this "dark-content"); // could be light-content
+ }
public static class MainActivityDelegate extends ReactActivityDelegate {
// …
- @Override
- protected void loadApp(String appKey) {
- super.loadApp(appKey);
- RNBars.init(getPlainActivity(), "dark-content"); // could be light-content
- }
}
}
Published by zoontek over 2 years ago
core
package to 1.8.0
0.69.0
Published by zoontek over 2 years ago
Published by zoontek over 2 years ago
Published by zoontek over 2 years ago
>= 0.68
(⚠️ Note that the new architecture isn't supported yet!)