This week we added sound to our piano app and made the white keys interactive using the <Pressable> component in React Native. We implemented the onPressIn and onPressOut functions to detect when a key was pressed or released, which significantly improved the realism and responsiveness of the instrument. To manage audio playback, we used the useAudioPlayer hook from the expo-audio package, allowing us to load and play sound files locally. This was a crucial step in transforming the app from a visual interface into a functional digital instrument.
return (
<Pressable
// Fires when Tap is Completed
onPress={onPress}
// Visual Feedback Start
onPressIn={() => setPressed(true)}
// Visual Feedback End
onPressOut={() => setPressed(false)}>
{/* The Visible White Piano Key */}
<View style={[styles.whiteKey, pressed && styles.whiteKeyPressed, style]}></View>
</Pressable>
);
}
I found this stage of the project particularly enjoyable, as the interaction logic felt intuitive and I was able to work more independently than in previous weeks. The repetitive nature of assigning sounds to keys was beneficial, as it reinforced my understanding of component structure and event handling. The way local audio files were imported and managed also felt familiar, drawing clear parallels with how media assets are handled in HTML, which increased my confidence.
The JavaScript and TypeScript exercises Diana shared were also valuable in reinforcing core concepts that directly related to our implementation. Revisiting these fundamentals helped clarify my thinking and highlighted that I sometimes overcomplicate solutions. I can see that completing this type of targeted practice earlier would have improved my confidence when approaching new tasks.
Overall, this week marked a noticeable improvement in both my technical confidence and sense of progress. Developing interactivity and sound within React Native strengthened my understanding of event-driven design and audio handling, skills that will be essential for building more complex interactive applications in the future.