I have FlatList where each list item displays a user. Each user has an audio file which can be played when the user clicks that specific item. All of this is visible in the same screen (just imagine a list with many ‘play’ buttons if this is too confusing).
Right now, I call Audio.setAudioModeAsync on every list item’s componentDidMount() function and load the user’s sound. Also, all audio functions (like play/stop) are implemented in the corresponding list item. When a user clicks ‘play’, the ‘parent’ (the component that contains the FlatList) gets notified and keeps track of which list item is playing an audio file. If the user clicks on another one while the previous one hasn’t finished, the parent calls the ‘stop’ function of the previous list item. So the parent is in control.
I am concerned both about performance and correct design in general. Is this the right way to do this or perhaps the audio controls should be at the parent? The only disadvantage I see right now if I move the controls to the parent, is that there will be a delay when the user clicks ‘play’, since that is the point I will have to load the sound (previously all sounds were loaded inside the list items).
Any advice?