{"id":19639575,"url":"https://github.com/burdiuz/react-native-codeditor","last_synced_at":"2025-04-28T10:31:12.976Z","repository":{"id":35207141,"uuid":"105823058","full_name":"burdiuz/react-native-codeditor","owner":"burdiuz","description":"React Native component to display code editor using WebView and CodeMirror","archived":false,"fork":false,"pushed_at":"2023-02-28T03:38:40.000Z","size":1709,"stargazers_count":31,"open_issues_count":11,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-20T06:36:05.926Z","etag":null,"topics":["code","codemirror","component","editor","react-native","webview"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/burdiuz.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":"2017-10-04T22:00:26.000Z","updated_at":"2024-11-04T03:37:26.000Z","dependencies_parsed_at":"2023-02-15T04:02:05.617Z","dependency_job_id":null,"html_url":"https://github.com/burdiuz/react-native-codeditor","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/burdiuz%2Freact-native-codeditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/burdiuz%2Freact-native-codeditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/burdiuz%2Freact-native-codeditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/burdiuz%2Freact-native-codeditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/burdiuz","download_url":"https://codeload.github.com/burdiuz/react-native-codeditor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251295289,"owners_count":21566432,"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":["code","codemirror","component","editor","react-native","webview"],"created_at":"2024-11-11T13:02:18.563Z","updated_at":"2025-04-28T10:31:08.091Z","avatar_url":"https://github.com/burdiuz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Code Editor\n\nCode Editor based on [Codemirror](https://codemirror.net/).\n\n```javascript\nimport React, { Component } from 'react';\nimport CodeEditor from '@actualwave/react-native-codeditor';\n\nexport default () =\u003e (\n  \u003cCodeEditor\n    onInitialized={(api) =\u003e console.log('Initialized!')}\n    onHistorySizeUpdate={(size) =\u003e console.log('History Size Update:', size)}\n    onLog={(content) =\u003e console.log('Log:', content)}\n    onError={(content) =\u003e console.log('Error:', content)}\n    onContentUpdate={(content) =\u003e console.log('Content Update:', content)}\n    theme=\"darcula\"\n    settings={{\n      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],\n      inputStyle: 'contenteditable',\n      styleActiveLine: true,\n      mode: 'jsx',\n      lineNumbers: true,\n      lineWrapping: true,\n      foldGutter: true,\n      matchBrackets: true,\n      autoCloseBrackets: true,\n      matchTags: true,\n      autoCloseTags: true,\n      highlightSelectionMatches: true,\n      theme: 'darcula',\n    }}\n    modules={[\n      'addon/fold/foldgutter',\n      'mode/javascript/javascript',\n      'mode/xml/xml',\n      'mode/jsx/jsx',\n      // FIXME causes unexpected new lines during editin\n      // 'addon/selection/active-line',\n      'addon/edit/matchbrackets',\n      'addon/edit/matchtags',\n      'addon/search/match-highlighter',\n      'addon/edit/closebrackets',\n      'addon/edit/closetag',\n      'addon/fold/foldcode',\n      'addon/fold/foldgutter',\n      'addon/fold/brace-fold',\n      'addon/fold/comment-fold',\n      'addon/fold/indent-fold',\n      'addon/fold/xml-fold',\n    ]}\n    content={`import React, { Component, PropTypes } from 'react';\nimport {\n  View,\n  Text,\n  InputText,\n  TouchableHighlight,\n  TouchableOpacity,\n} from 'react-native';\n\n\nclass ClassComponent extends Component {\n  static propTypes = {};\n  static defaultProps = {};\n\n  componentWillMount() {\n  }\n\n  componentWillReceiveProps(nextProps, nextContext) {\n  }\n\n  render() {\n    return (\n      \u003cView /\u003e\n    );\n  }\n}\n\nexport default ClassComponent;\n`}\n  /\u003e\n);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fburdiuz%2Freact-native-codeditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fburdiuz%2Freact-native-codeditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fburdiuz%2Freact-native-codeditor/lists"}