[ART] Art and Pattern w/ Images

[browniefed]

Just saw that Pattern hasn't been add yet in the react-native art implementation.

else if (type === PATTERN) {
    // todo
  }

Any idea when this will be added, would love to take advantage of it.

Or any other recommendations on how to render an Image to the Surface

[vjeux]

Context: http://browniefed.com/blog/2015/05/30/create-a-map-with-react-art/

[sophiebits]

No one's working on it right now as far as I know. I'd be happy to look at a pull request if you're interested in adding support.

[browniefed]

Shucks. I don't know ObjectiveC and this seems like a large thing.
I guess no time like the present to learn. I'll see if I can get something working, no guarantees.

I'll close this out for now. Thanks for the response.

[brentvatne]

@browniefed if you get stuck don't hesitate to ping me on irc or twitter!

[browniefed]

@brentvatne thanks, I'm sure I will.

@spicyj I think there needs to be some documentation around react-art. I've been writing a lot of it and would love to document it so it might get some more use by people.
Is there a particular documentation style you would prefer, I imagine a clone of Jekyll style sites like react-native , flux, and flow?

[brentvatne]

@browniefed - that seems like a good place to start!

[ThomWright]

@browniefed Hit me up if you work on some React ART documentation, I'd be glad to help. I've been using it too and finding the lack of documentation frustrating.

[LeJPR]

Just stumbled across the same issue... nearly a year later:) Had a quick look/play and it looks like the Pattern implementation in ARTPattern.m is wired up to display an image using _image = CGImageRetain([RCTConvert CGImage:array[1]]);
;, but it just receives a string from the fill pattern prop of the image location entered in JS so can't actually create an image.... also note it looks like react packager doesn't pick up the image location and bundle it.... so i think to get the image displaying will need to look into what Image does to bundle an image and then change it into a filepath native can load... Im a long way from an expert in this part but will try and find some time to look into and submit a PR.

However... . you can get an image in a surface now in a way that will work with web react-art and reactARTNative by using a Data URI instead of a url... just add something along the lines of the below and you'll get your fill pattern in native....

fill={new Pattern('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwBQTFRF7c5J78kt+/Xm78lQ6stH5LI36bQh6rcf7sQp671G89ZZ8c9V8c5U9+u27MhJ/Pjv9txf8uCx57c937Ay5L1n58Nb67si8tVZ5sA68tJX/Pfr7dF58tBG9d5e8+Gc6chN6LM+7spN1pos6rYs6L8+47hE7cNG6bQc9uFj7sMn4rc17cMx3atG8duj+O7B686H7cAl7cEm7sRM26cq/vz5/v767NFY7tJM78Yq8s8y3agt9dte6sVD/vz15bY59Nlb8txY9+y86LpA5LxL67pE7L5H05Ai2Z4m58Vz89RI7dKr+/XY8Ms68dx/6sZE7sRCzIEN0YwZ67wi6rk27L4k9NZB4rAz7L0j5rM66bMb682a5sJG6LEm3asy3q0w3q026sqC8cxJ6bYd685U5a457cIn7MBJ8tZW7c1I7c5K7cQ18Msu/v3678tQ3aMq7tNe6chu6rgg79VN8tNH8c0w57Q83akq7dBb9Nld9d5g6cdC8dyb675F/v327NB6////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/LvB3QAAAMFJREFUeNpiqIcAbz0ogwFKm7GgCjgyZMihCLCkc0nkIAnIMVRw2UhDBGp5fcurGOyLfbhVtJwLdJkY8oscZCsFPBk5spiNaoTC4hnqk801Qi2zLQyD2NlcWWP5GepN5TOtSxg1QwrV01itpECG2kaLy3AYiCWxcRozQWyp9pNMDWePDI4QgVpbx5eo7a+mHFOqAxUQVeRhdrLjdFFQggqo5tqVeSS456UEQgWE4/RBboxyC4AKCEI9Wu9lUl8PEGAAV7NY4hyx8voAAAAASUVORK5CYII=', 100, 100 ,0,0)}