Best practice to apply designer PSD to mobile app

Question

As a developer, I am fine with coding functionalities and backend implementation. But I am not good at UI and UX design. With mockups, designer produces PSD files with nice looking UI and color matching. Now the questions is, what is the best practice to apply these designs in my app? I am using ReactNative platform.

Answer 1

You can check all available components and some layout tips in the official docs https://facebook.github.io/react-native/docs/getting-started.html

Then you should learn more about flexbox, this is a fun game to get started: http://flexboxfroggy.com/

And learn how to manipule DOM style. Here's a list of properties: https://www.w3schools.com/JSREF/dom_obj_style.asp

With this you can create your components and customize them to look like the mockups you receive.

There are also some libs that give you some customized components such as buttons, lists, texts, header, footer, inputs, and so on. The most commons are Native Base https://nativebase.io/ and material design http://react-native-material-design.github.io/

Although I recommend you to learn how to create your own customized components instead of relying on third part libs.

Hope it helps.

Answer 2

If you don't like spending your time coding UI, use a 3rd party UI library.

I'm a fan of NativeBase

Run it by your designer and see if they can update their designs to be as close as possible to the library.