You sit in front of your computer with your phone wired. You change a line of code, and you can instantly tap through the updated application on your phone...

The application could be anything really, but if you are getting started with React Native and do not have design chops, chances are, that app's UI isn't shining.

You know interaction and UI play a huge role, especially in mobile apps. So you want to nail React Native's styling primitives and the exellent Animated API, and there's just one thing left... You have no design skills. You have no clue what to build, at all.

I've been there too.

When it comes to UIs, there are so many design ideas on the internet, made by designers, some for real apps, many never to be brought to life... You can browse them to get some ideas or just blatantly copy them.

So here are some resources for you to draw inspiration from.

• UI Movement is a curated collection of various UI designs precisely for people like us to get inspired. The designs there often feature animations, so that's a good pick if you want to practice Animated.

  

  Here is its homepage.

• Uplabs is a curated inspiration resource as well. Animated designs are present, but there's less of them compared to UI Movement.

  

  Here are its sections for iOS and Android.

• Dribbble is like GitHub for designers where they share their work and ideas. Unlike the previous two, it's not curated. There are still great designs there. No animations though.

  

  Here are some tags: #ios, #iphone, and #android.

• Pinterest is a place full of pictures of everything.

  

  Here are some tags for UI inspiration: #ios-design, #ios.

• Bonus idea: Replicate interactions from an existing app that you use and love.

Don't just close this tab now

You will not get far if you go over these websites and then... do nothing. Practice doesn't work like that!

I challenge you to:

Right now:

1. Spend 5-20 minutes scrolling through these websites.
2. Note just three to five designs or animations you find visually appealing.
3. Out of these, pick the one you think you will be able to realistically implement. Add it to your todo list.

Then, try to implement the design you noted on your own time. Don't give yourself a hard time if you can't implement it in its entirety though.

See also

• The building blocks of React Native animations
• Animating appearance & disappearance in React Native
• The making of a floating-label input with React Native's Animated API