Registry /
web-framework / react-native-code-highlighter
This package `react-native-code-highlighter` provides a dedicated syntax highlighting component tailored for React Native applications, encompassing support for iOS, Android, and web platforms. It serves as a wrapper around the well-established `react-syntax-highlighter` library, allowing developers to seamlessly integrate customizable code snippets into their mobile interfaces. The current stable version is 1.3.0, released in July 2025. While there isn't a strict, fixed release cadence, the project is actively maintained with updates addressing bug fixes, dependency upgrades, and minor feature enhancements as seen in its recent history. A key advantage of this library is its ability to leverage the extensive collection of themes and language definitions available through `react-syntax-highlighter`, making it highly flexible for various code presentation needs within the React Native ecosystem. It also ships with TypeScript type definitions, ensuring a robust development experience for TypeScript users.
Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
This is the default export for the main component. CommonJS `require` syntax is incorrect for modern React Native projects using ES modules.
import CodeHighlighter from 'react-native-code-highlighter';
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.
import { atomOneDarkReasonable } from 'react-syntax-highlighter/dist/esm/styles/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.
import { python } from 'react-syntax-highlighter/dist/esm/languages/hljs';
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'
}
});
Upgrade
Version history
Breaking-change detection hasn't run for this library yet.
Audit
Security & dependencies
CVE tracking and dependency tree are planned for a later release.
Agent activity
0 hits · last 30 days
No traffic data recorded yet.