{"library":"react-native-code-highlighter","title":"React Native Code Highlighter","description":"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-code-highlighter"],"cli":null},"imports":["import CodeHighlighter from 'react-native-code-highlighter';","import { atomOneDarkReasonable } from 'react-syntax-highlighter/dist/esm/styles/hljs';","import { python } from 'react-syntax-highlighter/dist/esm/languages/hljs';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from \"react\";\nimport { StyleSheet, View, Text, ScrollView } from \"react-native\";\nimport CodeHighlighter from \"react-native-code-highlighter\";\nimport { atomOneDarkReasonable } from \"react-syntax-highlighter/dist/esm/styles/hljs\";\n\nconst CODE_STR = `\nimport React, { useState, useEffect } from 'react';\nimport { View, Text, StyleSheet, Button } from 'react-native';\n\nconst MyComponent: React.FC = () => {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    console.log('Component mounted or count changed');\n    return () => {\n      console.log('Component unmounted');\n    };\n  }, [count]);\n\n  return (\n    <View style={styles.container}>\n      <Text style={styles.text}>Count: {count}</Text>\n      <Button title=\"Increment\" onPress={() => setCount(prev => prev + 1)} />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#F5FCFF',\n  },\n  text: {\n    fontSize: 20,\n    textAlign: 'center',\n    margin: 10,\n    color: '#333333',\n  },\n});\n\nexport default MyComponent;\n`;\n\nexport default function HighlightComponent() {\n  return (\n    <View style={styles.wrapper}>\n      <Text style={styles.header}>React Native Code Example</Text>\n      <ScrollView style={styles.scrollViewWrapper}>\n        <CodeHighlighter\n          hljsStyle={atomOneDarkReasonable}\n          language=\"typescript\" // Specify the language\n          textStyle={styles.codeText}\n          scrollViewProps={{\n            contentContainerStyle: styles.codeContainer,\n            indicatorStyle: 'white'\n          }}\n        >\n          {CODE_STR}\n        </CodeHighlighter>\n      </ScrollView>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  wrapper: {\n    flex: 1,\n    backgroundColor: '#282c34',\n    padding: 10\n  },\n  header: {\n    fontSize: 22,\n    fontWeight: 'bold',\n    color: '#ffffff',\n    marginBottom: 15,\n    textAlign: 'center'\n  },\n  scrollViewWrapper: {\n    flex: 1\n  },\n  codeContainer: {\n    padding: 15,\n    borderRadius: 8,\n    backgroundColor: '#2d2d2d',\n    minHeight: 200\n  },\n  codeText: {\n    fontSize: 14,\n    fontFamily: 'monospace'\n  }\n});","lang":"typescript","description":"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`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}