Line Number Styling is not working

[deepsidhu1313]

Hi, I have created a component in my project to wrap CodeHighlighter

import React from 'react';
import { ScrollView, StyleSheet } from 'react-native';
import CodeHighlighter from 'react-native-code-highlighter';
import { atomOneDarkReasonable } from "react-syntax-highlighter/dist/esm/styles/hljs";

interface CodePreviewProps {
  content: string;
  language: string;
}

export const CodePreview: React.FC<CodePreviewProps> = ({ content, language }) => (
  <ScrollView style={{ flex: 1 }} contentContainerStyle={styles.codeContainer}>
    <CodeHighlighter
      hljsStyle={atomOneDarkReasonable}
      language={language}
      showLineNumbers={true}
      scrollViewProps={{
        contentContainerStyle: {
          backgroundColor: '#1d1f21',
          borderRadius: 8,
          padding: 16,
          minHeight: 120,
          minWidth: '100%',
          flex: 1,
          alignSelf: 'stretch',
        },
      }}
    >
      {content.length > 20000 ? content.slice(0, 20000) + '\n...File truncated for preview...' : content}
    </CodeHighlighter>
  </ScrollView>
);

const styles = StyleSheet.create({
  codeContainer: {
    padding: 16,
    minWidth: '100%',
    flexGrow: 1,
  },
});

But line number styling is not working for me. Do you have any examples to make this work ? line numbers need some gap from actual code lines. I have tried using different properties available on SyntaxHighlighter like lineProps lineNumberContainerStyle and lineNumberStyle, but none of those worked for me.

[trevor-wheeler]

I would also like to know if anyone has got this working

[deepsidhu1313]

I did some research, and looked at the code https://github.com/react-syntax-highlighter/react-syntax-highlighter, in order to use special container for line number, one need to set showInlineLineNumbers={false}, but problem with that is, that react native doesn't support span, pre or other html elements they use, which makes app crash.

Any ideas on how to fix the crashes and avoid inlineLineNumbers ?