O'Reilly logo

React Native - Building Mobile Apps with JavaScript by Vladimir Novick

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Mock data and style application screens including animations

So now, after creating the basic navigation wireframe, let's style our screens accordingly. In order to do so, we need to get real data from the Twitter API, so our mocks will match the real use case once we connect our app to the Twitter API. I've started with a simple mock by accessing https://dev.twitter.com/rest/reference/get/statuses/home_timeline and pasting the example data inside the Home component. In addition, I also added a media key with the corresponding media array to the entities object. This was found after some searching for the media API in Twitter dev docs.

So now, after creating the data mock, let's take a look at our app and divide it by components:

ProfileHeaderButton ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required