How to structure a project with multiple front-ends (i.e. React & React Native)

I’m wanting to creating an Amplify project that contains a React front-end, as well as a React Native front-end. I’d like to share some code between the projects. I’d like to have each project use the AppSync API helpers that the CLI outputs (queries.js, mutations.js, etc.). And I’d like to share some of the codebase. How do I structure the project such that it will work with the Amplify CLI in a monorepo?

I was looking at using Lerna, which helps handle multiple “packages”, but I’m not sure how to structure the project. I was considering the following directory structure, but I don’t know if the Amplify CLI would support it:

lerna.json 
package.json 
-amplify/
  -.config/
  -#current-cloud-backend/
  -backend/
-packages/
  -my-react-native-project/
    package.json 
  -my-react-project/
    package.json
  -shared-code/
    package.json 
    aws-exports.js  

[ricardoribas]

In the project i am working at the moment i have a similar problem. Our solution was to create an additional package as @yuth stated. Additionally, we add a postInstall script in package.json that will just add symlinks to all the frontends using amplify backend. In our case, it worked like a charm. 🎉 I hope this intel is useful.

[yuth]

The structure you have above should be fine. You could also separate backend as separate package where you would keep backend specific code and use it in both react and react-native project

lerna.json 
package.json 
-packages/
  -my-react-native-project/
    package.json 
  -my-react-project/
    package.json
  -backend-project/
    - amplify/
     - .config/
     - #current-cloud-backend/
     - backend/
    - package.json 
    - aws-exports.js