{"library":"react-xml-parser","title":"React XML Parser","description":"react-xml-parser is a lightweight XML parsing library specifically designed for React Native environments. It provides basic functionality to convert XML string data into a traversable JavaScript object structure and can also serialize an XML object back into a string. Currently at version 1.1.8, the package has not seen updates since late 2020, indicating it is in a maintenance-only state. Its primary differentiation lies in its simplicity and explicit focus on React Native, offering a pure JavaScript solution without native module dependencies. This makes it suitable for parsing simple, well-formed XML payloads, though its lack of active development means it may not support newer XML features or offer optimized performance for very large or complex documents compared to more actively developed alternatives.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-xml-parser"],"cli":null},"imports":["import XMLParser from 'react-xml-parser';","const XMLParser = require('react-xml-parser');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState, useEffect } from 'react';\nimport { View, Text, ScrollView, StyleSheet } from 'react-native';\nimport XMLParser from 'react-xml-parser';\n\nconst sampleXml = `<?xml version='1.0' encoding='utf-8'?>\n<Library>\n  <Books count='1'>\n    <Book id='1'>\n      <Name>Me Before You</Name>\n      <Author>Jojo Moyes</Author>\n    </Book>\n  </Books>\n  <Music count='1'>\n    <CD id='2'>\n      <Name>Houses of the Holy</Name>\n      <Artist>Led Zeppelin</Artist>\n    </CD>\n  </Music>\n</Library>`;\n\nconst XMLDisplayComponent = () => {\n  const [parsedData, setParsedData] = useState(null);\n  const [error, setError] = useState(null);\n\n  useEffect(() => {\n    try {\n      const parser = new XMLParser();\n      const xmlDoc = parser.parseFromString(sampleXml);\n      setParsedData(xmlDoc);\n    } catch (e) {\n      setError('Error parsing XML: ' + e.message);\n      console.error(e);\n    }\n  }, []);\n\n  return (\n    <ScrollView style={styles.container}>\n      <Text style={styles.header}>Parsed XML Data:</Text>\n      {error ? (\n        <Text style={styles.errorText}>{error}</Text>\n      ) : parsedData ? (\n        <View>\n          <Text style={styles.sectionHeader}>Library Name: {parsedData.name}</Text>\n          <Text style={styles.text}>Books Count: {parsedData.children[0].attributes.count}</Text>\n          <Text style={styles.text}>Book Name: {parsedData.getElementsByTagName('Name')[0]?.value}</Text>\n          <Text style={styles.text}>Book Author: {parsedData.getElementsByTagName('Author')[0]?.value}</Text>\n          <Text style={styles.text}>CD Name: {parsedData.getElementsByTagName('Name')[1]?.value}</Text>\n          <Text style={styles.text}>CD Artist: {parsedData.getElementsByTagName('Artist')[0]?.value}</Text>\n        </View>\n      ) : (\n        <Text style={styles.text}>Loading or parsing XML...</Text>\n      )}\n    </ScrollView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    padding: 20,\n    backgroundColor: '#fff',\n  },\n  header: {\n    fontSize: 22,\n    fontWeight: 'bold',\n    marginBottom: 15,\n  },\n  sectionHeader: {\n    fontSize: 18,\n    fontWeight: '600',\n    marginTop: 10,\n    marginBottom: 5,\n  },\n  text: {\n    fontSize: 16,\n    marginBottom: 5,\n  },\n  errorText: {\n    fontSize: 16,\n    color: 'red',\n  },\n});\n\nexport default XMLDisplayComponent;","lang":"typescript","description":"This React Native component demonstrates how to use `react-xml-parser` to parse a static XML string. It initializes the parser, converts the XML string into a JavaScript object, and then displays specific elements from the parsed structure within the UI. It also includes basic error handling for parsing failures.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}