Soundcloud Audio Player - “Can it be done in React Native?”

hello react native their lapels William here for a new installment of can it be done in react native and this week we are looking at the SoundCloud audio player hello guys I hope you are well thank you so much for the great feedback on the last video and this week I really wanted to look at the song cloud app I was lately using it and especially I was using this feature to move back and forth into the song and I was wondering how would we implement this in react native and so I find this example particularly interesting because two weeks ago if I go back to my snacks here we implemented this effect which is using a mask so we have true tab bars on top of each other and we are moving the mask around to get this nice little effect and so obviously if I go back to the Sun cloud app it seems to be actually exactly the same technique we have two waveforms on top of each other one which is orange one which is white and we just were slide around the mask to get this nice nice little effect so if we've actually implemented this technique already why is why am i excited why is this interesting I think it's pretty interesting because two weeks ago we used masked iOS view or iOS masked view so which was only working for iOS and I didn't really investigate how we could do this 100 and I thought this would be a chance for redemption and we could actually retry to do this for both iOS and Android and the way when you can do this I was able to download the waveform from SoundCloud so if you use you know just the simple web client for SoundCloud and you listen to the API calls you will actually get data for building the histogram the histogram we're gonna bid manually we're not gonna use differ here or anything like that because it's really simple sighs nothing nothing fancy to be done so we can easily draw it ourselves in SVG and then we're going to use a clip path to clip so we're gonna put two histograms on top of each other and we're going to use we're gonna keep one of them so the ones orange one and so we will put the waveform into a scroll view use the driver also scroll you to set the position of the clipping path and so again simply translate it from one hand to the other and this should work for both iOS and Android so let's have a look guys before we get started I want to let you know about react native elements which is a premium starter kit for react native you can use it for a new react native project on both iOS and Android we implement tons of components of you I components and they are organized into different themes and we basically try to provide you with the best boilerplate you can have for new react native projects state of the art he has neutrals flow types react navigation having like all the you know de facto standard libraries set up like the latest version of Expo and so on this is what I use for any of my new react native projects I always try to to keep it up-to-date with the state of the art if you have a new cool react native projects to do you might get some value out of it you can try it on iPhone through test flight on Android who the Expo client I'm gonna also add a link to the apk and also here also public test like link so if you have a new react native project coming up I strongly recommend you check it out alright guys let me get started here I created a project using create react native app and I don't know did some data but I just sniffed from the Sun cloud web client and I'm particularly interested in to this file which contains the waveform so that's given basically by by the Sun cloud API and have like cover picture I can use so before we build this program we're going to do some basic layout so I'm gonna create a container that will take up all the screen and we can use image as a background so it's in data slash coverage peg and set up some style as well so he needs to take cup or the screen absolute field object and we need to set with the world and I'd rule for the skimming of the image my convey oh sorry all right and now maybe just two to fit the layout of Sun cloud we're gonna put one sub container let's call it progress which we take up off of the screen and we'll be at the bottom so I can do justify content flex end so we have alpha of the screen at the bottom in fact I can even check by putting background color red just to check quickly looks good and then I'm gonna put a view which will be Center in with a centered in this bottom earth and this will contain the scroll view and the scroll view will contain two histograms on top of each other so we have a score view and then inside we have two instagrams we're gonna create a component that we will call webform and we have two and down on top of each other so I'm gonna wrap one into a view which I will put them to an absolute field so we need to import is forleo component we need to create a webform component so far maybe we'll just return and then to you okay we need to import this guy all right so now we have so this is the data we need actually we're gonna pass this parameter of all of the component maybe I just removed the background color maybe a close this one you so let's import the data waveform from take a /y founded Sun and we can pass it as parameter all right so if we go back here one property is the weapon form and it has three properties we've ID and the samples so we've is the number of samples ID is a maximum height of of a one sample and then we have actually a sequence of sample so we write and maybe another parameter so we know and I think I should have a screenshot here so yeah we have a screenshot of the son club player so two waveforms on top of each other and one is white one is already right and yeah so let's have let's add a color parameter so this one the one that in the background will be white and this one will be I'm not sure which color let's have a look we also have a color palette ah okay so now let's try to build the actual waveform so the histogram I think it seems to be pretty simple I think we don't need like differing or anything like that I think we can build it manually quite easily let's try it out fully I won't fail so we're gonna import SVG from export from the s e-g so we're going to use oops the rectangle component okay and we need to set up some sub constants maybe so the width of each bar maybe we can try three four pixels I'm not sure that's great we for pixel and then we also need the margin in between we can try one pixel margin one pixel and then you see between the twister browsers also imagine you know that seems to be one pixel as well yeah okay so we can compute the wave and i25 eg the beam is okay so first I need to extract the property so the wave form and color from the properties and weave is way from weave times the actual Weaver to display one one bar so it's gonna be the wave plus matching and right the I teased out of the waveform plus this pixel in between and Plus this the bottom bar the bottom bar which is like the golden ratio of the one at the top so we have plus bow margin one pixel plus the web form I'd time 0 61 okay and now we can map all the samples so wave from samplers but so we have the sampler and index which we are going to use as key actually and we're going to draw a rectangle for each sample so the height is the height of the sample is a sample we need to lose key of course then we need to set the X&Y and I think so yeah we're going to use so for the expose it so X position so the Y position may be first so the Y position is the maximum height minus the actual height so wave from ID - sample because we want them to be a line which is the same the bottom at the same position we need to subtract the difference and X it's just going to be three times the width of one bar which is bar with brass margin I think and then we can add color as a feel see if we get something feel eCourse nothing is shown right we've maybe in some live as well which is BA we've it's better if I do it like this so we see here we have the East Oh Graham so you see here we don't need different spray pretty straightforward now we need to do the bottom one so it's very similar go over each oh actually I should instead of doing this twice I could use react fragment to do this only once so I'm gonna do react fragment let me try I think we should walk out I can set up a key and I need to return seems to work and I need to return to rectangle so I have the top one already and now I'm gonna do the bottom one and the bottom one starts at waveform height plus the margin [Music] right no no it's not correct but so the weave is the same color is the same but I need to add some capacity maybe let's just try some random value so X is the same and Y is is this one plus so actually this one times two plus the margin I think let's see did I just crash everything bundle doesn't load it does okay sure one contact so I seem to misuse what's this one to remove maybe the keys okay so I'm doing something wrong yeah oh sorry because if I go back to the screenshot yeah the bottom bar is reversed so actually the starting position is always the same which is the 8th of the waveform plus plus the 1 pixel is about margin so that's all why X should be the same yes perfect and opacity we can make may be 0 5 okay so that looks pretty good and I think we need to remove the bounce effect on so were view we're gonna make it original tall and low advancing try with you see you can scroll nicely over hello the whole song now we need to add some offset so it only starts at the middle of the screen so let's use the dimensions from react needs here we use already wave so I'm going to call it window wheel and then we're gonna create offset variable which is out of the size so here's a total we we add the offset to the total wave and we add it here as well and here as well it's a look all right pretty good okay so now we actually need to so we're gonna need to use the driver from the scroll view to clip the top to clip the top Instagram and then animate it so I always forget the pans I need to use in the scroll view for unscrew property so I'm just going to look look it up and copy and paste but first of all maybe an imported animated module so it's animated the score view and then actually have my snack here where I can use so I'm going to need to create an animation value in the state for X so that's all good couple of parameters here we don't want to show that and I think this is all good so now what we can do is add an extra property called progress where we pass the x value so for the waveform at the bottom we don't pass this property because it will never move and for the one at the top we use this property to clip accordingly to the position of the score view so we have a new property called progress which is optional which is a tree so an email so now we need to create a clip path so there are two ways to do clipping I mean masking and I mean those two mechanisms which are actually different in SVG clipping and masking yeah we can use clipping and we are pretty lucky because masking is not supported yet in react native SVG but for this case clipping is good enough and so this is what we're going to use so I need to import def component I think it's called clip - yes and some great yeah some definitions I'm gonna call it progress and it's gonna be a rectangle this is a weave so the whole wheel so we're right sorry and and so we're gonna move this one so we're gonna use to clip I think the parameter is clip path and we can give it the URL progress and so from every rectangle so this one covers our histogram by default but then we're gonna move it we're gonna move it along according to the score value so this one is gonna become an animated rect which I can create yeah uses animated create animated component I think I think that's name seems to be this seems to be correct and now we're going to need a special value for x which we are going to create using interpolate I can't just trigger it X maybe so if the progress viable is not set X is at zero which is a default so we don't touch anything and if not if there is some progress set we're going to interpolate to guess the values so input your input and output range so at 0 we translate the mask completely to the left so basically if we don't see anything from from the top we only see basically the background tab bar but we need to add the offset so this is why we started unit right at the middle of the screen there's a progress bar so when we scroll instead of translating always right at the left of the screen we add the offset so you can actually see the progress so we're going to add the offset and then once we scroll to the wheel then the whole the whole background Instagram should be covered so we act should be zero so let's a look and I think so which doesn't work and I think I know why because for rectangle for some reasons here we need to put a string value for this to work I think with string values it should work for some strange reason no doesn't work is it because I think because we use we animate this X this X for property we cannot use an active driver that's not something that is reports its but might be why it doesn't work yeah so you see it works works nicely and so you see the progress actually here is very strange so our operation is not it's not very good I think here because the progress doesn't seem to end at the middle of the screen and then you see like the more I go in the song and at the end so it looks a bit scrap and actually I think I know why it's because yeah we don't scroll until the Weaver with called when we are this position at the end we are not at the scoring value is not the weave of this waveform it's the wave of the waveform - the wave of the screen so we can remove this guy so where yeah this variable but then when when we are this position we don't want to be at zero we want to be at zero plus offset so we want to be at one set no actually we want to be at the okay got it so we want to be at zero at the end but then we will need to okay let's look first so now we should be able to squirt in to the end but so you see now it's also like it's a bit weird and then but we can scroll to the end but you see it's very strange so what I want to do here is I'm gonna keep it linear a bit before of the end and then at the end once like so this is the end I'm gonna create an intermediate value which is going to be so brief - whip of the screen and I'm gonna buy 20 cents remove the offset I guess it's a bit random value and so it's going to be a step so we keep it linear as long as possible basically so at this position what should be the translation - hour - so it should be the wheel of the screen actually so it's a bit random but we actually do know which position we have at this point so which is good I think because until this point so from zero to this point the it should be completely Nydia and now I need to use a string value up sorry like that all right tonight should be linear till almost the end yeah you see and then we can scroll to the end nicely and go back as well all right so I think I think that's it obviously if we look at the SoundCloud audio player there is much more going on but I really wanted to ask to look at this recipe especially since we use something similar two weeks ago but it will only work on iOS we should work on both iOS and Android and you see was really fast to build histogram with like manually basically and we use clip path from SVG and also some animation capabilities from react native SVG even though we couldn't choose unfortunately the native driver but I think it's still still pretty good let me know what you think also if you have examples you would like to see implemented in the channel like from real world apps and you are wondering can it be done in react native please reach out to me and I'll make sure to to have a look and see how it can be done in react native and thank you so much for watching and I will talk to you guys soon bye

Channel: William Candillon

Views: 18,182

Keywords: React, React Native, Animations, SVG, JavaScript, Can it be done in React Native?

Id: KrsBXKr6gdg

Length: 35min 31sec (2131 seconds)

Published: Wed Oct 10 2018