Can you break React Native?

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments

WOW, man!

👍︎︎ 1 👤︎︎ u/[deleted] 📅︎︎ Mar 07 2021 🗫︎ replies
Captions
Being a developer can be boring at times. What happens after you've done it all? What happens when you've built everything there is to build? "breaking React Native"...is it even possible? I had to find ideas, experiments I could do to make an app break. I had to be creative. So here's the plan: I will create a button that moves all around the screen and it will randomly go into any direction within the screen size. For this, I have a FlyingButton component that is an Animated.View which should go in one direction than another every 500 milliseconds. So I have these two animated values, left and top, that will be set to random values and animated so the whole view moves around the screen and not just teleport. Then our main component just keeps creating new FlyingButtons, adding a new one every second. There's also a header at the top, just so we can keep track of how many wild buttons we put out there. Now of course one button won't crash an app... so we need more than just one. We need a lot of buttons. Surprisingly enough, it seems to need more than just a 100. Let's keep adding more. I honestly didn't think it would go this far, look at this masterpiece. More than 200 buttons, roaming freely. Isn't it beautiful? Alright, we got a breaking record of 251 flying buttons before it all crashed and burned. Not too bad. Let's move to our next experiment. We know that gifs usually consume lots of energy especially if you have quite a few on one screen. Today I want to create an infinite list of gifs...at least till the end of my phone's memory. For that, I am using the great Giphy API, where I'll fetch all the trending images from. Now, how about creating a list of let's say 10 gifs. This time it felt like slowly seeing my phone dying. That isn't a good feeling at all! But all right, now we know that it crashed after about 2,750 gifs. I didn't think it would still manage to get hundreds of these, so that's quite impressive. Anyways, we have one more experiment for today, so buckle up. To be honest with you, I kind of liked mixing animation with chaos from our first experiment with buttons. Also, i'm not quite satisfied with how fast it crashes and for this last one, I really want something that crashes much faster. So what if this time, we were playing with shapes. We can make squares, circles, rectangles that all randomly rotate in every direction. Now, because you might say I'm just trying to entertain and not keeping this a learning material enough, here's some code :) I have a Shape component that gets random width, height and color when created. And then I animate 3 different animated values in random ways: top left and rotation. I then use these three for my transforms that are just interpolating the value to something that makes the whole shape moving all around. Anyways, back to the REAL experiment, we'll begin with a mere batch of 100 shapes, to go easy on the phone and we'll slowly increase the number every second. Building up, building up... Actually, it's in these moments that I realize that I've never had so much fun with React Native! And, it crashed after 168 shapes, that's not too bad. It went pretty quickly this time actually. Okay, I think we can call it a success! Mmh, maybe next time! I think this was enough chaos for today. Remember to subscribe for hopefully more serious videos than this one (I promise). Thanks for watching and see you next time :)
Info
Channel: evening kid
Views: 2,520
Rating: 4.9178081 out of 5
Keywords: react native, react, animated, break react, break
Id: ilmT3HV6D7c
Channel Id: undefined
Length: 5min 3sec (303 seconds)
Published: Wed Mar 03 2021
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.