I found myself recently converting a React based website which gives the user a live preview of a document they’re building while allowing them to change the content and styling of the document with ease before printing.

The preview worked really well as you could quickly style the document in a way you like and convert that preview to a PDF, then send that document off to who you need to, a huge improvement over doing that type of work in Word.

With the conversion from a React website to a React Native app I wanted to keep the preview and if possible re-use the same components used in that preview instead of porting the multitude of templates to React Native.

This approach, while tricky would allow the app to take advantage of all the templates used on the web version, as well as any additional templates that get added over time.

For my use case this works very well and means I can write one set of components for laying out a document and render it across web, app and print which makes supporting multiple platforms so much easier.

Example React Component

In order to illustrate the process I’ll create an example React component. This component would be used in a React website to layout some information the user has provided, something we want to re-use in our React Native app.

#react #programming #javascript #react-native