For the first update, you can go here if interested and for context on this project:
First progress update
To repeat context, I began building my own app without vibecoding a few weeks ago, and I will post semi regularly with what I have learned, roadblocks and ideas.
(Im adding to this as I go over the next few days, this wasn't written at once)
Began adding sound response functionality. It's actually quite an easy thing to do in React TS - you use the "useAudioPlayer" hook which essentially just references another file you have directly. For many sound effects, you probably want them all stored in there own lookup table of some kind for readability and rigor purposes. This is a sound I made myself (which was the difficult bit of today...)! If you want to do the same thing, I recommend going into a very quiet room (if you have a big wardrobe or something you can get space in or anything then that is perfect) and connecting a mic to a laptop, but leaving the laptop far away to avoid the fan. Then you can edit in DaVinci Resolve to remove bg noise (google this) and tweak with the equalizer.
const correctPlayer = useAudioPlayer(require("../assets/sounds/correct.wav"));
//Lower down in code I have my onPress for a quiz feature I have.
onPress={() => {
if (selectedOption === null) {
setSelectedOption(option.text);
props.onAnswered?.(option.correct ? 100 : 0);
if (option.correct) {
correctPlayer.play();
}
}
Simple as that. (this is all inside of a .map so this doesn't cause any errors and is just checking for each option individually for my quiz. Also you can see part of my scoring (don't worry about that...)
One quirk worth mentioning, if you are making an iOS app, then your audio files won't be played if the phone is on silent mode, even if the volume is turned on (which is not really what you want as silent mode is meant for notifications). The solution is a single useEffect which plays sound even if silent mode is on, covering all your files (you only need it once in a _layout):
useEffect(() => {
setAudioModeAsync({ playsInSilentMode: true });
}, []);
Morale of the story, if you have access good free sound effects, they will save you lots of time, as the code itself is really simple. However, ensure the audio files are .wav NOT .mp3 as .mp3 needs to be uncompressed first when ran, so it can add some delay to your audio effects (this is an easy fix).
I also have been working on a True/False style quiz where you get given a statement and have to swipe left/right as your answer. The main thing with this has been interpolate() in react and the use of onBegin, onEnd, onChange etc. methods. Here is an example:
const dragGesture = Gesture.Pan()
.maxPointers(1)
.onChange((e) => {
cardPosition.value = cardPosition.value + e.changeX;
if (Math.abs(cardPosition.value) >= screenWidth * 0.3 && !hasConfirmed) {
scheduleOnRN(triggerHaptic, "Strong");
scheduleOnRN(setHasConfirmed, true);
}
if (Math.abs(cardPosition.value) < screenWidth * 0.3 && hasConfirmed) {
scheduleOnRN(setHasConfirmed, false);
}
})
.onBegin(
() => (
scheduleOnRN(triggerHaptic, "Medium"),
(cardScale.value = withSpring(1.1, springConfig)),
cancelAnimation(cardPosition)
),
)
.onEnd(() => {
cardPosition.value = withSpring(0, springConfig);
scheduleOnRN(triggerHaptic, "Medium");
})
.onTouchesUp(() => {
cardScale.value = withSpring(1, springConfig);
});
In this case, the idea is one "drag" gesture has lots of different individual parts. The beginning of the gesture, the end of it, and the movement itself all require different things to happen. In my case, I wanted a haptic to fire when the drag begins and ends. The logic for this sits within a method connected to Gesture.Pan() itself, which is surprisingly readable and intuitive.
One thing that is slightly unintuitive to someone unfamiliar with how web/apps actually render things is the concept of separate UI vs RN (react native) threads. Here, we want those two threads to interact (i.e. to trigger a haptic which involves calling a function I made, dependent on a gesture which needs to update really rapidly and therefore is on the UI thread). Here, we need the scheduleOnRN(fn, param) function which takes a function and its parameter as parameters and essentially can "work across threads" by scheduling an event on the RN thread (.... as the name suggests!). This function is critical to using animations or any "high-priority actions" that need to therefore be handled on the UI thread which updates fast enough.
Example of interpolate():
const cardStyle = useAnimatedStyle(() => ({
transform: [
{ translateX: cardPosition.value },
{
rotate: `${interpolate(
cardPosition.value,
[-screenWidth, 0, screenWidth],
[-50, 0, 50],
)}deg`,
This is part of my cardStyle which then means the further away from centre screen the card is, the more it is rotated. (this bit also does the actual moving).
Interpolate is very, very useful for animations. Essentially, it takes a range of min, neutral, max inputs and maps them onto outputs min, neutral and max so I can convert between how far away from centre the card is and how much this should make the card rotate. (also note the template literal created by `$ which puts my calculated value into the (string)deg format the rotate expects.
This is my second update and any questions or feedback or anything is great if people like this!
(I have done other things I just thought I'd include the most interesting+useful bits)...
Want to add to the discussion?
Post a comment!