Responsive style hook for React Native apps.
- This hook aims to provide an API that can be useful for universal design systems like dripsy, NativeBase and React Native apps that uses responsive styling.
- It transforms styles to CSS media-query on react native web that can be useful for responsive SSR react native web apps.
- Read disableCSSMediaQueries section.
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} />;
}
- Here, the
View
will have background coloryellow
as default,pink
when width >= 400,black
when width >= 1200,purple
when width >= 1600. It'll have the height and width equals to 200.
- initial (optional): ReactNativeStyle
- query: Array<{minWidth: number, maxWidth: number, style: ReactNativeStyle}>
- disableCSSMediaQueries (optional): boolean
useResponsiveQuery
also returns a function namedgetResponsiveStyles
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} />;
- Here, background color
pink
will be applied only when screen width is >= 400 and <= 800.
- You can disable CSS media queries by using
disableCSSMediaQueries
boolean at the hook level or the Provider level.
- The below snippet will disable CSS media queries for all the hooks.
import { ResponsiveQueryProvider } from 'react-native-responsive-query';
function App() {
return (
<ResponsiveQueryProvider disableCSSMediaQueries>
{/* Your app goes here */}
</ResponsiveQueryProvider>
);
}
- The below hook will disable CSS media queries for this particular hook.
const { styles } = useResponsiveQuery({
disableCSSMediaQueries: true,
query: [
{
minWidth: 400,
style: {
backgroundColor: 'pink',
},
},
],
});
return <View style={styles} />;
- It uses
dataSet
prop to add responsive styling. - We're relying on internal/undocumented RNW functions for injecting + generating styles. (most of these functions are pure (and memoises) but the current injecting solution might not be the cleanest). Checkout source
-
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.
- Thanks to Fernando for the hook idea and helping to shape the hook API :)
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