We Keep Coding

React native Modal bypasses expo navigation bar setting

In my App.js i have set :
import * as NavigationBar from "expo-navigation-bar";
...In my component
useEffect(() => {
if (android) {
NavigationBar.setBackgroundColorAsync("transparent");
}
}, []);
which sets my navigation bars transparent in all screens,but when a modal is visible :
<Modal
animationType="none"
transparent
visible={isVisible}
presentationStyle="overFullScreen"
hardwareAccelerated
>
...navigation bar becomes white,even when i try to set it also within my modal component as well,any known solutions for this ?

I had this problem in Android as well. What I believe is happening is the react-native modal is simply taking the default android:navigationBarColor in the styles.xml and so every time it pops up, it overwrites the current navigation bar color until it gets dismissed.
The flag statusBarTranslucent did not work for me.
I was able to fix this by navigating to /res/values/styles.xml in your app or src folder
It really helps if you change your view style to "Android"
then
Then in the AppTheme style I added navigationBarColor to be transparent.
It looks like this
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:textColor">#android:color/black</item>
<item name="android:navigationBarColor">#android:color/transparent</item> // <----This is what I added
</style>
Then in my react native code, I used react-native-navigation-bar-color. I believe this should work with expo-navigation-bar since the main issue is derived from react native modal trying to overlay the default navBarColor value.
import changeNavigationBarColor from "react-native-navigation-bar-color";
const setDarkMode = (isDarkMode: boolean) => {
// logic to change my app's themeProvider to dark mode
changeNavigationBarColor(isDarkMode ? "black" : "white"); // Then I change the navigation bar color.
};
Hopefully this helps someone!

Babylon.js Loading Screen Change Image

I am trying to change the loading logo of babylon js however all the tutorials and documentation I found on the official website are not working for me.
I am using a basic babylon viewer using
<babylon id="babylon-viewer" model="mymodel.gltf" templates.main.params.fill-screen="true" observers.on-scene-init="globalSceneInitCallback"></babylon>
and some other javascript to control the camera.
I believe there is a simple way how to just change the loading-image, but cannot figure it out!
Regards and thanks

To change the default values of the babylon viewer's loading screen, you will need to modify the loading screen's template.
The configuration object looks like this:
loadingScreen: {
html: loadingScreen,
params: {
backgroundColor: "#000000",
loadingImage: images.loading,
staticLoadingImage: images.staticLoading
}
},
Just as you changed the fillScreen's parameter of the main template, you can change on of those 3 parameters - background color, loading image, and (better - OR) static loading image. Something along the lines of this:
<babylon id="babylon-viewer" model="mymodel.gltf" templates.loading-screen.params.loadingImage="http://LINK-TO-IMAGE" templates.main.params.fill-screen="true" observers.on-scene-init="globalSceneInitCallback"></babylon>
or:
<babylon id="babylon-viewer" model="mymodel.gltf" observers.on-scene-init="globalSceneInitCallback">
<templates>
<loading-screen>
<params loadingImage="IMAGEURL">
</params>
</loading-screen>
</templates>
</babylon>

decreasing the size of the expansional panel in material ui

I have this requirement where I need to decrease the size of the expansion panel when it is open or say expanded.
I looked into the elements and styles tab but I see that we need to overwrite the styles.
Anyone who has handled this case?
Here is the to the sandbox.
https://codesandbox.io/s/yp9lmvwo1x
I basically want to decrease the size of the blue part in the first accordion.

You can do that by using withStyles HOC provided by material-ui.
const CustomExpansionPanel = withStyles(() => ({
root: {
width: "100%",
},
expanded: {
height: "110px"
}
}))(ExpansionPanel);
However you will also have to tweak the inner ExpansionPanelSummary and ExpansionPanelDetails if you are using them.
Here is a working sample for above : https://codesandbox.io/s/nr65w2qwp4

Is it possible to disable the swipe functionality when the image is zoomed?

I am using angular2-useful-swiper wrapper for iDangerous Swiper for a project and I need to disable the swiping functionality when the image is zoomed.
In Swiper Api there is nothing about this, so the question: is it possible?

as a work-around, you could subscribe to swiper's 'zoomChange' event and based on the scale (one of 3 args of it) update the mySwiper.allowTouchMove to false.
that worked for me in the Vue app.
my use-case
yourCallbackToEvent(scale) {
yourSwiper.allowTouchMove = scale === 1;
};

Prevent white edges during orientation change

I reproduce this issue with the most minimal React-Native app:
render() {
return View({style: {
flex: 1,
backgroundColor: 'black'
}})
}
When I rotate my phone, one side of the screen has a white section during the orientation transition. How can I color that area the same as the rest of the background?

In the RootView of your app, the default background color is white. You can change this to another color by using the following steps:
In this example we'll set the background color to black on iOS.
Open AppDelegate.m located in PROJECT_DIR/ios/Appname/ for editing.
Locate snippet that looks similar to the following:
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:#"Appname"
initialProperties:nil
launchOptions:launchOptions];
Add the following line of code immediately after the previous snippet:
rootView.backgroundColor = [UIColor blackColor];
The resulting code block should look like the following:
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:#"Appname"
initialProperties:nil
launchOptions:launchOptions];
rootView.backgroundColor = [UIColor blackColor];
BAM! RootView background color is set on iOS!
This information and more is available from this blog post: Changing the React Native RootView Background Color (iOS and Android) by Jay Garcia. (I believe the Android information in this post may be out of date, which is why I didn't include steps for Android).
Hope this helps!

I created a library, it allows you to do it from the level of JavaScript, and also allows you to do dynamic changes.
https://github.com/johniak/react-native-root-view-background
import { setRootViewBackgroundColor } from 'react-native-root-view-background';
export default class Main extends Component {
componentDidMount(){
setRootViewBackgroundColor('#ccc');
}
}

I am not sure what you are referring to here. But what ever is containing that view needs to have its background set also perhaps?