A simple and minimal device size checker hook for react-native
yarn add use-sizes
or
npm install use-sizes
- Wrap your app entry point in SizesProvider
import { SizesProvider } from 'use-sizes';
const App = () => {
return (
<SizesProvider>
<AppContainer />
</SizesProvider>
);
};
export default App;
- Use hook to access sizes
import { useReactNativeSizes } from 'use-sizes';
const AppContainer = () => {
const sizes = useReactNativeSizes();
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>{JSON.stringify(sizes, null, 2)}</Text>
</View>
);
};
const sizes = {
width: 540, // number
height: 960, // number
scale: 3, // number
fontScale: 1, // number
aspectRatio: [9, 16], // [number, number]
isPhone: true, // boolean [width <= 680]
isTablet: false, // boolean [width > 680]
isDesktop: false, // boolean [width > 1024]
isPortraitMode: true, // boolean [width < height]
isLandscapeMode: false, // boolean [height < width]
is: {
xs: false, // boolean [width <= 320]
s: false, // boolean [width <= 480]
m: true, // boolean [width > 480]
l: false, // boolean [width >= 768]
xl: false, // boolean [width >= 1024]
xxl: false, // boolean [width >= 1280]
},
};
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT