Let's see what this does

.babelrc

@@ -0,0 +1,5 @@
+{
+    "presets": [
+        "module:metro-react-native-babel-preset"
+    ]
+}

.eslintrc.js

@@ -1,9 +1,28 @@
 module.exports = {
-  root: true,
-  extends: '@react-native-community',
+  extends: [
+    '@react-native-community',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/errors',
+    'plugin:import/warnings',
+    'plugin:import/typescript',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'prettier',
+  ],
+  plugins: ['@typescript-eslint'],
+  parserOptions: {
+    ecmaVersion: 6,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
   settings: {
-      react: {
-          version: require('./package.json').peerDependencies.react,
-      },
+    react: {
+      version: require('./package.json').peerDependencies.react,
+    },
+    'import/ignore': ['node_modules'],
   }
 };

.github/workflows/checks.yml

@@ -0,0 +1,27 @@
+name: Code checks
+
+on:
+  push:
+    branches: [ "master", "main" ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "master", "main" ]
+
+jobs:
+  checks:
+    name: Code checks
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm install --ci
+
+      - name: Run ESLint
+        run: npm run lint
+
+      - name: Run Prettier
+        run: npm run format-check
+
+# TODO: type checks...

.github/workflows/npm-publish.yml

@@ -0,0 +1,36 @@
+# This workflow will publish a package to npm when a release is created.
+# https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+# TODO: add tests or leave them out, add build steps...?
+
+name: npm publish
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm ci
+      # - run: npm test
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      # - run: npm run build
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.gitignore

@@ -1,6 +1,5 @@
 /node_modules
 /.idea
-package-lock.json
 /.DS_Store
 yarn-error.log
 yarn.lock

.prettierrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   bracketSpacing: false,
-  jsxBracketSameLine: true,
   singleQuote: true,
   trailingComma: 'all',
+  useTabs: false,
 };

README.md

@@ -1,4 +1,4 @@
-# React Native Markdown Display [![npm version](https://badge.fury.io/js/react-native-markdown-display.svg)](https://badge.fury.io/js/react-native-markdown-display) [![Known Vulnerabilities](https://snyk.io/test/github/iamacup/react-native-markdown-display/badge.svg)](https://snyk.io/test/github/iamacup/react-native-markdown-display)
+# React Native Markdown Display [![npm version](https://badge.fury.io/js/@ronradtke%2Freact-native-markdown-display.svg)](https://badge.fury.io/js/@ronradtke%2Freact-native-markdown-display) [![Known Vulnerabilities](https://snyk.io/test/github/iamacup/react-native-markdown-display/badge.svg)](https://snyk.io/test/github/iamacup/react-native-markdown-display)
 
 It a 100% compatible CommonMark renderer, a react-native markdown renderer done right. This is __not__ a web-view markdown renderer but a renderer that uses native components for all its elements. These components can be overwritten and styled as needed.
 
@@ -10,12 +10,12 @@ This is intended to be a replacement for react-native-markdown-renderer, with a
 
 #### Yarn
 ```npm
-yarn add react-native-markdown-display
+yarn add @ronradtke/react-native-markdown-display
 ```
 
 #### NPM
 ```npm
-npm install -S react-native-markdown-display
+npm install -S @ronradtke/react-native-markdown-display
 ```
 
 ### Get Started
@@ -24,7 +24,7 @@ npm install -S react-native-markdown-display
 import React from 'react';
 import { SafeAreaView, ScrollView, StatusBar } from 'react-native';
 
-import Markdown from 'react-native-markdown-display';
+import Markdown from '@ronradtke/react-native-markdown-display';
 
 const copy = `# h1 Heading 8-)
 
@@ -53,7 +53,123 @@ const App: () => React$Node = () => {
 
 export default App;
 ```
