Instagram Stories - “Can it be done in React Native?”

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments

Hopefully this implementation works on Android too

👍︎︎ 8 👤︎︎ u/dumbSavant 📅︎︎ Oct 29 2018 🗫︎ replies

super cool, thanks for sharing will! 😄

👍︎︎ 3 👤︎︎ u/NaveNocab 📅︎︎ Oct 29 2018 🗫︎ replies

Nice!

👍︎︎ 2 👤︎︎ u/tequiila 📅︎︎ Oct 30 2018 🗫︎ replies

Watched the whole thing, I loved it!

I noticed you have purchased packages. Are there free alternatives / would I be able to get away with not buying them since I just started RN development. I’m using Expo as well

👍︎︎ 2 👤︎︎ u/therefai 📅︎︎ Oct 30 2018 🗫︎ replies

It's different instagram :))

👍︎︎ 2 👤︎︎ u/vuhoanabc 📅︎︎ Nov 08 2018 🗫︎ replies

Actually, you can do it with Animated already (without trigonometry knowledge).

Challenging part is, what if I have 100+ scenes including photos and videos, can I load contents synchronously? I think this is not scalable like FlatList (recyclerlistview or what it is)

👍︎︎ 2 👤︎︎ u/ilevye 📅︎︎ Jan 21 2019 🗫︎ replies
Captions
hello react native developers what is going on welcome to can it be done in react native this week we are boosting on social media cred with our Instagram stories hello guys I hope you are well a movie I'm recording from beautiful Zurich Switzerland I would like to start with a huge thank you for all your support to this channel and a huge thank you for all the research that some of you guys are putting into each episode I'm really blown away by your contributions and I would like to send a special shout-out to my curse and the man himself from react native SVG not only for answering my questions about react native SVG and native animations I'm really excited about what's possible to do in in the latest version of the package and I'm really looking forward to get it in the upcoming export date but also thank you for proposing an alternative solution to the Sun cloud you play your iPod I linked the snack in the comments of the video you can check it out thank you so much I'm so grateful and I'm learning so much from all the research you guys are putting into H episode it's it's absolutely fantastic and this week we are looking at Instagram Instagram stories and more particularly as a transition effect between Instagram stories so you see when we go from one story to the other it's like a cube rotation and I'm really excited about this episode I'm really excited for two reasons the first one is that to me this transition effect is absolutely iconic I remember in the early 2000 with the project Looking Glass on Linux that's you know everyone one of the transition the cube transition effect I was absolutely mesmerized by it I think it's a very cool effect and it still used a lot on Mac OS 10 I believe certainly and keynote I think as well you can switch from desktops using this transition effect so it's an absolutely iconic transition effect so that's exciting I think that we are trying to to do it in in react native and the second reason I'm very excited is because I've never already done any geometric transformation in react native nor in web development no in CSS so finally I get to do some 3d style transformation I'm really happy about that so how would we do this in react native I first thought of a very simple transformation which I can draw here in sketch so if this line is of your pot view from above I put some random value let's say found rod if this is of your part viewed from above and I could be a line and I'm gonna make it I don't know maybe a read and a bit bigger and so let's say we see a story of you from again viewed from above the translation should be pretty simple and I'm going to write it down I mean first we translate from on X from Earth of the web so something like does not show me exactly what let's say something like this make it approximative and let me write it down so we are translate X by we divided by true you okay and then we rotate Y by 90 degrees I can do it here okay perfect so rotate you and then finally we need to translate by - we / - and we have the final position right from one side to the other and so translate X - we have / - I love by the way the fact that we can express such transformation as a sequence of transformation I love this new API from react native transform I think you can express a fairly complex very very complex transformation very easily as I I just love it I think it's a great API so I run this transformation and it looked really really splendid and immediately I was like oh yeah it's because I need to add perspective in order to to see a 3d effect and what perspective is is the distance of the viewer from the viewport and I can draw it here so triangle so the weave is the weave of the viewpoint 400 and then the perspective so the ID of this triangle is whatever we can put any value we decide also the effect should look like so we decided distance of the viewer from the viewport remove this guy and I can use a fancy this is a viewer and when I ran this transformation it looked race trans as well as we look better it looked 3d but then something really strange happened which was very obvious we saw that faces of the cube with sometimes for some position cutting the field of vision so the field of vision is whatever is in this triangle set by the perspective and for instance maybe I can do it quickly with some just random value if I translate by let's say nineteen eighty degrees and maybe I'm at this position I just just use a proximity values but you will see the face cutting the field disappearing part of the face disappearing from the field of vision and it looks very strange and so I was like that's easy we just need to rotate instead of 90 degree to whatever this angle is and so what is this angle we can get it using trigonometry because again if I draw the perspective eeeh this line so we can look at right triangle yeah and so this right is a perspective this side is at the bottom is we've divided by two so we know that let's call the maximum rotation on angle a so we know that the tangent of a equals aspect here so opposite side they are spective / adjacent adjacent side which is we've divided by two kula so we have therefore a which is equal arctangent of yes active / web / - okay and then if you run this translation this transformation it looks great you have a cute transition everything looks as expected but the faces of the cube not perfectly touch each other which i think is okay for most effect but on Instagram they touch each other so we want the faces to touch each other and but already this transformation would you know you might consider it to be good enough it's very easy to do super so yeah I'm changing it rotate y2a so super performance super easy to implement so you might really love this solution already that solution number one but on Instagram they touch each other so I was thinking how do they you know how can we calculate an extra translation so they perfectly touch each other every position and there is one case so for which it's very easy to calculate actually the distance for which you need to touch and it's when they meet in the middle of course so if I where's my just maybe make her another so we make another story so we're is from red okay I'm gonna make it red bigger maybe yeah so if this is a story we know that let's say they meet in the middle so a / - I put 30 persons not 40% maybe 42 depending on whatever you're setting in in the perspective value but let's say I said 30 degrees and the meat in the middle so this distance is will divided by four copies yeah I have minus 50 degrees so after rotation we have something that looks I mean the proportions are not correct but it looks like this and in fact you could run this transformation that's how it will look like and then we have the final translation and at this position again it says it's translated by we've divided by 4 by 1/4 so you should have again this distance here is we've divided by 2 so it should look something like this and you did it does look does look like this and we need to calculate what's missing here so they meet in the middle and I can write we need to calculate maybe I can draw it or so I'm not sure if I I'm using the best tool to explain this but here put it so we need to calculate this blue line eeeh and again yeah we can use trigonometry we know this angle is a divided by two the wave here is we've divided by four so we can calculate X which is the red line starting from ear-to-ear plus the blue line and then we need to subscribe this part which is we've divided by four and this is a special case because at this position we know that the distance here between this intersection point and the perspective intersection point to the viewport is equal to this the distance on the other side that's the only time where they are equally distant from the point of intersection with the perspective so it makes enough really easy to do and in fact we can do it here so we know that continues of a / true each course adjutant side which is we've divided by four / X and so we know that x equals we have / 4 / question use of a / true no sorry yeah and and then we need to subtract this part which is we've divided by four so if we use this value we know that let me just check that this is correct yeah that's correct so we know that yes they will in the middle perfectly touch each other but since we use react knitting encapsulation and interpolation in rag native is linear and we would go from this value to essentially zero at the end of the rotation we're going to use linear interpolation but this function doesn't look linear so let's plot to see a bit or it looks like to see if we can use it and so I'm going to create a function f X so this is X this is also ex I mean I can remove it doesn't matter what we're interested in is indeed the casinos value and I can just you replace a by its formula and we'll divide it by two I mean can remove it and yeah its aspect if divided by X which is like you know any random value may be found right let's plot plot F from zero to with let's say 200 so you see it's it's not as klein right but almost so so I think we might be able to get away with it and if we use this solution the two sides would touch each other perfect in the middle and then always look like the touch each other but you will see the geometry of the cub cube cells like a changing in fact I've tried it and you only see the deformation if you know what you're looking for and regular user is unlikely to to notice that because we are using linear interpolation for this function it's for some position it doesn't look like a perfect cube so solution 1 the faces don't touch each other but it looks great solution to they touch each other but for some position it looks a bit the translation looks a bit weird barely noticeable I would say unless you really know what you're looking for but on the Instagram it's pixel perfect right it's there's no everything is perfect and this is can it be known in reductive so we want the pixel perfect solution and I really scratched my head to to find the pixel perfect solution because here we have a special case with the distance like we've divided by 4 is none and I was thinking what's the general formula to compute you know what this is a missing translation for the faces to touch each other for any position and this means that we also can change the structure of a react native code because instead of using linear interpolation where I'm going to use set native props so listen to animation values to compute exactly what should be the translation and then set the translation using set native props which is very efficient because ok we'll run JavaScript code but nothing on the react native site like no rendering we just execute a JavaScript function which is extremely fast so in terms of performance there is absolutely no impact and yeah we need to find the formula to compute the distance many for every cases and so I really scratched my head to find the right equation so we and let me draw it on ya on a separate triangle so you see the base is the view port again view from above and the chuseok sides are two stories and they meet meet each other in at some point we don't know where and what we want to calculate essentially is this distance here like any of the two sides also when the base and I was thinking how can we do this maybe I can name some put some naming so we know that the bases we've divided by two so we know actually about the distance for any puss the true faces always that we've divided by 2 distance apart that's this information we have this is X value we are looking for beside let's say this one can call it y and I was thinking so trying to to find a way to to calculate it X we do have our own values which we know every hungers for this triangle so we know that this angle is alpha and alpha from essentially zero to a which is a maximum rotation angle we know that I was beta alpha I mean if this angle is alpha a beta sorry a plus beta write the complementary which we know that these two angles are complementary to the two eight so this means that better equals a minus a you and then we have a gamma here you you which is 180 minus bata - so based on the position of the we know every young girl for this triangle we know the distance from the base and I was thinking maybe there is probably because we know all the angers and we maybe there is a way to compute the ID of the triangle which will allow us then to calculate X and what I found so a Google Wikipedia [Music] we turn and fianlly you nope this one you and maybe if I in English if I go girl for the area of triangle so we have this formula but which we can that's not the one we read is interesting to us I'm checking French because I originally associate in French [Music] Allen film yeah so yeah we have couple of formulas to compute the their ass for triangle and this is the one that but is interesting to us which is so I can maybe so a bee so two sides that make an so half of one side multiplied by the other times the seen use of whatever unworthy side mix which means that you can go back here which means that s equal one and earth x times y y times x times seen use of this I made a mistake here is gamma you you you you and then we have a say for alpha which is we have / true you times X times seniors alpha and then we have so seniors better time X yeah so that looks good in fact maybe I can copy it here okay and so from these equations we can select I think if we use this one and this one the Y is gonna simplify itself and then we'll have x ik or something so let me let's see it not sure so we have this one is equal to this one which means she knows x times gamma equals right one and a half Y is simple in itself so which means historic was measuring X equal this divided by a since gamma and we can use this formula now to compute so we have X right and then we just need to remove Oh we can just need to remove whatever is the translation but this is the distance this distance here so yeah I can just taste it okay so here we have free free solutions again - so from the simplest to the oddest from the less precise to the most precise so the first solution is to apply a basic transformation it's gonna regret but the faces won't touch each other then we can compute the value we're touching the middle which is almost and then use linear interpolation and this it's almost a linear in town it almost works basically and you can barely need noticed but the linear interpolation is messing up the cube at some position and then there is a first solution where we listen to the animation where you use set native props to set exactly the position where the cube should touch and which is this formula that we we just computed because now we have X so we know exactly we have to move the face of the cube so what do you guys think can it be done in a react native let's have a look and before we get started I would like to let you know about react native elements react native elements is a premium starter kit for react native for iOS and Android it contains 80 percent of what you need to get your project started so from static typing it's es Ihnen horse react notification lots of UI components you have the list here which are organized into different categories social media food music lots of beautiful UI components you can use and really a strong boilerplate this is what I do I use for every of my new react native projects I keep it up-to-date with the latest version of Expo latest react api's latest best practices so if you have a new react native projects coming up I recommend you check it out you can try it on test flight using 5s or Android either by downloading apk or using the x-bow client so that's react native elements and I hope you check it out at react Matic door show up slash elements all right guys let's get started we we did the half part we did the math now that we have the map it's time for the fun part we just need to do the programming and basically the part one is missing is a layout because we know how to compute all the values but now we need to do the layout which is very easy if you're a subscriber of this channel you know you know that I love this technique of using a transparent scroll view and then using the scroll view to drive the animations of of the view below so if we look Kenya to story transition we can just overlay each story on top of each other put a transparent for you of all the stories and then use it to drive the animations we just calculated before and so this is you know that I love this technique of using a transparent scroll view I use the I used it in previous episode it's something that I learned by looking at some examples built by brain fattening and I love it because pan responder API is very low-level API and if you use a scroll view it's very easy and you get a lot of things for free you get the whole gesture and link for free and you get also the snap snap Twin Tower which you see you have also in Instagram so if I remove my finger it snaps to one position or the other and you can also set up or fast you want this snap to happen so you get so much for free we I think it is just great and snap to interval or doesn't work on Android for the react native versions which are shipped with Expo but in the later gosh not native it it works on Android as well so it's just I think a great technique and we can express a lot of complex gestures very easily with with the transparent score view so let's have a look we I created a new project using create recognition app I added some data which allows stories so it has an ID an image for the source user and an avatar for the user and then I up component I just essentially learned in order images so we're going to create a story's component and give it the stories as parameter just in false stories what nice so your crate finance fall down so I'm creating this tourism okay and so we get the stories as property oops sometimes made the stream source which is a number use our name either user is that which is restrained use our name which is number no how about ah okay No so you can create you container flex one background black okay and so this container contains two things or stories and the score view so I can also import score you and then we have our stories you and we're gonna use animated module so it's the animated view because it's the face of the cube which I'm gonna animate and then we have the story component give it a story as parameter bring the key which is going to be the story ID we position it absolutely okay that looks good I need to create a story component very quickly I'm going to do something very simple for now and yeah let me just display the image for now I'm gonna do so extract the story and source from the story and just recon the image and position:absolute I think it looks good and maybe for the plate of since I always use the same force curve you let me see if I can cut and paste from a previous example we did knowing this one we thought she was a rebel perfect visas or the boilerplate I need so I'm gonna just cut and paste here so a reason tall that's correct use native driver so we need to create X animated value and we are going to initialize it here okay bouncies first we can remove em perfect this one is good this one is good container style so the weave is width times the number of stories so story is that length and the way we can get from the dimensional your get x-men to extract here okay so let's see how it looks like you that's different I'm gonna need to send it to me by email quickly okay sorry but not nights would welcome free No now the pot is wrong something Oh and try Michigan you okay that looks good now sorry about that okay you why it means the firsts so let's see taxi all okay here perfect you so while this be to be stuck somehow okay so that looks good on screen yes that's perfect so we are this morning which because we need to use and make this curry so here we have all the stories overlaid on top of each other very cool and now we need to animate them and so for each story we have the index and we can do style this get style with the index as parameter vests will allow us to compute order interpolations we need for this particular story to get style and so we took calculate an offset which is the weave times the index right so it means that if we whisk work from zero to weeb so index is zeros whisper from zero to weave then for the next one was called from we've pressed to weaves and so on so that's the offset and we can calculate so we have right if I go back to the sketch file we have three transformations and we can calculate the input range from these transformations which is offset - where / - to offset time is a way of directing virtual yes index L can and this is mine okay okay so free transformations let's go i okay we need to set so we have the wave here we to set some perspective we can set it to be equal to the wave but doesn't matter could be like let's say phone rod and and then we know that a equals this guy yeah so Matt respectively I did buy you / - that looks good perfect okay so free translations so first translate x equals and we are x here which will extract from the state now Exeter poor late inputs ranch boot range so we translate on - we've divided by two - we've divided by two and extrapolate clamp because this is only right because of the offset if we go outside the bounds and good friend we don't want any transformation to happen so extrapolate clamp so that's our first transformation the second one we said we rotate from - eh - eh so we'll say it Y goes home yeah yeah I think that's correct - eh - eh no why is it yeah that looks good so let's rotate Y and the final one which we're going to call translate 1 equals we've divided by 2 minus we've divided by 2 so we can write down this tile so start absolute feel transform so it's an array we need to also add perspective translate X rotate Y oops and translate to X equal translate x1 okay it's absolute field object and maybe it's better if I do it like this so roti Wiseman rent with the units you you oh and kay-kay his is one is it from a - - eh it is direction yeah perfect so we see where is cube now running and you see sides with black lines or sides on touch each other maybe you can make the perspective a bit smaller maybe 350 we should see it a bit better and so let me I can remove this one let me add some styling to the we can get a better idea so I can import say fairy of you you and style container you yeah so we see it a little bit better now and we can even add some food maybe you you what does it look like on the Instagram app yeah we have laid a big show icon bubble icon so you can do this I could name come up white sighs I don't know let's try 28 I'm gonna use the feather library because it's my favorite library icons flex direction or you see we stopped at this position so it means it's missing the snap to interval which okay let's let's do it later justify content spacing only nine eight ten center [Music] soon no it's not in the latest it's not in the rationalize shipped with message circle okay yeah drink it up case what looks pretty good huh snapped winter world boom so it's we've yeah it works and we want to maybe have a faster momentum so react native you you this iteration rate you you yeah much better okay so here it it's already pretty good and very simple to do right it's not much college as you've seen one thing we can do nice to add the sides touching each other in the middle position so this is solution one now we do solution two and this mean we're gonna need to add an extra translation we computed the value already and that's this guy you slate X course translate to and because the amplitude here is from - we have to plus wave and not from zero to with we need to multiply this by two so it's really two times we've divided by 4 divided by math question use of a dividing by true yeah - really made by Shah which actually okay I mean this simplifies to we've divided by two minus V divided by true and now we can create translate to she's interpolate in French extra six truck extrapolate you so look nope you yeah so you see but actually yeah so you see as a science touch them touch themselves perfectly but but actually you can barely notice it but you see you look at at the bottom position how do you say the face of the cube translate a little bit too much full of them you can barely see it but it's it's noticeable maybe if I do change the perspective value yeah you can barely notice it but I mean the user would never would never see it actually right and actually also if you Nemechek you it looks pretty good so that's solution number two and now and number three which would be pixel-perfect okay so for solution number three the first thing we need to do we're gonna use Center native prop on the animated view so we need the ref and so I'm gonna create an array of frets so we can sign the ref for every stories and yeah we're just gonna style because we are gonna set the style using set native props but the only pot of tea.i we put set is style sheet so good feel that's good and we can create the storage array which I can do here and in the constructor we need to initialize it with the size of the number of stories so I'm using react create ref so I'm gonna create a constructor and this stories equals props stories map and for every story and I don't need we use react create ref so that's perfect and now in component so basically we okay we're gonna create so on component in mount when you listen to the values of X so add listener at least not as a method of animating dot value and then basically for yeah so for each change on the value we need to go full every other stories to the reference is here story and then we can just copy copy pastes basically the content of this function I'm going to paste it here so offset is good input range is good translate text is still the same but here we get it synchronously using good value and it's X is yeah that's good so I can just expose this state okay same here and since we compute you remember here and I was like in stating to your subtraction or not so since here we'll really calculate the side of the young girl I think we don't need this one anymore okay and this is translate translate chew I'm gonna call it Y and comes translate true equals if so we need alpha and we can get it from rotates why what a do a substring from 0 to index of reagent and need to pass it as number okay alpha equals any I'm gonna use absolute value just to make make it safe and we know that beta equals alpha plus beta equals a so beta equals it has a a - on phone okay and gamma my maybe not allowed to use our damage alpha beta and gamma equals at 180 degrees which is pi divided by 2 minus alpha minus beta so exci cos we divided by 2 times seniors beta divided by seniors gamma and now if the past angle is greater than 0 we return minus X so X let's a look oh I forgot to call super where I index six sorry okay oops nothing is moving now yeah of course so this is our style I can remove this one and I can use story current because we use create reoccur a trap set massive props Tyler key super strange I think this is the order of translation and 180 is PI not motivated by true still doesn't look good at all I think this is pass float not pass int and yeah so I think I know what's missing because you see he has a face which is not moving is in the viewport so I need to remove - with do I need to know I should be good it is and so here you see the corner is picture-perfect so for each frame we not each frame value we compute the position and it looks great and yeah it's really like a perfect tube whoa so but I think it's a really cool effect I hope you guys found the video useful if you are examples you would like to for me to do in the channel please send it to me by email I will put the email in the video description I will also put a snack for this example and yeah thank you so much for watching and I talk to you guys soon bye
Info
Channel: William Candillon
Views: 19,137
Rating: undefined out of 5
Keywords: React, React Native, Instagram, Animations, JavaScript, Can it be done in React Native?, 3D Transformations, CSS
Id: aftCqtnN6Tg
Channel Id: undefined
Length: 65min 55sec (3955 seconds)
Published: Mon Oct 29 2018
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.