Render Markdown inside React Native App

Render Markdown inside React Native App

Post by: Niraj Dhungana

Posted on: Jan 15 2022

#react native# markdown

When it comes to rendering markdown inside react native projects there are lots of packages. But most of them are old and do not support the latest react version.

Recently I made a video course for my YouTube channel called. How to create a fullstack blog app using node js, react, react native and markdown.

Main Problem with Markdown & React Native

The main problem that I face when I try to render markdown inside react native app. Like I already said, most of the good packages are not supported by the latest react version.

The most popular and the most used markdown render for react native is the react-native-markdown-display but if you try to install it inside your project it will give you a long list of errors.

Solution is Inside The Problem Itself

But we are not here to discuss the problem right. So let’s talk about the solution. As we can already read inside the error the main problem is the version of react and other dependencies inside react-native-markdown-display.

So if you use the given command to install the dependency. Your install will not fail. I mean it will be installed safely. Now if you want to know more about the peer-dependencies you can go to this link.

1
npm i react-native-markdown-display --legacy-peer-deps

Now with the given command we can install the react-native-markdown-display but if you try to use it inside your app. It will again have lots of errors. So to fix the error if you read the error message. Now it is asking for another dependency called punycode.

1
npm i punycode

You can use this command to install the punycode. Now you are ready to use markdown inside your react native app.

Why react-native-markdown-display?

Now you may ask why I am using the package which already has problems. And that is because I tried lots of other packages to render markdown inside my react native app but this package is better then others.

It supports lot’s of customizations, styles and also custom components. If you have any problem or if you want to give any suggestions you will find me on @ndpniraj.