react-native-markdown-kit

Lightweight, zero-dependency Markdown renderer for React Native. Koi heavy library nahi, sirf plain React Native components — fast aur customizable.

✨ Features

• # H1 ## H2 ### H3
• **bold**, *italic*, ~~strikethrough~~, `inline code`
• Bullet lists (- ya *) aur numbered lists (1., 2....) — auto numbering
• > blockquote
• Fenced code blocks (```)
• Horizontal rule (---)
• Links [text](url) with tap handler
• Fully customizable styles via props

📦 Installation

Using yarn:

yarn add react-native-markdown-kit

Using npm:

npm install react-native-markdown-kit

🚀 Usage

import React from 'react';
import { View } from 'react-native';
import Markdown from 'react-native-markdown-kit';

const text = `
# Hello World

Yeh **bold** hai aur yeh *italic* hai.

- Item 1
- Item 2

1. Step one
2. Step two
`;

export default function App() {
  return (
    <View style={{ padding: 16 }}>
      <Markdown text={text} />
    </View>
  );
}

⚙️ Props

| Prop | Type | Required | Description | |---------------|------------|----------|--------------------------------------------------------------------------| | text | string | ✅ | Markdown source string | | style | object | ❌ | Override default styles, e.g. { h1: {...}, p: {...}, bold: {...} } | | onLinkPress | function | ❌ | (url) => void — called when a [link](url) is tapped |

Customizing styles

Override karne ke liye yeh keys available hain: body, h1, h2, h3, p, bold, italic, strikethrough, link, inlineCode, codeBlock, blockquote, hr, listItemContainer, bullet, listItemText.

<Markdown
  text={text}
  style={{
    h1: { color: '#d6336c', fontSize: 30 },
    link: { color: 'green' },
  }}
/>

🧪 Running the example

cd example
yarn install        # ya: npm install
npx react-native run-android   # or run-ios

(Example app ko apne React Native project me copy karke chala sakte hain — yeh standalone RN project nahi hai, sirf component usage dikhata hai.)

📤 Publishing this package to npm (aapko khud karna hoga)

Main aapke liye network access nahi rakhta, isliye publish step aapko khud terminal me karna hoga — bohat simple hai:

1. Package name check karo — package.json me "name": "react-native-markdown-kit" hai. Yeh naam npm pe already available ho sakta hai ya nahi bhi — npm view react-native-markdown-kit chala ke check kar lo. Agar already liya hua hai, scoped naam use karo: @yourusername/react-native-markdown-kit.

2. package.json me author, repository.url apna GitHub link daal do.

3. npm account banao (agar nahi hai): https://www.npmjs.com/signup

4. Terminal me login karo:

   npm login

5. Package folder me jaake publish karo:

   cd react-native-markdown-kit
   npm publish --access public

   Yarn se bhi publish ho sakta hai (yarn ka apna registry-publish command hai, par login wahi npm wala chalta hai):

   yarn publish --access public

6. Done! Ab koi bhi yarn add react-native-markdown-kit ya npm install react-native-markdown-kit (ya jo naam aapne final rakha) se install kar sakta hai.

Tip: agar scoped name use kiya (@yourusername/...), to --access public zaroor lagana, warna npm use private (paid) mark kar deta hai.

Future updates

Naya version publish karne ke liye:

npm version patch   # ya minor / major
npm publish

📄 License

MIT