Hot reloading breaks media queries

[dmeij]

JS file

import React from 'react';
import styles from './View.less';
import { SafeAreaView, View, Text, TouchableOpacity, } from 'react-native';

class DashboardView extends React.Component {
    static navigationOptions = {
		title: 'Dashboard',
	};
	
    render() {
        return (
            <SafeAreaView>
                <View>
                    <TouchableOpacity className={styles.button}>
                        <Text>Hello</Text>
                    </TouchableOpacity>
                    <TouchableOpacity className={styles.button1}>
                        <Text>World</Text>
                    </TouchableOpacity>
                </View>
            </SafeAreaView>
        );
    }
}

export default DashboardView;

Style file:

.button, .button1 {
    background-color: blue;
    padding: 15px;
    font-size: 18px;
}

@media screen and (min-width : 768px) and (max-width: 991px) {
    .button1 {
        background-color: yellow;
    }
}

@media screen and (min-width : 1200px) {
    .button1 {
        background-color: pink;
    }
}

When change the screen from landscape to portrait the color of the button with style "button1" changes correct. But when I save my JS file which triggers hot reloading, the background-color changes to the initial value. Tested it on Android.

[kristerkari]

Thanks @dmeij! I'll have a look to see if there's something that we can do to fix this.

[kristerkari]

I did a quick testing with your example, and it was working correctly for me on Android, so I could not reproduce the issue.

Could you provide a bit more info about your project, or maybe an example that I can try out?

[dmeij]

I think I found the problem. After changing the configChanges in my Manifest file from: android:configChanges="keyboardHidden|orientation" to android:configChanges="keyboard|keyboardHidden|orientation|screenSize" the problem doesn't occur anymore. My mistake, screenSize was missing which reloaded the app for some reason.

Only now if I rotate my screen, the background-color isn't changing anymore, only when I save my file and hot reloading triggers. Don't know if this is the normal behavior or should the background color change when the screen rotates without reloading?

[kristerkari]

Only now if I rotate my screen, the background-color isn't changing anymore, only when I save my file and hot reloading triggers. Don't know if this is the normal behavior or should the background color change when the screen rotates without reloading?

The reason why the background does not change when you rotate is that the React components do not automatically re-render if they don't need to when the orientation change happens.

I made a small library to fix that issue. It will force the components to re-render whenever the orientation changes: https://github.com/kristerkari/react-native-orientation-change-provider

[dmeij]

Thnx, is it correct that the re-render will reset the navigation state when using React Navigation? Can I do something about that? Because now when I rotate my screen when I'm not on the root page it will re-render en show me the route page again instead of the page I was viewing.

[kristerkari]

Thnx, is it correct that the re-render will reset the navigation state when using React Navigation? Can I do something about that? Because now when I rotate my screen when I'm not on the root page it will re-render en show me the route page again instead of the page I was viewing.

I'm not sure as I have not tested, but I guess that you would only need to wrap the views that are inside the router. So you could create a wrapping component that you would use for each route in your navigator.