Responsive style hook for react native.
MIT License
Responsive style hook for React Native apps.
yarn add react-native-responsive-query
// or
npm install react-native-responsive-query
import { View } from 'react-native';
import { useResponsiveQuery } from 'react-native-responsive-query';
export default function App() {
const { dataSet, styles } = useResponsiveQuery({
initial: {
backgroundColor: 'yellow',
height: 200,
width: 200,
},
query: [
{
minWidth: 400,
style: {
backgroundColor: 'pink',
},
},
{
minWidth: 1200,
style: {
backgroundColor: 'black',
},
},
{
minWidth: 1600,
style: {
backgroundColor: 'purple',
},
},
],
});
return <View dataSet={dataSet} style={styles} />;
}
View
will have background color yellow
as default, pink
when width >= 400, black
when width >= 1200, purple
when width >= 1600. It'll have the height and width equals to 200.useResponsiveQuery
also returns a function named getResponsiveStyles
for cases where a hook might be inconvenient.import { View } from 'react-native';
import { useResponsiveQuery } from 'react-native-responsive-query';
export default function App() {
const { getResponsiveStyles } = useResponsiveQuery();
const { dataSet, styles } = getResponsiveStyles({
initial: {
height: 200,
width: 200,
},
query: [
{
minWidth: 400,
style: {
backgroundColor: 'pink',
},
},
],
});
return <View dataSet={dataSet} style={styles} />;
}
const { styles, dataSet } = useResponsiveQuery({
query: [
{
minWidth: 400,
maxWidth: 800,
style: {
backgroundColor: 'pink',
},
},
],
});
return <View dataSet={dataSet} style={styles} />;
pink
will be applied only when screen width is >= 400 and <= 800.disableCSSMediaQueries
boolean at the hook level or the Provider level.import { ResponsiveQueryProvider } from 'react-native-responsive-query';
function App() {
return (
<ResponsiveQueryProvider disableCSSMediaQueries>
{/* Your app goes here */}
</ResponsiveQueryProvider>
);
}
const { styles } = useResponsiveQuery({
disableCSSMediaQueries: true,
query: [
{
minWidth: 400,
style: {
backgroundColor: 'pink',
},
},
],
});
return <View style={styles} />;
dataSet
prop to add responsive styling.SSR React native web app using NextJS
GitHub - https://github.com/intergalacticspacehighway/rnw-responsive-ssr
URL - https://rnw-responsive-ssr.vercel.app/
Try disabling JavaScript in browser, responsive styles will still work.
NOTE
Media query is currently a web-only feature. RNW recommends on using Dimension listener (which uses window resize event) for responsive layouts which is better IMO but can be limiting if one needs device dimension based styling for SSR apps.
You can use disableCSSMediaQueries
option if you are not using SSR responsive styling or if it's a client side rendered app.
Read more here - #1688 and RNW talk
See the contributing guide to learn how to contribute to the repository and the development
MIT