Develop Reference

Trying to make the Android Navigation Bar transparent in Expo

I'm working on a React Native project with expo and am trying to have the Android Navigation bar rest on top of my view (as shown below and described here)
However I am having difficulty getting my desired result instead I get a gray bar at the bottom.
Thus far I've tried to set the navigation bar to transparent in my app.json file or use NavigationBar.setBackgroundColorAsync(color) both ending with the same result.
//app.json
"androidNavigationBar": {
"backgroundColor":"#00000000"
},
//App.js
//also tried flex: 1
<View style={{height: Dimensions.get("screen").height, backgroundColor: "blue"}}></View>

How to remove this overlay on statusbar in emulator Flutter on Android?

This is the Android emulator I am using (in Android Studio). I don't know if this is going to be shown when released as well, but I want to remove this grey looking overlay. Is this by default shown because it's in debug mode or is there a way I can get rid of it?
This is what I have. If I make it light, only the text color becomes light, but I want the whole overlay to be white instead of gray(ish).
AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.dark,

You need to change status bar color before run the app:
void main() {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
statusBarColor: Colors.blue,
),
);
// Here you can run your app
}

expo web hide bottom navigation bar when keyboard show

I would like to hide my bottom navigation bar on mobile device when keyboard is show.
I use Expo 40
I have added in definition option bottom bar keyboardHidesTabBar: true, such as:
const TabBot = createMaterialBottomTabNavigator();
...
return(
<TabBot.Navigator
initialRouteName="np"
tabBarOptions={{
keyboardHidesTabBar: true
}}
barStyle={TabBotOpt}>
...
I have add "softwareKeyboardLayoutMode": "pan" in android section into app.json file,
but when I open the website from mobile phone (android) I have this:
It is possible to hide bottom Tab Navigation when keyboard is open?

React Navigation transparent bar missing title and buttons on android

I'm building a React Native app with React Navigation 2.5.x. I have a transparent navigation bar. On iOS everything is fine, but on Android the title, back button and any barButton I put there is missing.
The navigation options is defined like this:
const navigationOptions = {
headerStyle: {
borderBottomWidth: 0,
},
headerTransparent: true,
headerTintColor: Colors.barTintColor,
};
If I try to inspect the view I get the header component when tapping, but on Android I get the scenes content view instead.
Previously I had the header style positioned absolutely and a transparent background color. I would like the bar to be transparent and visible above the rest of content screen. But positioning it absolutely, setting headerMode och headerTransparent all makes the headers disappear.
What am I doing wrong?

How to add icon (image, logo..) to the status bar

I have noticed that there is no props for the StatusBar component (React Native) to include an icon or logo of any kind as in this documentation:
https://facebook.github.io/react-native/docs/statusbar.html#statusbar
I would like for an icon (or even just a small widthxheight square) to appear next to the networks bar continuously while the app is running in the background. I tried combining the View component with the status bar to create a small red rectangle like this:
<View style={styles.container}>
<StatusBar
backgroundColor="blue"
barStyle="light-content"
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
width: 20,
height: 20,
backgroundColor: 'red'
}
})
However the red square just appeared below the status bar. Any ideas?
Edit:
What I want is to have my app logo on the status bar even when the app is in the background. (apps that provide VPN and location services do this sometimes).

For iOS it's not possible to add any custom icons in the status bar, apple doesn't allow it.
For Android you should use Notification and Notification Manager. Just write a native module in java who do this when your app is launching.
React Native allow you to call Native Module written in Java, take a look here https://facebook.github.io/react-native/docs/native-modules-android.html
You should also read this for Notification How to show an icon in the status bar when application is running, including in the background?

There are 2 kinds of icons in Android status bar.
One kind is system icons that come from framework-res.apk and extracted to the /system/framework , you can't change those without having some elevated privileges on the device and mounting the system image read/write.
The other kind is the notification icons as mentioned here before.
For iOS you can't really change much.
Your screenshot shows both kinds and you want to put your icon next to the Network bars icon but those are system icons (on Android)
Here is a plugin that deals with notifications (and notification icons) both platforms and wraps everything, easy to use with react
You can find a sample native code for iOS notification here and Android here:

You can't change the status bar. Apple only allows you to change the appearance of the status bar. For the ios app maybe changing the appearance globally works for you.
Open the .xcproj file generated by ReactNative and:
In your Info.plist you need to set "View controller-based status bar appearance" to a boolean value.
set it to NO set the style in AppDelegate adding this code on the didFinishLaunchingWithOptions function: UIApplication.sharedApplication().setStatusBarStyle(UIStatusBarStyle.LightContent, animated: true)