Introduction
In React development, Higher-Order Components (HOCs) are a useful design pattern that allow you to reuse component functionality without altering the component itself. They help to keep components clean and focused, enabling developers to enhance their logic with added behaviors like state management or lifecycle handling.
Key Points:
What is an HOC?
An HOC is a pattern where a function takes a component and returns a new component with added behavior.
Commonly used to handle logic such as state management, UI enhancement, or lifecycle methods.
Why use HOCs?
Reusability: Write logic once and apply it across multiple components.
Separation of concerns: Keep component logic isolated from UI details, making code more modular and easier to maintain.
CustomModal Example
Let's take a look at a reusable modal component called CustomModal. Below is its basic structure:
import React from 'react';
import { Modal, View } from 'react-native';
import styles from './styles';
const CustomModal = ({
isModalVisible = false,
onClosePress = () => {},
children,
modalContainerStyle,
modalStyle,
onShow = () => {},
onAndroidBackPress = () => {},
animationType = 'fade',
}) => {
return (
<Modal
animationType={animationType}
supportedOrientations={['portrait', 'landscape']}
transparent={true}
visible={isModalVisible}
onRequestClose={() => {
onClosePress();
onAndroidBackPress();
}}
onShow={onShow}
>
<View style={[styles.modalContainer, modalContainerStyle]}>
<View style={[styles.modalView, modalStyle]}>{children}</View>
</View>
</Modal>
);
};
export default CustomModal;
Here’s the styles object for CustomModal, which you can import or place directly inside the component file:
const styles = StyleSheet.create({
modalContainer: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semi-transparent background
justifyContent: 'center',
alignItems: 'center',
},
modalView: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
paddingVertical: 24,
paddingHorizontal: 16,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
width: '80%', // Set modal width to 80% of the screen width
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2,
},
buttonOpen: {
backgroundColor: '#F194FF',
},
buttonClose: {
backgroundColor: '#2196F3',
},
textStyle: {
color: '#FFFFFF',
fontWeight: 'bold',
textAlign: 'center',
},
container: {
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 10,
},
});
This CustomModal component uses the Modal component from React Native and accepts various props like isModalVisible, onClosePress, and animationType, making it flexible for different modal use cases.
Creating a Specialized Modal: DeleteContentPickerModal
We can now create a more specific modal, such as DeleteContentPickerModal, by reusing CustomModal and adding customized behavior:
const DeleteContentPickerModal = ({
isDeleteContentPickerModal = false,
onClosePress = () => {},
onRemoveButtonPress = () => {},
contentId = '',
}) => {
return (
<CustomModal
isModalVisible={isDeleteContentPickerModal}
onClosePress={onClosePress}
modalStyle={styles.modalStyle}
>
<View style={styles.container}>
<Button
text={'Remove From Download'}
textStyle={styles.endButtonTextStyle}
containerStyle={styles.endButtonContainerStyle}
onPress={onRemoveButtonPress}
/>
<Button
text={'Cancel'}
textStyle={styles.deleteTextStyle}
containerStyle={styles.endButtonContainerStyle}
onPress={onClosePress}
/>
</View>
</CustomModal>
);
};
This specific modal, DeleteContentPickerModal, inherits all the base functionality of CustomModal and adds unique UI and logic tailored to a content deletion feature.
Using the Modal in the App
Now that we've created our DeleteContentPickerModal, let's see how to use it in a React Native component. We'll control its visibility using state and display it when triggered.
import React, { useState } from 'react';
import { View, Button } from 'react-native';
import DeleteContentPickerModal from './DeleteContentPickerModal'; // Import your modal
const MyComponent = () => {
const [isDeleteContentPickerModal, setDeleteContentPickerModal] = useState(false); // Modal visibility state
return (
<View>
{/* Button to trigger the modal */}
<Button
title="Open Modal"
onPress={() => setDeleteContentPickerModal(true)}
/>
{/* DeleteContentPickerModal Usage */}
<DeleteContentPickerModal
isDeleteContentPickerModal={isDeleteContentPickerModal}
contentId={'12345'}
onClosePress={() => setDeleteContentPickerModal(false)}
onRemoveButtonPress={() => {
// Add logic to handle content removal here
setDeleteContentPickerModal(false); // Close modal after removing content
}}
/>
</View>
);
};
export default MyComponent;
With this setup, the modal can now be opened and closed based on state, allowing for smooth interaction within the app.
Conclusion
HOCs offer a powerful way to enhance React Native components by making logic reusable and keeping concerns separated. In this article, we explored how a basic modal component (CustomModal) can be reused and extended to create a more specialized modal (DeleteContentPickerModal). This pattern helps developers write cleaner, more maintainable code, which is essential for scalable React Native applications.
Top comments (0)