Building Instagram Stories
React Native UI Challenge #3
It’s finally here! If you missed the first two challenges click here and here to check these out first.
Instagram announced this new feature a couple of weeks ago, which many say is copied from SnapChat. So I thought, I’ll just copy a copy and build it in React Native. 😳
MobX
To be honest with you, MobX wasn’t really needed this time. I used it anyways, because it makes life (at least coding) much easier. It separates UI markup and app logic, by creating stores. By that it also reduces the amount of props that are passed down the component tree.
Issues
3D Animations
This is really frustrating in React Native.
The animation used when swiping through stories looks like spinning a cube. In the web world, there are many tutorials (e.g. this one) out there that show how to create a 3D cube using only the power of CSS. You just need to do a few rotations on x and y axis and a couple of translations in all three dimensions. And you also need the magic property transform-style: preserve-3d. But… this property is not available in React Native. Someone asked for this in SO and in this github issue back in June, but without any luck. On top of that, there isn’t even the translate-z property (see this issue). My last hope was the property transform-origin. But again, it’s not available in RN, although there was a pull request for it, which never got merged. So yeah, this was quite disappointing.
TLDR; 3D Animations are impossible to do in React Native.
Hey! My name is Yousef and I’m doing UI challenges in React Native. The idea is to recreate UI designs from Dribbble screenshots and popular apps using React Native. If you like it, please hit the ❤️ button and follow me for more challenges!
