Currently I have this:
const ButtonStyles = {
color: 'red',
}
But I want to add a Media Query for mobile, would it look something like this?:
const ButtonStyles = {
color: 'red',
'@media (max-width: 900px)': {
color: 'blue',
}
}
If the syntax is not in this format, then how is it supposed to be done?
Give a try.
https://github.com/kasinskas/react-native-media-query Work just like RN StyleSheet, but with queries.
https://github.com/yocontra/react-responsive Work with functions inside regular RN StyleSheet
An eg. with natives StyleSheet, Platform and React-Responsive and variables.
import { StyleSheet, Platform } from 'react-native';
import { useMediaQuery } from 'react-responsive';
export const STYLES = StyleSheet.create({
content: (setup) => {
const justifyTo = setup?.justify ? setup.justify : 'flex-start';
return {
justifyContent: justifyTo,
...Platform.select({
web: {
width: useMediaQuery({ maxWidth: 767 }) ? '100vw' : '70vw',
maxWidth: 1280,
marginHorizontal: 'auto',
marginVertical: 'auto',
},
}),
};
}
});
According to this discussion You cannot use Media queries with react css objects. You must use stylesheets with class names or other external modules like styled components.
