Render Markdown in React Native | #DEVember Day 3

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: https://www.notjust.dev/projects/devember/day3 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: https://github.com/notJust-dev/DEVember/discussions/categories/ideas 📚 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: https://assets.notjust.dev/masterclass/?utm_source=youtube&utm_medium=livestream&utm_content=DEVember 📚 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: https://academy.notjust.dev/?utm_source=youtube&utm_medium=livestream&utm_content=DEVember 💬 Join the notJust Development gang and let's build together: Twitter: https://twitter.com/VadimNotJustDev Instagram: https://www.instagram.com/VadimNotJustDev Facebook: https://www.facebook.com/notjustdev LinkedIn: https://www.linkedin.com/in/vadimsavin Discord: https://discord.gg/VpURUN2 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