https://github.com/only-icesoul/react-native-mediaquery
Responsive Android Web IOS
https://github.com/only-icesoul/react-native-mediaquery
android ios mediaquery react react-native responsive web
Last synced: 2 months ago
JSON representation
Responsive Android Web IOS
- Host: GitHub
- URL: https://github.com/only-icesoul/react-native-mediaquery
- Owner: Only-IceSoul
- License: mit
- Created: 2021-12-04T22:09:34.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-12-06T18:23:41.000Z (over 3 years ago)
- Last Synced: 2025-02-26T22:05:32.459Z (3 months ago)
- Topics: android, ios, mediaquery, react, react-native, responsive, web
- Language: JavaScript
- Homepage:
- Size: 16.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native ReMediaQuery
android
ios
web
## Getting started
`$ npm install react-native-remediaquery --save`
`$ react-native link react-native-remediaquery`
or
`$ yarn add react-native-remediaquery`
# Usage
```javascript
import { useMediaQuery,usePropsMaxWidth,usePropsMaxHeight, useStyleMaxHeight, useStyleMaxWidth } from "react-native-remediaquery";
//Max descending order
//Min ascending order
const styles = useStyleMaxWidth(styleBase,
[
1400,
1200,
1024,
900,
800,
700,
600
],
[
style1400,
style1200,
style1024,
style900,
style800,
style700,
style600
])
const styleBase = StyleSheet.create({
tabBarIconSize:{
width:50,
height:50,
marginBottom:50,
justifyContent:'center',
alignItems:'center'
},
friendImage:{
height:220,
width: 220 * 2.1575
},
})
// You must copy all the style and change what you need
const style1400 = StyleSheet.create({
friendImage:{
height:180, //changed
width: 180 * 2.1575 //changed
},
})
const style1200 = StyleSheet.create({
tabBarIconSize:{
width:30, //changed
height:30, //changed
marginBottom:50,
justifyContent:'center',
alignItems:'center'
},
})
//.....
```