diff --git a/src/components/UI/RenderCount.js b/src/components/UI/RenderCount.js new file mode 100644 index 0000000..1fdce24 --- /dev/null +++ b/src/components/UI/RenderCount.js @@ -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 ( + + Number of renders: {renderCount.current} + + ); +}; + +const styles = StyleSheet.create({ + count: { + padding: 5, + }, +}); + +export default RenderCount; \ No newline at end of file diff --git a/src/components/screens/ModuleListScreen.js b/src/components/screens/ModuleListScreen.js index 0cbe4c1..7e8df26 100644 --- a/src/components/screens/ModuleListScreen.js +++ b/src/components/screens/ModuleListScreen.js @@ -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 ( + );