Updated readme with code that worked with latest react, expo and typescript

[ar-to]

Created this PR to try to help others out there while we wait for all the other PRs to be tested and merged.

I was worried about this project working but turns out it does with a few tweaks with typescript and the latest react and react native.

Thought about creating a demo but got lazy trying to figure out how to configure it to match and also short on time so apologies. I'll put the effort if others really needed it and can't get it working with just my instructions here and in the changed README.md.

Here is my package.json for reference and to test. It was pretty much taken from the expo template command with typescript here

{
  "name": "test",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@react-navigation/bottom-tabs": "^6.0.5",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/native-stack": "^6.1.0",
    "expo": "~47.0.12",
    "expo-asset": "~8.7.0",
    "expo-constants": "~14.0.2",
    "expo-font": "~11.0.1",
    "expo-linking": "~3.3.0",
    "expo-splash-screen": "~0.17.5",
    "expo-status-bar": "~1.4.2",
    "expo-system-ui": "~2.0.1",
    "expo-web-browser": "~12.0.0",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-native": "0.70.5",
    "react-native-markdown-display": "^7.0.0-alpha.2",
    "react-native-safe-area-context": "4.4.1",
    "react-native-screens": "~3.18.0",
    "react-native-web": "~0.18.9",
    "react-native-webview": "^11.26.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~18.0.24",
    "@types/react-native": "~0.70.6",
    "jest": "^26.6.3",
    "jest-expo": "~47.0.1",
    "react-test-renderer": "18.1.0",
    "typescript": "^4.6.3"
  },
  "private": true
}

The code below was also added to the readme in this PR

Had to do a few minor tweaks to get rid of some type errors

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

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;

Plan to keep an eye on this project since I will be using it for a project of mine. Hope this was helpful to someone.