We Keep Coding

styling changing on refresh in nextjs

I'm having this weird issue where my styling is not sticking. I have a NavBar set to be 20vh in height. I also have an image set to be 100% in width. However, when I refresh the page, the NavBar height shrinks and the image width increases significantly. I'm not sure what is causing this problem. I have pasted the relevant code below but you can also find the repo for the app at this link (dev branch).
const useStyles = makeStyles((theme) => ({
navBar: {
height: "20vh",
width: "100%",
},
}));
const NavBar = () => {
const classes = useStyles();
return <div className={classes.navBar}>NavBar</div>;
};
const useStyles = makeStyles((theme) => ({
introImg: {
width: "100%",
height: "auto",
},
}));
const Intro = () => {
const classes = useStyles();
return <img src={marco4sup} className={classes.introImg} />;
};
As you can see, the NavBar is definitely not 20vh and the image is expanding beyond 100% of the page width.

Alert: I will give a pull request on the repo on github so you can implement the code. Fast Refresh is a Next.js feature that gives you instantaneous feedback on edits made to your React components. Fast Refresh is enabled by default in all Next.js applications on 9.4 or newer. With Next.js Fast Refresh enabled, most edits should be visible within a second, without losing component state.
How It Works
If you edit a file that only exports React component(s), Fast Refresh will update the code only for that file, and re-render your component. You can edit anything in that file, including styles, rendering logic, event handlers, or effects.
If you edit a file with exports that aren't React components, Fast Refresh will re-run both that file, and the other files importing it. So if both Button.js and Modal.js import theme.js, editing theme.js will update both components.
Finally, if you edit a file that's imported by files outside of the React tree, Fast Refresh will fall back to doing a full reload. You might have a file which renders a React component but also exports a value that is imported by a non-React component. For example, maybe your component also exports a constant, and a non-React utility file imports it. In that case, consider migrating the constant to a separate file and importing it into both files. This will re-enable Fast Refresh to work. Other cases can usually be solved in a similar way.
Arrow functions aren't supported. Name your functional component.
export default function MyPage () {...
Without export defualt function MyPage() {... it won't use fast refresh therefore your code won't work, to implement it into your Code do the following(for code block1):
export default function UseStyles () {
navBar: {
height: "20vh",
width: "100%",
},
}));
const NavBar = () => {
const classes = useStyles();
return <div className={classes.navBar}>NavBar</div>;
};
Sorry if there are any grammatical errors my english isn't great.
And also if you want your navbar to be sticky set the position to sticky like the following:
position: sticky;

React Native Android Navigation Bar Translucent

I'm trying to set the navigation bar to translucent on android.
Take a look at the image for example:
(source: morenews.pk)
I tried using react-native-navigation-bar-color but it only allows me to hide nav bar / show nav bar / change the color of nav bar.
So using this navigation bar library, I attempted to set changeNavigationBarColor('transparent'); but it made my app crash.
I've also tried setting android:fitsSystemWindows="true" in AndroidManifest.xml which I brought from here, but unfortunately nothing changed.

A good way to get a translucent navigation and status bar is to add 3 style items to android > app > src > main > res > values > styles.xml
These will set the bottom navigator bar to translucent:
<item name="android:navigationBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentNavigation">true</item>
This one sets the top status bar to translucent:
<item name="android:windowTranslucentStatus">true</item>
Example of implementation in styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:textColor">#000000</item>
<!-- Make status & navigation bar translucent -->
<item name="android:navigationBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
This will make your content render below the status and navigation bar.
To fix this you can use react-native-safe-area-context to get the safe area insets.
Example for a safe content view:
import { SafeAreaInsetsContext } from "react-native-safe-area-context";
const ContentView = (props) => {
const safeInsets = useContext(SafeAreaInsetsContext);
return (
<View
style={[
{
marginLeft: safeInsets?.left,
marginTop: safeInsets?.top,
marginRight: safeInsets?.right,
marginBottom: safeInsets?.bottom
}
]}
>
{props.children}
</View>
);
}

So I took a look into the module and what it's doing and found that it's just using the native android Color library to parse the string.
(Docs for it can be found here: https://developer.android.com/reference/android/graphics/Color)
I was able to get the nav bar transparency using the #AARRGGBB pattern specified in the docs. 3 or 4 letter Hex strings are not supported, and rgb strings are not supported. Some color names are listed as supported but transparent is not one of them.
Unfortunately, even though I was able to set the nav bar to be fully transparent, I wasn't able to get the app to actually draw anything behind it, so fully transparent actually just ends up being white, and anything in between is a transparency relative to that white background.

You do not seem to accept string values. Would you like to try this?
changeNavigationBarColor('rgba(0,0,0,0)',true)

We need to make custom navigation bar and add safe area to it.And then give your required colour to safe area. Below, is the example,
<ImageBackground style={{flex:1, backgroundColor: 'silver'}} source={require('./des.jpeg')}>
<SafeAreaView style={{backgroundColor: 'transparent'}}/>
</ImageBackground>

You just add this lines to app.json:
"androidNavigationBar": {
"visible": "sticky-immersive"
},

React Materialize Parallax image is not scrolling with background

I am trying to use a parallax from react-materiallize for a portfolio site. I've got the images working in the parallax however it doesn't not seem to be scrolling.
I've loaded JQuery before material CSS in the index.html file
import React, { Component } from 'react'
import {Parallax, Row} from 'react-materialize'
export default class ParalaxComponent extends Component {
render(){
debugger
return (
<Row>
<Parallax imageSrc="https://www.thoughtco.com/thmb/DF3Q0T5_0O5CmGBTCWCBTcyGgmw=/768x0/filters:no_upscale():max_bytes(150000):strip_icc()/JavaScript-58acbb8a3df78c345bad32c2.jpg"></Parallax>
</Row>
)
}
}
The image shows up but the animation is not being triggered thank you for your help.
Here is the app on github if that's an easier way to debug the issue.

Ended up using 'npm react-parallax' instead.
There is great documentation and a demo app here

React Native Navigation change tabsStyle on runtime

I'm using startTabBasedApp API with three tabs but I need to change the tabBar background color for some of my screens. Is it possible to change the tabBar background color at runtime?
Example:
Screen 1 -> tabBar { tabBarBackgroundColor: "red" }
Screen 2 -> tabBar { tabBarBackgroundColor: "Blue" }
Screen 2 -> tabBar { tabBarBackgroundColor: "yellow" }
I found this section in the documentation: Doc but it doesn't support tabBarBackgroundColor property. Is there a way of doing this functionality?
PS: I am quite new to React / React-native.

Styling BottomTabs during runtime should be possible now that #2524 was merged. Try upgrading to v1.1.339

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?