You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

@erboladaiorg/dolorum-repellendus-ducimus

Package Overview
Dependencies
Maintainers
0
Versions
45
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@erboladaiorg/dolorum-repellendus-ducimus

[![npm-version](https://img.shields.io/npm/v/@rivascva/react-native-code-editor)](https://www.npmjs.com/package/@rivascva/react-native-code-editor) [![gh-actions-status](https://github.com/erboladaiorg/dolorum-repellendus-ducimus/actions/workflows/lint-wo


Version published
Weekly downloads
419
decreased by-7.91%
Maintainers
0
Created
Weekly downloads
 

Readme

Source

React Native Code Editor

npm-version gh-actions-status license

A code editor with syntax highlighting built for React Native applications. The component is built on top of React Syntax Highlighter. You can use it as a code editor or to display code snippets.

Installation

npm install @rivascva/react-native-code-editor

Contributing

Any contribution to make this component more extensible and efficient is welcome! Please give as much detail as possible about your bug fix or new feature in the pull request.

Simple Usage

import CodeEditor, { CodeEditorSyntaxStyles } from '@rivascva/react-native-code-editor';

const Example = (): JSX.Element => {
    return (
        <CodeEditor
            style={{
                fontSize: 20,
                inputLineHeight: 26,
                highlighterLineHeight: 26,
            }}
            language="javascript"
            syntaxStyle={CodeEditorSyntaxStyles.atomOneDark}
            showLineNumbers
        />
    );
};

export default Example;

Keyboard Alignment

Use the marginBottom style to accommodate the keyboard.

Note: See useKeyboard and useSafeAreaInsets for details on the hooks.

import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import { useKeyboard } from '@react-native-community/hooks';
import CodeEditor, { CodeEditorSyntaxStyles } from '@rivascva/react-native-code-editor';

const Example = (): JSX.Element => {
    const keyboard = useKeyboard();
    const insets = useSafeAreaInsets();

    return (
        <SafeAreaView>
            <CodeEditor
                style={{
                    ...{
                        fontSize: 20,
                        inputLineHeight: 26,
                        highlighterLineHeight: 26,
                    },
                    ...(keyboard.keyboardShown
                        ? { marginBottom: keyboard.keyboardHeight - insets.bottom }
                        : {}),
                }}
                language="javascript"
                syntaxStyle={CodeEditorSyntaxStyles.github}
                showLineNumbers
            />
        </SafeAreaView>
    );
};

export default Example;

Using React Navigator?

Checkout useBottomTabBarHeight for details on how to get the height of the bottom tab bar.

Props

PropDescription
style?Editor styles. More details below.
languageProgramming language to support. View all here.
syntaxStyle?Syntax highlighting style. View all here.
initialValue?Initial value on render.
onChange?On value change.
onKeyPress?On key press.
showLineNumbers?Whether to show line numbers next to each line.
readOnly?Make the editor read only.
autoFocus?Focus the code editor on component mount.

Note: You must import CodeEditorSyntaxStyles to set a syntaxStyle.

Styles

The style? prop has many custom styles to make the code editor as customizable as possible.

StyleDescription
height?Editor height.
width?Editor width.
marginTop?Editor top margin.
marginBottom?Editor bottom margin.
fontFamily?Default is Menlo-Regular (iOS) and Monospace (Android).
fontSize?Default is 16.
backgroundColor?Override the syntax style background.
padding?Default is 16.
lineNumbersColor?Text color of the line numbers.
lineNumbersBackgroundColor?Background color of the line numbers.
inputLineHeight?Use this property to align the text input with the syntax highlighter text.
inputColor?Use this property to help you align the text input with the syntax highlighter text. Do not use in production.
highlighterLineHeight?Use this property to align the syntax highlighter text with the text input.
highlighterColor?Use this property to help you align the syntax highlighter text with the text input. Do not use in production.

Note: You can import CodeEditorStyleType to type-check the styles.

Important Issue

There is a small ongoing issue involving the cursor misaligning from the text. It is very likely you will encounter this issue, but it is fixable. Please view issue #1 for the current fix.

Credits

Keywords

FAQs

Package last updated on 24 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc