https://github.com/hhimanshu/keystone-react-native-renderer

Render `document` field of KeystoneJS in React Native app
https://github.com/hhimanshu/keystone-react-native-renderer

keystone keystone-js keystonejs keystonejs-cms react-native reactnative

Last synced: 2 days ago
JSON representation

Render `document` field of KeystoneJS in React Native app

• Host: GitHub
• URL: https://github.com/hhimanshu/keystone-react-native-renderer
• Owner: hhimanshu
• Created: 2022-03-21T16:20:54.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-03-30T18:18:31.000Z (over 2 years ago)
• Last Synced: 2024-03-16T12:30:35.123Z (8 months ago)
• Topics: keystone, keystone-js, keystonejs, keystonejs-cms, react-native, reactnative
• Language: TypeScript
• Homepage: https://www.youtube.com/watch?v=vB9HHgOyoIo
• Size: 279 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Keystone `document()` field renderer in React Native

This project demonstrates how to render output of `document` field in React Native application.

The [`document`](https://keystonejs.com/docs/apis/fields#document) field represents the rich text editor on the CMS interface

This repo leverages overriding of `inline` and `block` elements as 

defined in [Overriding the default renderers](https://keystonejs.com/docs/guides/document-fields#overriding-the-default-renderers)

## Pre-requisites

- This project leverages `expo-cli`, so please refer to the [setup instructions](https://reactnative.dev/docs/environment-setup)

in order to make sure your project runs with no issues.

- Make sure xcode is installed and you have agreed to license agreement, if not already.

## How to start

- Clone the repo, cd into the repo and run `yarn install`.

- To start the app, run `yarn start`

You will see output similar to the following

```shell

› Webpack waiting on http://192.168.1.73:19006

› Expo Webpack (web) is in beta, and subject to breaking changes!

› Press a │ open Android

› Press i │ open iOS simulator

› Press w │ open web

› Press r │ reload app

› Press m │ toggle menu

› Press d │ show developer tools

› shift+d │ toggle auto opening developer tools on startup (disabled)

› Press ? │ show all commands

› Open in the web browser...

› Press ? │ show all commands

```

I have tested in this on OSX 12.3 (Mac Monterey), running it on `iOS Simulator`, by

pressing `i` on the terminal.

The demo is available on [YouTube](https://youtu.be/vB9HHgOyoIo)