fixed default styling and added props for customization

Author: actuallydan

README.md

@@ -1,13 +1,13 @@
 # react-diff
 
-NOTE: I stole this lib from [cezary/react-diff](https://github.com/cezary/react-diff)
+This is a React Native implementation of [react-diff-simple-component](https://github.com/actuallydan/react-diff-simple-component) which was inspired by and updated from [react-diff](https://github.com/cezary/react-diff).
 
 Highlights differences between two strings, uses the [diff](https://www.npmjs.com/package/diff) module
 
 ## Installation
 
 ```
-npm install react-diff
+npm install react-native-diff-component
 ```
 
 ## Demo
@@ -18,7 +18,7 @@ http://cezary.github.io/react-diff/
 
 ```javascript
 import React from "react";
-import Diff from "react-diff";
+import Diff from "react-native-diff-component";
 
 const MyComponent = () => {
   return <Diff inputA="gogol" inputB="google" type="chars" />;

index.js

@@ -1,35 +1,72 @@
 import PropTypes from "prop-types";
 import React from "react";
-import jsdiff from "diff";
+import { View, StyleSheet, Text } from "react-native";
+import { diffChars, diffWords, diffSentences } from "diff";
 
 const fnMap = {
-  chars: jsdiff.diffChars,
-  words: jsdiff.diffWords,
-  sentences: jsdiff.diffSentences,
-  json: jsdiff.diffJson
+  chars: diffChars,
+  words: diffWords,
+  sentences: diffSentences
 };
 
-export default function Diff({ inputA = "", inputB = "", type = "chars" }) {
+export default function Diff({
+  inputA = "",
+  inputB = "",
+  type = "chars",
+  textStyle = {},
+  addedText = {},
+  removedText = {},
+  unchangedText = {},
+  containerStyle = {}
+}) {
+  let val = 1;
   var diff = fnMap[type](inputA, inputB);
+  console.log(diff);
   var result = diff.map(function(part, index) {
-    var spanStyle = {
-      backgroundColor: part.added
-        ? "lightgreen"
-        : part.removed
-        ? "salmon"
-        : "lightgrey"
-    };
+    var spanStyle = part.added
+      ? { ...styles.addedText, ...addedText }
+      : part.removed
+      ? { ...styles.removedText, ...removedText }
+      : { ...styles.defaultText, ...unchangedText };
+
     return (
-      <span key={index} style={spanStyle}>
+      <Text key={index} style={[styles.defaultText, spanStyle, textStyle]}>
         {part.value}
-      </span>
+      </Text>
     );
   });
-  return <pre className="diff-result">{result}</pre>;
+  // console.log(result);
+  return (
+    <View style={[styles.defaultContainerStyle, containerStyle]}>{result}</View>
+  );
 }
 
 Diff.propTypes = {
-  inputA: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  inputB: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  type: PropTypes.oneOf(["chars", "words", "sentences", "json"])
+  inputA: PropTypes.oneOfType([PropTypes.string]),
+  inputB: PropTypes.oneOfType([PropTypes.string]),
+  type: PropTypes.oneOf(["chars", "words", "sentences"]),
+  textStyle: PropTypes.object,
+  containerStyle: PropTypes.object,
+  addedText: PropTypes.object,
+  removedText: PropTypes.object,
+  unchangedText: PropTypes.object
 };
+
+var styles = StyleSheet.create({
+  defaultText: {},
+  addedText: {
+    backgroundColor: "lightgreen",
+    color: "#000000"
+  },
+  removedText: {
+    backgroundColor: "salmon",
+    textDecorationLine: "line-through",
+    textDecorationStyle: "solid",
+    color: "#000000"
+  },
+  defaultContainerStyle: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "flex-end"
+  }
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-diff-component",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Highlight differences between inputs",
   "main": "index.js",
   "scripts": {
@@ -22,10 +22,11 @@
   },
   "homepage": "https://github.com/actuallydan/react-native-diff-component",
   "peerDependencies": {
-    "react": ">=0.12.0"
+    "react": ">=0.12.0",
+    "react-native": "*"
   },
   "dependencies": {
-    "diff": "^1.2.0",
+    "diff": "^4.0.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {