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.