rn 0.56 compatibility

Author: iyegoroff

README.md

@@ -24,8 +24,8 @@ React-Native text gradient component for iOS & Android.
 - iOS - component works as drop-in replacement for standard `Text` component, e.g. it is possible to have nested gradients;
 - Android - currently only basic 'wrapper'-like behavior without nesting is supported, [WIP](https://github.com/iyegoroff/react-native-text-gradient/tree/android-nested-gradient);
 - React-Native:
-  - rn 0.56 is not yet supported;
-  - with rn >= 0.55.0 use latest version;
+  - with rn >= 0.56.0 use 0.0.11 and [patch](#Usage with rn 0.56.0);
+  - with rn >= 0.55.0 use 0.0.9;
   - with rn >= 0.54.0 use 0.0.7;
   - with rn >= 0.53.1 use 0.0.4;
   - rn 0.53.0 is not supported;
@@ -90,6 +90,13 @@ Optional. If true gradient will be calculated for text view background frame rat
 <img src="img/useViewFrame.png" width="300">
 
 
+# Usage with rn 0.56.0
+
+react-native should be patched, because of failing invariant checks
+
+`$ node node_modules/react-native-text-gradient/patch-rn.js`
+
+
 ## Caveats
 
 When mixing several text gradients and `Text`s top component always should be text gradient.

TextGradientExample/package-lock.json

@@ -3,14 +3,16 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
+    "postinstall": "npm run patch:rn",
+    "patch:rn": "node node_modules/react-native-text-gradient/patch-rn.js",
     "reset:packager": "watchman watch-del-all && node_modules/react-native/scripts/packager.sh --reset-cache",
     "start": "node node_modules/react-native/local-cli/cli.js start",
     "test": "jest"
   },
   "dependencies": {
     "react": "16.4.1",
     "react-native": "0.56.0",
-    "react-native-text-gradient": "0.0.10"
+    "react-native-text-gradient": "github:iyegoroff/react-native-text-gradient"
   },
   "devDependencies": {
     "babel-jest": "23.2.0",

TextGradientExample/package.json

@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const { promisify } = require('util');
+const glob = require('glob');
+
+const patterns = [
+  new RegExp(
+    'type === "AndroidTextInput" \\\|\\| // Android[\\s\\S]+' +
+    'type === "RCTMultilineTextInputView" \\|\\| // iOS[\\s\\S]+' +
+    'type === "RCTSinglelineTextInputView" \\|\\| // iOS[\\s\\S]+' +
+    'type === "RCTText" \\|\\|[\\s\\S]+' +
+    'type === "RCTVirtualText"'
+  ),
+
+  new RegExp(
+    '"AndroidTextInput" === props \\|\\|[\\s\\S]+' +
+    '"RCTMultilineTextInputView" === props \\|\\|[\\s\\S]+' +
+    '"RCTSinglelineTextInputView" === props \\|\\|[\\s\\S]+' +
+    '"RCTText" === props \\|\\|[\\s\\S]+' +
+    '"RCTVirtualText" === props'
+  )
+];
+
+const patches = [
+  'type.includes("Text")',
+
+  'props.includes("Text")'
+]
+
+const patchFile = async (file) => {
+  const content = (await promisify(fs.readFile)(file)).toString();
+  const patched = content
+    .replace(patterns[0], patches[0])
+    .replace(patterns[1], patches[1])
+
+  await promisify(fs.writeFile)(file, patched);
+};
+
+const patchAll = async () => {
+  const files = await promisify(glob)('node_modules/react-native/Libraries/Renderer/oss/*');
+
+  await Promise.all(files.map(patchFile));
+};
+
+patchAll();