mirror of
https://github.com/mudabbir-ahmad/Project-MAD-crudler.git
synced 2026-10-07 20:40:20 +00:00
Added Render component in UI folder
This commit is contained in:
1 parent
54e73d32e0
commit
2e05fc9d6d
2 files changed
+26
-1
No files matched your search
@@ -0,0 +1,24 @@
|
||||
import { useRef } from "react";
|
||||
import { Text, StyleSheet } from "react-native";
|
||||
|
||||
const RenderCount = ({backgroundColor = 'dodgerblue', fontColor = 'white'}) => {
|
||||
// Initialisation -------------
|
||||
// State ----------------------
|
||||
const renderCount = useRef(0);
|
||||
renderCount.current += 1;
|
||||
// Handlers -------------------
|
||||
// View -----------------------
|
||||
return (
|
||||
<Text style={[styles.count, { backgroundColor, color: fontColor}]}>
|
||||
Number of renders: {renderCount.current}
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
count: {
|
||||
padding: 5,
|
||||
},
|
||||
});
|
||||
|
||||
export default RenderCount;
|
||||
@@ -3,7 +3,7 @@ import { StyleSheet } from "react-native";
|
||||
import Screen from "../layout/Screen";
|
||||
import ModuleList from "../entity/modules/ModuleList";
|
||||
import initialModules from "../../data/modules.js";
|
||||
|
||||
import RenderCount from "../UI/RenderCount";
|
||||
|
||||
const ModuleListScreen = () => {
|
||||
// Initialisation -------------
|
||||
@@ -22,6 +22,7 @@ const ModuleListScreen = () => {
|
||||
|
||||
return (
|
||||
<Screen>
|
||||
<RenderCount />
|
||||
<ModuleList modules={modules} onSelect={handleDelete} />
|
||||
</Screen>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user