Open

How to retrive rich-text data from contentful to react native ?

First of all you have to follow the documentation.But, I can tell you Rendering Contentful Rich Text with Javascript.Hopefully,it can help you also.

1. Install the Contentful client library and rich text html renderer:

npm install --save contentful @contentful/rich-text-html-renderer

2. Use the Contentful client library to retrieve an entry containing rich text

import * as contentful from 'contentful';
import { documentToHtmlString } from '@contentful/rich-text-html-renderer';
const client = contentful.createClient({
space: '<space_id>',
environment: '<environment_id>', // defaults to 'master' if not set
accessToken: '<content_delivery_api_key>',

});

client.getEntry('<entry_id>'); // asynchronous, returns promise

The React renderer as well as html-renderer accepts renderers as optional parameters.

import React from 'react';
import ReactDOM from 'react-dom';
import { BLOCKS, MARKS } from '@contentful/rich-text-types';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
const richTextDocument = {
nodeType: 'document',
data: {},
content: [
{
nodeType: 'paragraph',
data: {},
content: [
{
nodeType: 'text',
value: 'Hello',
data: {},
marks: [{ type: 'bold' }],
},
{
nodeType: 'text',
value: ' world!',
data: {},
marks: [{ type: 'italic' }],
},
],
},
],
};
const Bold = ({ children }) => <span className="bold">{children}</span>;
const Text = ({ children }) => <p className="align-center">{children}</p>;
const options = {
renderMark: {
[MARKS.BOLD]: (text) => <Bold>{text}</Bold>,
},
renderNode: {
[BLOCKS.PARAGRAPH]: (node, children) => <Text>{children}</Text>,
},
};
const rootElement = document.getElementById('root');
ReactDOM.render(
documentToReactComponents(richTextDocument, options),
rootElement
);

// -> <p class="align-center"><span class="bold">Hello</span><u> world!</u></p>