Vertical scroll isn't working

[chaitanya71998]

hey thanks for you lib. Why i was not getting vertical scroll. I am using a paginated flatlist and in each page i was rendering a code block, but the code block is scrolling only horizontal and not scrolling vertically, why is this?

Can anyone solve tell me how to solve this issues? TIA !

[deepsidhu1313]

Hi, I ran into this issue recently, I solved it by wrapping CodeHighlighter in ScrollView, and tweaking some CSS properties. Here is my component.

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,
  },
});