Approach for Designing the Mobile App for an Existing Desktop Optimized Web Application

We have a web application built and optimized for larger screens (desktops) but now our users are transitioning to mobile devices and so we have decided to have mobile application as well for our users.

We are kinda rebuilding the whole UI coz existing UI is not mobile friendly and we want the mobile app to look more swanky (won't sacrifice on the UX). This will definitely result in different looking web and mobile version of the same application but we will probably do a redesign of desktop view later.

The product flow is quite long and have UI components that are being used repeatedly in a lot of places. Are there any good approaches/frameworks that I can use for this activity?

One approach I am thinking of is to focus on redesigning the components and then reuse those designs at all other pages/screens. E.g. Let's say there are 4 screens that looks similar and have common UI components being used in them. Now instead of redesigning all the 4 screens, I'll only redesign 1 and use it as a template for other 3. Does that make sense? Do you guys see any loopholes that I may be missing?

Thanks in advance for your help :)

Edit: The mobile app is a native android app. We will be planning for iOS version later but planning should be long term so that we can accommodate changes for foreseeable future developments as well.