How to generate the React Native code when building an app using React JS drag/drop type builder?

Archana Sharma - Aug 18 '23 - - Dev Community

I am creating a React js app builder which is built using React JS. The canvas part where I am creating a screen is used react-native-web to drag the component and drop the react native one. Because this builder later will be used as a React Native app.

Requirement:: Building React Native app using React JS drag and drop app builder.

Steps:

  1. I have used react-native-web too so that inside React JS app builder I can create a screen using the React-Native component to maintain the consistency of the app and builder as well as I can reuse the same component code on both sides.
  2. After drag and drop I generate a screen view using the JSON I have saved in React js builder.
  3. I am having a confusing in the third step, now I have shown the screen inside React js app builder, and my JSON is also ready but how can I convert the JSON or that screen to React Native code? I need React native code to build a mobile app which is the last and most crucial step of this project.
  4. Do I need to convert the created JSON into React native code? If yes, is there any tool, library or package available for this?
  5. Is there any method to convert the build screen into React Native code?

Please help me to figure out what is an appropriate method to build React Native code from React JS app builder.

. .