Render Markdown in React Native |

This is Day 3 of DEVember, where we'll be displaying rich text within our React Native app! In this tutorial, we're focusing on how to render Markdown content, the widely used .md format, within your React Native projects. Whether you're looking to display READMEs, user guides, or any Markdown-based content, by the end of this video, you'll have all the tools you need to integrate Markdown rendering seamlessly into your app!
🌟DEVember Day 3: www.notjust.dev/projects/deve...
If you have ideas of features, topics, or apps you would like me to cover during #DEVember, you can submit them on our 💡Idea Board:
github.com/notJust-dev/DEVemb...
📚 Today's Agenda:
- Introduction to Markdown
- Markdown Syntax Overview
- Setting Up React Native for Markdown
- Implementing Markdown Rendering
- Styling Markdown Content
- Using Markdown in React Native Components
- Recap and Q&A Session
❗Try our FREE 4-day Masterclass on notJust.Academy:
assets.notjust.dev/masterclas...
📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev! Check out what our successful students are saying about their experience:
academy.notjust.dev/?...
💬 Join the notJust Development gang and let's build together:
Twitter: / vadimnotjustdev
Instagram: / vadimnotjustdev
Facebook: / notjustdev
LinkedIn: / vadimsavin
Discord: / discord
Timecodes:
0:00 Introduction to DEVember and Markdown in React Native
1:13 Use Cases for Markdown in Mobile Apps
1:59 Utilizing Markdown for Various App Content
2:32 Agenda: Markdown Introduction, Rendering, and Editor Building
3:09 DEVember Overview
4:32 Starting the React Native Markdown Tutorial
5:12 Recap of Previous DEVember Tutorials
5:47 Setting Up the Project for Day 3
6:20 Creating the Editor Screen for Markdown
7:00 Accessing GitHub Repository for Tutorial Projects
8:25 Implementing Markdown in the App
9:03 Installing Markdown Library in Expo
10:40 Handling Library Installation Issues
11:40 Importing Markdown and Initial Rendering
12:58 Troubleshooting and Adjusting Markdown Rendering
13:44 Styling the Markdown Page
14:40 Generating Sample Markdown Content
17:01 Inserting and Styling the Sample Content
17:46 Adjusting Styles for Better Readability
20:34 Customizing Heading Styles in Markdown
21:39 Further Styling Adjustments
22:49 Styling Body Text and Headers
24:57 Resolving Font Weight Issues with Custom Fonts
25:35 Implementing Scrollable Markdown Content
26:21 Adjusting Scroll View Settings for Notches
27:10 Finalizing Markdown Content Display
28:24 Adding Images and Links to Markdown
29:17 Handling Code Blocks and Inline Code
31:07 Exploring Markdown Plugins and Extensions
32:11 Creating a Reusable Markdown Display Component
34:47 Implementing Markdown Display in App
35:31 Passing Markdown Content as Props
36:14 Adding Description to App Pages with Markdown
37:01 Implementing an Editor for Markdown Content
39:03 Creating a State Variable for Markdown Content
40:11 Adding Editing Capabilities to Markdown Editor
41:49 Designing Tabs for Editing and Previewing Markdown
43:19 Styling the Text Input for Markdown Editing
44:24 Final Adjustments to Markdown Editor UI
45:34 Implementing State-Controlled Tab Switching
47:16 Adding Tabbed Navigation Between Editor and Preview
49:23 Styling Active Tab Indicator
51:06 Handling Tab Press Events
52:12 Finalizing Tab Functionality and Styling
54:24 Wrapping Up Markdown Editor and Renderer Tutorial
55:22 Conclusion and Outro
Disclaimer: This build is for educational purposes only. All views, opinions, and technology choices expressed in this video are my own and do not represent the views, opinions, or technology choices of any entity I have been, am now, or will be affiliated with.
#notjustdev #ReactNative #markdown

[@jordantitov6758]

Excellent and entertaining content. I decided to learn some react native 2 days ago and I am lucky to find you. Unfortunately, I didn't know about that at the beginning of December.

[@ByteNatives]

Awesome content Man, loved it.

[@h951115951115]

I have a lot of markdown files and it seems your video does not go into details of how to render all of them

[@user-zj5sd5mc7z]

Thank you ♥

[@ashokadichill2183]

any possiblity of rendering math equation in to markdown

[@Techpy]

You never created a video on how to build apps for production. How to optimize the end apk or pkg file.
Please create few videos on it as well. There are no such videos available on internet especially for build optimization.

[@leejeff3949]

What do you mean by optimizing the 'end apk'? Is it something different from bundling the adb file for market?

[@Techpy]

@@leejeff3949 apk file is something that we install in Android OS. I am not taking about pushing to play store, where we can just push .aab file and google will do hard work and distribute apps according to users phone architecture.
We need to configure proguard (if I am not wrong), like the apk size is 25+MB for a Hello world project in react native, right?
Or am I doing something wrong?

[@ShortCodeDev]

​@@leejeff3949humm

[@usmaniCodes]

❤❤❤

[@anirudhcodes]

Markdown text is not visible when device is set to darkmode

[@notjustdev]

you will have to pass-down theme-aware styles to markdown components. Just making the text white