DEV Community

Cover image for How to generate functioning React Native apps from images
CodeLink
CodeLink

Posted on • Edited on

How to generate functioning React Native apps from images

Building on our successful experiment with generating Flutter apps, we now attempt to generate React Native code.

As with the previous approach, we don't aim to generate pixel-perfect apps. Instead, we generate high-quality, modular code for developers to build upon. This code features reusable components and separates layout and data.

The results are very exciting!

Below you can see the original image on the left and the generated view on right. It’s prompted to use placeholder images in the generated app.

Figure 1: Friendzy login view
Generate functioning React Native apps from images

Figure 2: Friendzy discover view
Generate functioning React Native apps from images

Figure 3: Friendzy messages view
Generate functioning React Native apps from images

Figure 4: Friendzy
Generate functioning React Native apps from images

Figure 5: Friendzy profile view
Generate functioning React Native apps from images

Figure 6: Messenger profile view
Generate functioning React Native apps from images

Figure 7: Messenger chat view
Generate functioning React Native apps from images

Figure 8: Messenger discover view
Generate functioning React Native apps from images

Figure 9: Messenger calling view
Generate functioning React Native apps from images

We'll soon add this feature to our PoC available at codest.ai. If you haven't tried it yet for ReactJS apps, we encourage you to visit the website and experience it yourself!

We will continue to add more tech stacks as it is proven to be a great time-saving tool for our developers. In some happy cases it might save up to 20% of development time.

We’ll share more results soon, please stay tuned.

Top comments (0)