getStylesheet causes media query styles to leak into original stylesheet

[nabilfreeman]

Hi all, I discovered a pretty interesting bug which is linked to the use of _.merge in the getStylesheet function.

Merge flattens the objects down and modifies the first object passed in to the array, which means that your conditional styles will also get flattened into the original object reference.

What this meant for us was resizing the browser window would initially activate the correct responsive styles, but resizing back would cause those extra styles to linger.

In the example below the values in the tablet object are inserted into the base object, breaking the responsive behaviour until next browser refresh / app reboot.

Fix: Use cloneDeep here (important to a deep copy as it's actually the internal object references causing problems)

// important that we use cloneDeep here because the react-native-responsive-ui library uses Lodash merge which modifies some of the original references. So your tablet / desktop styles will leak into the base object without this.
const queries = [
	{
		query: {
			minWidth: 0,
		},
		style: cloneDeep(base),
	},
	{
		query: {
			minWidth: GLOBALS.SCREEN.BREAKPOINTS.tablet,
		},
		style: cloneDeep(tablet),
	},
	{
		query: {
			minWidth: GLOBALS.SCREEN.BREAKPOINTS.desktop,
		},
		style: cloneDeep(desktop),
	},
];

We should add cloneDeep to getStylesheet. I'm going to open a PR for this.