+You can find this example [here](https://snack.expo.dev/@hassieb/react-native-markdown-display-ordered-list)
 
+This next example worked with `"react-native-markdown-display": "^7.0.0-alpha.2",` on React`18.1.0`, React Native `0.70.5` via the Expo command `npx create-expo-app --template` with typescript selected. 
+
+```jsx
+import React from "react";
+import { StyleSheet, SafeAreaView, ScrollView, StatusBar } from "react-native";
+import { useTheme } from "@react-navigation/native";
+
+import Markdown from "react-native-markdown-display";
+
+const copy = `# h1 Heading 8-)
+
+**This is some bold text!**
+
+This is normal text
+`;
+
+const MarkdownWrapper: React.FC<any> = ({ children }) => {
+  const { colors } = useTheme();
+  // @ts-ignore
+  return <Markdown style={styles({ colors })}>{children}</Markdown>;
+};
+
+const App: () => React.ReactElement = () => {
+  return (
+    <>
+      <StatusBar barStyle="dark-content" />
+      <SafeAreaView>
+        <ScrollView
+          contentInsetAdjustmentBehavior="automatic"
+          style={{ height: "100%" }}
+        >
+          <MarkdownWrapper>{copy}</MarkdownWrapper>
+        </ScrollView>
+      </SafeAreaView>
+    </>
+  );
+};
+
+export const styles = (props: any) =>
+  StyleSheet.create({
+    text: {
+      color: props.colors.text,
+    },
+  });
+
+export default App;
+```
+
+With text input 
+
+```jsx
+import React from "react";
+import {
+  StyleSheet,
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  TextInput,
+} from "react-native";
+import { useTheme } from "@react-navigation/native";
+
+import Markdown from "react-native-markdown-display";
+
+const copy = `# h1 Heading 8-)
+
+**This is some bold text!**
+
+This is normal text
+`;
+
+const MarkdownWrapper: React.FC<any> = ({ children }) => {
+  const { colors } = useTheme();
+  // @ts-ignore
+  return <Markdown style={styles({ colors })}>{children}</Markdown>;
+};
+
+const App: () => React.ReactElement = () => {
+  const [text, onChangeText] = React.useState(copy);
+  const { colors } = useTheme();
+  return (
+    <>
+      <StatusBar barStyle="dark-content" />
+      <SafeAreaView>
+        <ScrollView
+          contentInsetAdjustmentBehavior="automatic"
+          style={{ height: "100%" }}
+        >
+          <TextInput
+            multiline
+            style={{ ...styles({colors}).input, color: colors.text }}
+            onChangeText={onChangeText}
+            value={text}
+          />
+          <MarkdownWrapper>{text}</MarkdownWrapper>
+        </ScrollView>
+      </SafeAreaView>
+    </>
+  );
+};
+
+export const styles = (props: any) =>
+  StyleSheet.create({
+    text: {
+      color: props.colors.text,
+    },
+    input: {
+      height: 80,
+      margin: 12,
+      borderWidth: 1,
+      padding: 10,
+    },
+  });
+
+export default App;
+```
 
 ### Props and Functions
 
@@ -346,7 +462,7 @@ Identify the new components and integrate the plugin with a rendered component.
 import React from 'react';
 import { SafeAreaView, ScrollView, StatusBar } from 'react-native';
 
-import Markdown, { MarkdownIt } from 'react-native-markdown-display';
+import Markdown, { MarkdownIt }from '@ronradtke/react-native-markdown-display';
 import blockEmbedPlugin from 'markdown-it-block-embed';
 
 const markdownItInstance = 
@@ -412,7 +528,7 @@ We need to create the **render rules** and **styles** to handle this new **'vide
 import React from 'react';
 import { SafeAreaView, ScrollView, StatusBar } from 'react-native';
 
-import Markdown, { MarkdownIt } from 'react-native-markdown-display';
+import Markdown, { MarkdownIt }from '@ronradtke/react-native-markdown-display';
 import blockEmbedPlugin from 'markdown-it-block-embed';
 
 const markdownItInstance = 
@@ -499,7 +615,7 @@ And all of the video properties needed to render something meaningful are on the
 You can do some additional debugging of what the markdown instance is spitting out like this:
 
 ```jsx
-import Markdown, { MarkdownIt } from 'react-native-markdown-display';
+import Markdown, { MarkdownIt }from '@ronradtke/react-native-markdown-display';
 import blockEmbedPlugin from 'markdown-it-block-embed';
 
 const markdownItInstance = 
@@ -731,7 +847,7 @@ Think of the implementation like applying styles in CSS. changes to the `body` e
 import React from 'react';
 import { SafeAreaView, ScrollView, StatusBar } from 'react-native';
 
-import Markdown from 'react-native-markdown-display';
+import Markdown from '@ronradtke/react-native-markdown-display';
 
 const copy = `
 This is some text which is red because of the body style, which is also really small!
@@ -794,7 +910,7 @@ Styles are used to override how certain rules are styled. The existing implement
 import React from 'react';
 import { SafeAreaView, ScrollView, StatusBar, StyleSheet } from 'react-native';
 
-import Markdown from 'react-native-markdown-display';
+import Markdown from '@ronradtke/react-native-markdown-display';
 
 const styles = StyleSheet.create({
   heading1: {
@@ -868,7 +984,7 @@ Rules are used to specify how you want certain elements to be displayed. The exi
 import React from 'react';
 import { SafeAreaView, ScrollView, StatusBar, Text } from 'react-native';
 
-import Markdown from 'react-native-markdown-display';
+import Markdown from '@ronradtke/react-native-markdown-display';
 
 const rules = {
     heading1: (node, children, parent, styles) =>
@@ -977,7 +1093,7 @@ It is possible to overwrite this behaviour in one of two ways:
 import React from 'react';
 import { SafeAreaView, ScrollView, StatusBar } from 'react-native';
 
-import Markdown from 'react-native-markdown-display';
+import Markdown from '@ronradtke/react-native-markdown-display';
 
 const copy = `[This is a link!](https://github.com/iamacup/react-native-markdown-display/)`;
 
@@ -1029,7 +1145,7 @@ Something like this with `yourCustomHandlerFunctionOrLogicHere`:
 import React from 'react';
 import { SafeAreaView, ScrollView, StatusBar, Text } from 'react-native';
 
-import Markdown from 'react-native-markdown-display';
+import Markdown from '@ronradtke/react-native-markdown-display';
 
 const copy = `[This is a link!](https://github.com/iamacup/react-native-markdown-display/)`;
 
@@ -1080,7 +1196,7 @@ This example will stop images and links.
 import React from 'react';
 import { SafeAreaView, ScrollView, StatusBar, Text } from 'react-native';
 
-import Markdown, { MarkdownIt } from 'react-native-markdown-display';
+import Markdown, { MarkdownIt }from '@ronradtke/react-native-markdown-display';
 
 const copy = `
 # This heading will show with formatting
@@ -1124,7 +1240,7 @@ It is possible to need to pre-process the data outside of this library ([related
 import React from 'react';
 import { SafeAreaView, ScrollView, StatusBar, Text } from 'react-native';
 
-import Markdown, { MarkdownIt, tokensToAST, stringToTokens } from 'react-native-markdown-display';
+import Markdown, { MarkdownIt, tokensToAST, stringToTokens }from '@ronradtke/react-native-markdown-display';
 
 const markdownItInstance = MarkdownIt({typographer: true});