This week I added navigation to the app pages, which was an important step in making the app feel completer and more usable. To do this, I had to merge the pages I had already created into a new branch. This was something I had never done before, so I was quite worried at first. However, with help from Diana, I picked it up quickly, and I found that VS Code made the process much easier because I could clearly choose between incoming and current changes.
Adding the navigation was much simpler than I expected because I had already built some of the app structure into the buttons using <Pressable />. This showed me the value of planning ahead when coding, as the earlier decisions I made helped make a later task easier. I also finished the remaining pages and formatted them so that the whole app looked consistent. This was important because consistency makes the app easier to use and helps it feel more professional.
return (
<Pressable
onPress={onMainButtonPress}
disabled={!onMainButtonPress}
style={({ pressed }) => [
styles.card,
pressed && onMainButtonPress && styles.cardPressed,
]}
>
// This shows how I used <Pressable /> to make buttons interactive and connect them to different pages in the app. <Header
title="Home"
onBackPress={() => {}}
onSettingsPress={() => {}}
/>
...
<MainButton
title="Play"
gradientColors={["#8FC4FF", "#5FA8FF", "#3A86FF"]}
iconLibrary="Ionicons"
iconName="play"
onMainButtonPress={() => {
router.navigate("/pages/PlayPage");
}}
/>
// This code snippet shows how I used reusable components such as Header and MainButton to build the Home page. The MainButton includes styling, an icon and a navigation function, which allows the user to move from the Home page to the Play page when the button is pressed.I also spent time adding comments to my code. I decided to make the comments quite detailed, especially where functions are created or called. I did this because I wanted the code to be easier to understand if I looked back at it later. This helped me realise that good coding is not only about making something work, but also about making it readable and maintainable.
// BackHomeCard is a reusable button-style component.
// It is used for navigation actions such as returning to the Home page.
export default function BackHomeCard({
// This shows detailed code commentsOnce the pages were merged, I continued building the remaining screens within the navigation branch, as I was the only person working on the app at that stage. This gave me more confidence in managing the app development process independently. I feel that I am becoming more comfortable using GitHub branches, VS Code and React Native, which will be useful for future projects.
Alongside the app development, I also wrote a rough draft of my research report proposal after receiving feedback from the show and tell earlier in the week. This helped me think more carefully about how to explain and justify the project, rather than only focusing on the practical making side.
I also created a first draft of the app development slide and received useful feedback from Diana. I used the extra Friday session to help prepare the product for testing. After a group discussion, I took responsibility for writing the child-focused feedback forms. I created two different forms: one for the observer to complete and a shorter one for the children. I did this so that we could collect both detailed observations and instant feedback through Google Forms. This will help us understand how much the children enjoy the toy and whether the app is successful from the user’s point of view.
Overall, this week helped me develop both my technical and project management skills. I learnt more about navigation, merging branches, code commenting and user testing. I also gained confidence in taking responsibility within the group and making decisions that support the development and evaluation of the final product.