We'd like you to build the home screen of TikTok using spec below. Our goal is to identify how well you handle styling and building components in React Native.
Your time is valuable to us, so please spend no more than 3 hours on this challenge.
- A good understanding of the problem you're solving
- Clear and concise code
- Good design practices
- Code that is well documented and tested
- Proper styling based on the Figma spec
Clone this repo and create your own branch. Submit a pull request with your changes once you complete the challenge.
To run this application locally use Expo via yarn start
Using the data scaffolded in App.js, create the home screen of TikTok based on the Figma Spec below.
https://www.figma.com/file/TzvIDLE7h9NObl6KgBrPTm/TikTok-UI-Screens-Community?node-id=4%3A1061
-
Home screen which includes:
- A scrollable feed component using the feed api provided in App.js. Hint: use
feedImageto accomplish this. - A bottom navigation
- Grouped action buttons
- An info block
- A scrollable feed component using the feed api provided in App.js. Hint: use
-
This next section is optional. This is a free-form exercise that lets you showcase a more advanced skill, or lets you put your own personal flair on things. Let’s take one element from the Home Screen, and let’s build it up. Here are a few examples (pick one), or you can create your own.
- Add the ability to like/unlike a video.
- Add an animation to any element on the screen (button tap, scrolling text, loading animation etc).
- Add a share menu with a background blur overlay.
- Add routing to other screens when a navigation link is tapped (e.g. username, tags, nav bar).
*the screens should be blank, no need to implement them. Your choice!
NOTE We value code quality over quantity, so please focus on task number 1.