Registry /
web-framework / react-native-code-highlighter
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
CodeHighlighter
✓ import CodeHighlighter from 'react-native-code-highlighter';
✗ const CodeHighlighter = require('react-native-code-highlighter');
This is the default export for the main component. CommonJS `require` syntax is incorrect for modern React Native projects using ES modules.
atomOneDarkReasonable
✓ import { atomOneDarkReasonable } from 'react-syntax-highlighter/dist/esm/styles/hljs';
✗ import atomOneDarkReasonable from 'react-syntax-highlighter/styles/hljs/atomOneDarkReasonable';
Styles from `react-syntax-highlighter` must be imported specifically from the `dist/esm/styles/hljs` (or `prism`) path when using ES modules. Incorrect paths are a frequent source of import errors.
language support
✓ import { python } from 'react-syntax-highlighter/dist/esm/languages/hljs';
While `react-native-code-highlighter` accepts a `language` prop string, for dynamic or specific language bundles, you might need to import languages directly from `react-syntax-highlighter` if you are using a custom build or tree-shaking specific languages, although typically not required for basic usage.
This example demonstrates how to integrate `CodeHighlighter` into a React Native component, apply a syntax highlighting style, specify the code language, and customize the container's appearance using `scrollViewProps`.
import React from "react";
import { StyleSheet, View, Text, ScrollView } from "react-native";
import CodeHighlighter from "react-native-code-highlighter";
import { atomOneDarkReasonable } from "react-syntax-highlighter/dist/esm/styles/hljs";
const CODE_STR = `
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
const MyComponent: React.FC = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('Component mounted or count changed');
return () => {
console.log('Component unmounted');
};
}, [count]);
return (
<View style={styles.container}>
<Text style={styles.text}>Count: {count}</Text>
<Button title="Increment" onPress={() => setCount(prev => prev + 1)} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
text: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: '#333333',
},
});
export default MyComponent;
`;
export default function HighlightComponent() {
return (
<View style={styles.wrapper}>
<Text style={styles.header}>React Native Code Example</Text>
<ScrollView style={styles.scrollViewWrapper}>
<CodeHighlighter
hljsStyle={atomOneDarkReasonable}
language="typescript" // Specify the language
textStyle={styles.codeText}
scrollViewProps={{
contentContainerStyle: styles.codeContainer,
indicatorStyle: 'white'
}}
>
{CODE_STR}
</CodeHighlighter>
</ScrollView>
</View>
);
}
const styles = StyleSheet.create({
wrapper: {
flex: 1,
backgroundColor: '#282c34',
padding: 10
},
header: {
fontSize: 22,
fontWeight: 'bold',
color: '#ffffff',
marginBottom: 15,
textAlign: 'center'
},
scrollViewWrapper: {
flex: 1
},
codeContainer: {
padding: 15,
borderRadius: 8,
backgroundColor: '#2d2d2d',
minHeight: 200
},
codeText: {
fontSize: 14,
fontFamily: 'monospace'
}
});
Errors
Common errors & fixes
Error: Unable to resolve module `react-syntax-highlighter/styles/hljs/atomOneDarkReasonable`
Incorrect import path for syntax highlighter styles due to CommonJS vs. ES Module differences.
fixChange your import statement to `import { atomOneDarkReasonable } from 'react-syntax-highlighter/dist/esm/styles/hljs';`. TypeError: Cannot read properties of undefined (reading 'length') for hljsStyle
The `hljsStyle` prop is required and was either omitted or provided with an invalid (undefined or null) value.
fixEnsure you are importing a valid style object (e.g., `atomOneDarkReasonable`) from `react-syntax-highlighter` and passing it correctly to the `hljsStyle` prop: `<CodeHighlighter hljsStyle={yourImportedStyle} ... />`. Audit
Dependencies
reactrequiredReact dependency for component rendering within a React Native environment.
react-nativerequiredCore React Native platform dependency for UI components and native modules.
react-syntax-highlighterrequiredThe underlying library responsible for the core syntax highlighting logic and styles.
@types/react-syntax-highlighteroptionalTypeScript type definitions for the `react-syntax-highlighter` peer dependency.