0.2.0 • Published 10 months ago
rn-adaptive-styles v0.2.0
rn-adaptive-styles
IMPORTANT:warning:: The library is still in development and things might change.
Contributions and Feedbacks are appreciated.
React Native library to enable adaptive styling. Support foldables and css media query like styling.
Installation
npm install rn-adaptive-styles
Usage
adaptiveKey
adaptiveKey
creates the key which can be used in the style object which is read by the library and returns the style object.
Parameters | Type | Default | Required | Description |
---|---|---|---|---|
minWidth | number | Required | Min Width at which the styles should be applied minWidth >= DeviceWidth | |
maxWidth | number | -1 | No | Max Width till the style will be applied such as maxWidh < DeviceWidth . Use -1 to ignore the value |
minHeight | number | -1 | No | Min Height at which the styles should be applied minHeight >= DeviceHeight . Use -1 to ignore the value |
maxHeight | number | -1 | No | Max Height till the style will be applied such as maxHeight < DeviceHeight . Use -1 to ignore the value |
platform | "ios" ,"android","windows","macos","web" as string or string[] | no | The Platform on which the styles would be applied. Leave empty to apply it on all platforms. |
createDynamicStyles
createDynamicStyles
can be used to generate static styles depending on the screen-size and platform defined. Useful to modify styles when used on bigger screens(typically tablets and Ipads) to support their larger screen.
import { createAdaptiveStyles, adaptiveKey } from 'rn-adaptive-styles';
// ...
const styles = createAdaptiveStyles({
container: {
//Base Styles
flex: 1,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
backgroundColor: "green",
//Adaptive styles applied if deviceWidth >= 650px
// It will overwrite backgroundColor and flexDirection defined in base styles
[adaptiveKey(600)]: {
flexDirection: "row",
backgroundColor: "orange",
},
},
// Styles need not use adaptiveKey if not required.
box: {
borderRadius: 4,
width: 70,
margin: 10,
height: 70,
backgroundColor: "yellow",
}
});
useAdaptiveStyle
useAdaptiveStyle hook enables adaptive styles which updates when screen dimensions change, such as when a foldable screen changes.
import { View } from "react-native";
import { adaptiveKe, useAdaptiveStyles } from "rn-adaptive-style";
export default function App() {
const styles = useAdaptiveStyles(styles_obj as AdaptiveStyles);
console.log(styles);
return (
<View style={styles.container}>
{[1, 2, 3, 4, 5, 6].map((num) => (
<View key={num} style={styles.box} />
))}
</View>
);
}
const styles_obj = {
container: {
flex: 1,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
backgroundColor: "green",
[adaptiveKey(600)]: {
flexDirection: "row",
backgroundColor: "orange",
},
},
box: {
borderRadius: 4,
width: 70,
margin: 10,
height: 70,
backgroundColor: "yellow",
},
};
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT