{"id":4429,"url":"https://github.com/turley/react-native-asciimage","last_synced_at":"2025-08-04T01:32:25.662Z","repository":{"id":31835729,"uuid":"35402675","full_name":"turley/react-native-asciimage","owner":"turley","description":"An \u003cASCIImage /\u003e component for React Native","archived":false,"fork":false,"pushed_at":"2015-08-06T00:09:09.000Z","size":164,"stargazers_count":23,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-05T02:16:18.957Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://asciimage.org/","language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/turley.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-11T04:47:20.000Z","updated_at":"2024-01-11T17:56:23.000Z","dependencies_parsed_at":"2022-09-11T00:11:02.278Z","dependency_job_id":null,"html_url":"https://github.com/turley/react-native-asciimage","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/turley%2Freact-native-asciimage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/turley%2Freact-native-asciimage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/turley%2Freact-native-asciimage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/turley%2Freact-native-asciimage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/turley","download_url":"https://codeload.github.com/turley/react-native-asciimage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228582487,"owners_count":17940587,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:17:11.627Z","updated_at":"2024-12-07T08:30:39.127Z","avatar_url":"https://github.com/turley.png","language":"Objective-C","funding_links":[],"categories":["Components"],"sub_categories":["Text \u0026 Rich Content"],"readme":"## react-native-asciimage\n\nProvides an `\u003cASCIImage /\u003e` component for React Native, powered by the excellent [ASCIImage](http://asciimage.org/) by @cparnot. It allows you to generate and insert images into your react-native app using ASCII art to describe the images (useful for small icons in UI elements).\n\nOnly iOS is currently supported.\n\n\n## Installation\n\n\n1. Run `npm install react-native-asciimage --save`\n2. Open your project in XCode, right click on `Libraries` and click `Add\n   Files to \"Your Project Name\"` then choose the `RNASCIImage.xcodeproj`.\n3. Add `libRNASCIImage.a` to `Build Phases -\u003e Link Binary With Libraries`.\n3. `var ASCIImage = require('react-native-asciimage');`\n4. Use the `\u003cASCIImage/\u003e` element wherever you want to insert an image described by the `ascii` prop and optional `color` prop.\n\n## Usage\n\n```javascript\n'use strict';\n\nvar React = require('react-native');\nvar ASCIImage = require('react-native-asciimage');\nvar { AppRegistry, View, Text } = React;\n\nvar myImage = [\n  '· · · 1 2 · · · · · ',\n  '· · · A # # · · · · ',\n  '· · · · # # # · · · ',\n  '· · · · · # # # · · ',\n  '· · · · · · 9 # 3 · ',\n  '· · · · · · 8 # 4 · ',\n  '· · · · · # # # · · ',\n  '· · · · # # # · · · ',\n  '· · · 7 # # · · · · ',\n  '· · · 6 5 · · · · · '\n];\n\nvar App = React.createClass({\n\n  render: function() {\n    return (\n      \u003cView\u003e\n        \u003cText\u003e\n          ASCIImage Example:\n        \u003c/Text\u003e\n        \u003cASCIImage ascii={myImage} /\u003e\n      \u003c/View\u003e\n    );\n  }\n\n});\n\nAppRegistry.registerComponent('App', () =\u003e App);\n```\n\nResult:\n\n\u003cimg src=\"https://raw.githubusercontent.com/turley/react-native-asciimage/master/example.png\" height=\"27\" alt=\"Example Result\" /\u003e\n\n## Alternate Usage\n\nIn some situations it's useful to work with an image URI rather than an `Image` component (e.g., for use in `TabBarIOS.Item` or `NavigatorIOS`). To generate a (local) image URI, do the following:\n\n```\n...\nvar ASCIImage = require('react-native-asciimage');\nvar ASCIImageWriter = ASCIImage.Writer;\n\nASCIImageWriter.createImageFromASCII(myImage, '#ffffff', 40, function(imageURI) {\n  // Use the imageURI wherever it's needed\n  console.log(imageURI);\n});\n```\n\nThis will create an image saved in your application's `Caches` directory for the specified color (example: `#ffffff`) and width (example: `40`). It will automatically generate standard, @2x, and @3x sizes of the image, and will use cached images when they exist.\n\nFor advanced options (which would normally be passed in via the `contextOptions` prop), you can use the expanded form:\n\n```\nvar options = [\n  { fillColor: \"rgba(0, 0, 0, 0)\", lineWidth: 5 }, // First shape\n  { fillColor: \"#0000ff\" } // Second shape\n];\n\nASCIImageWriter.createImageFromASCIIWithOptions(myImage, '#ffffff', 40, options, function(imageURI) {\n  console.log(imageURI);\n}\n```\n\n## Props\n\nThe following props are used:\n\n- **`ascii`** _(Array)_ REQUIRED - an array of strings representing rows of the image (see the ASCIImage [documention](https://github.com/cparnot/ASCIImage) for details)\n- **`color`** _(String)_ the color value to use for the foreground, e.g. `#0000FF` or `rgba(0, 255, 0, 0.5)`. Default: `#000000`\n- **`contextOptions`** _(Array)_ Array of options for advanced control over the drawing of each shape. Array indices correspond to the `ASCIIContextShapeIndex` for each shape passed to the underlying `contextHandler` block. Array values should be plain JavaScript objects with any of the following keys: `fillColor`, `strokeColor`, `lineWidth`, `shouldClose`, or `shouldAntialias`.\n\n\n---\n\n## License\n\nAvailable under the MIT license. See the LICENSE file for more informatiion.\n\n[ASCIImage](https://github.com/cparnot/ASCIImage) (redistributed here) is also [MIT licensed](https://github.com/cparnot/ASCIImage/blob/master/LICENSE) by Charles Parnot\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fturley%2Freact-native-asciimage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fturley%2Freact-native-asciimage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fturley%2Freact-native-asciimage/lists"}