- Notifications
You must be signed in to change notification settings - Fork1
React-native library for creating stylesheets that return different styles based on screen size
License
AlixH/react-native-responsive-stylesheet
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
React-native library for creating stylesheets that return different styles based on screen size.It does this by dynamically checking the current screen width and height using theDimensions API whenever you render a component.
** NOTE: ** This library does not re-render on screen size changes, if you want to handle those cases, you must listen to theonLayout event to trigger a re-render.
npm install --save react-native-responsive-stylesheet
importResponsiveStylesheetfrom"react-native-responsive-stylesheet"
Same asStyleSheet.create, creates a regular StyleSheet with your styles in it
Creates a responsive stylesheet based size increments or decrements (like media queries)
map is an object literal mapping of{size: obj} wheresize is an integer representing pixels, andobj is a style definition to use with.create(obj)
direction is one of "min-width", "max-width", "min-height", "max-height", "min-direction" or "max-direction". It's purpose is to determine whether thesize represents thewidth orheight, and whether you should look forsize values higher or greater than the current screen resolution.
- min/max-direction uses the smallest direction value,
heightorwidth.
The return value is a special kind of stylesheet where when you try to get a style, you will get back an array of all styles that are valid for the current resolution. Check the examples for details.
The values are in the proper order to overwrite each other as they progress.
Creates a responsive stylesheet based on styles forlandscape andportrait orientations
map is an object literal with the optional keyslandscape andportrait pointing to a stylesheet definition used for.create().
The return value is a stylesheet which will dynamically look up the style definition based on whether you're in landscape or portrait mode. See the examples for details
importResponsiveStylesheetfrom"react-native-responsive-stylesheet"import{View}from"react-native";importReactfrom"react";varnormalStyles=ResponsiveStylesheet.create({item:{flex:1,backgroundColor:"red",alignSelf:"stretch"}});varresponsiveStyles=ResponsiveStylesheet.createOriented({landscape:{item:{marginHorizontal:16},container:{flexDirection:"row"}},portrait:{item:{marginVertical:16},container:{flexDirection:"column"}}});// Stateless component// Have parent re-render with the `onLayout` event to see changesexportdefaultfunctionOrientedList(){varitemStyle=[responsiveStyles.item,normalStyles.item];return(<Viewstyle={styles.container}><Viewstyle={item}/><Viewstyle={item}/><Viewstyle={item}/></View>)}
importResponsiveStylesheetfrom"react-native-responsive-stylesheet"import{View,ScrollView}from"react-native";importReactfrom"react";varnormalStyles=ResponsiveStylesheet.create({container:{flexDirection:"row",// Make grid items align horizontally and wrap onto new linesflexWrap:"wrap",justifyContent:"space-around"},item:{backgroundColor:"red",// Default on small screenswidth:64,height:64}});varresponsiveStyles=ResponsiveStylesheet.createSized("min-width",{// Make them bigger on tablets768:{// Make sure you specify the style name and definition you wantitem:{width:128,height:128}},// Make them even bigger on wide screens (desktop)1224:{item:{width:128,height:128}},});exportdefaultfunctionResponsiveGrid(){// Make a flat array of styles since `responsiveStyles.item` will return an arrayvaritemStyle=[normalStyles.item].concat(responsiveStyles.item);return(<ScrollView><Viewstyle={normalStyles.container}><Viewstyle={itemStyle}/><Viewstyle={itemStyle}/><Viewstyle={itemStyle}/><Viewstyle={itemStyle}/><Viewstyle={itemStyle}/><Viewstyle={itemStyle}/><Viewstyle={itemStyle}/><Viewstyle={itemStyle}/><Viewstyle={itemStyle}/><Viewstyle={itemStyle}/><Viewstyle={itemStyle}/><Viewstyle={itemStyle}/><Viewstyle={itemStyle}/><Viewstyle={itemStyle}/><Viewstyle={itemStyle}/><Viewstyle={itemStyle}/></View></ScrollView>);}
Since this module doesn't rely on any native APIs uses ES5 and CommonJS, you should be able to include it in anyreact-native-web project without any other configuration (other than setting up an alias forreact-native)
About
React-native library for creating stylesheets that return different styles based on screen size
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Languages
- JavaScript100.0%