React Native Responsive Hook: Streamline Your UI Across All Devices 🚀
zakriamuhammad3637@gmail.com.
Keen on shaping the future of responsive UI? Your contributions are invaluable! Reach out atContents
react-native-responsive-hook
react-native-responsive-hook is an intuitive library offering a suite of hooks that make crafting responsive UIs in React Native effortless. It builds upon react-native-responsive-screen, adding custom hooks and enhanced functionalities for precise breakpoint detection and scalable component design.
Experience streamlined development and consistent UI across devices. Learn more in this detailed Medium article! 🚀
Installation
Install with npm for a seamless setup:
npm install react-native-responsive-hook --save
Usage
Adapt your UI elements effortlessly with the following steps:
-
Import: Fetch
useResponsive
fromreact-native-responsive-hook
. -
Retrieve: Access
wp
,hp
,vw
,vh
,isLandscape
,isPortrait
,rem
,rf
,isIOS
,isAndroid
,breakpointGroup
using the hook. - Implement: Apply these dynamic values to your component styles for a fluid, adaptive UI.
Understanding Breakpoints
breakpointGroup
classifies the screen width into categories for targeted styling:
-
group1
: 0 - 399 pixels -
group2
: 400 - 599 pixels -
group3
: 600 - 767 pixels -
group4
: 768 - 1007 pixels -
group5
: 1008 - 1279 pixels -
group6
: 1280 pixels and beyond
wp
, hp
, vw
, and vh
Dynamic Dimensions with -
wp(percent)
: Calculates width based on screen percentage. -
hp(percent)
: Calculates height based on screen percentage. -
vw(percent)
: Calculates width based on viewport width percentage. -
vh(percent)
: Calculates height based on viewport height percentage.
These functions use density-independent pixels (dp
) to ensure consistency across various devices.
rem
and rf
Responsive Font Scaling with -
rem(size)
: Converts font size to rem units. -
rf(size)
: Converts font size to responsive font units (rf).
rem
utilizes a multiplier to scale fonts based on the device's screen size, while rf
ensures font sizes remain within a predefined range.
isIOS
and isAndroid
Platform Detection with -
isIOS
: Indicates if the platform is iOS. -
isAndroid
: Indicates if the platform is Android.
Use these booleans to tailor your UI specifically for each platform.
Examples
Responsive Box Example
// Import necessary packages
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { useResponsive } from 'react-native-responsive-hook';
// Define the App component
const App = () => {
const { styles } = useStyles(); // Use the hook to get styles
return (
<View style={styles.container}>
<View style={styles.responsiveBox}>
<Text style={styles.text}>Responsive Box - Adjusts based on orientation, screen size, and platform.</Text>
</View>
</View>
);
};
// Define the useStyles hook
const useStyles = () => {
const { isLandscape, isPortrait, wp, hp, vw, vh, rem, rf, isIOS, isAndroid, breakpointGroup } = useResponsive(); // Destructure all properties from useResponsive
// Utilize the hook values to create dynamic styles
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: isLandscape ? 'lightblue' : 'gray', // Change background color based on orientation
alignItems: 'center',
justifyContent: 'center',
},
responsiveBox: {
borderWidth: 2,
borderColor: 'orange',
flexDirection: 'column',
justifyContent: 'space-around',
width: isPortrait ? wp(85) : wp(50), // Adjust width based on orientation
height: hp(17), // Adjust height using hp function
backgroundColor: getBackgroundColorByGroup(breakpointGroup) // Change box color based on breakpoint group
},
text: {
color: 'white',
fontSize: rem(16), // Use rem for font size
fontFamily: isIOS ? 'Helvetica' : 'Roboto', // Use different font families for iOS and Android
}
});
return {styles};
};
function getBackgroundColorByGroup(breakpointGroup) {
switch(breakpointGroup) {
case 'group1': return 'lightgreen';
case 'group2': return 'lightpink';
case 'group3': return 'lightyellow';
case 'group4': return 'lightcoral';
case 'group5': return 'lightskyblue';
case 'group6': return 'lightsteelblue';
default: return 'white';
}
}
export default App;
Want to Contribute?
Your contributions are welcome! Feel free to submit pull requests or contact me directly to discuss how you can get involved