Fetch returning html instead of json in react native.

Fetch returning html instead of json in react native.

When working with React Native and making API calls, it's common to expect JSON data as a response. However, sometimes the server might return HTML instead. In such cases, you'll need to handle the response differently.

First, let's understand why this might happen. HTML is a markup language used for creating web pages, while JSON is a data format used for exchanging data between a client and a server. When making an API call, if the server is configured to return HTML instead of JSON, it could be due to various reasons such as misconfiguration, or the server intentionally returning HTML for specific endpoints.

To handle HTML responses in React Native, you can use libraries like react-native-html-to-text or react-native-webview to parse and display the HTML content.

1. Using react-native-html-to-text:

react-native-html-to-text is a popular library for converting HTML to plain text in React Native. Here's how you can use it:

First, install the library using npm or yarn:

npm install react-native-html-to-text
# or
yarn add react-native-html-to-text

Next, link the library to your project:

For React Native 0.60 or below:

import HtmlToText from 'react-native-html-to-text';
import { Text } from 'react-native';

// ...

const HtmlToPlainText = (html) => {
  return new Promise((resolve, reject) => {
    HtmlToText.convert(html, (error, result) => {
      if (error) {
        reject(error);
      } else {
        resolve(result.toString());
      }
    });
  });
};

// ...

const MyComponent = ({ html }) => {
  const plainText = useAsyncStorage('plainText', '');
  const [text, setText] = useState(plainText);

  useEffect(() => {
    HtmlToPlainText(html).then((plainText) => {
      setText(plainText);
      AsyncStorage.setItem('plainText', plainText);
    });
  }, [html]);

  return <Text>{text}</Text>;
};

For React Native 0.61 or above:

import HtmlToText from '@react-native-community/html-to-text';
import { Text } from 'react-native';

// ...

const MyComponent = ({ html }) => {
  const [text, setText] = useState('');

  useEffect(() => {
    const convertHtmlToText = async () => {
      const htmlToText = await HtmlToText.convert(html);
      setText(htmlToText);
    };

    convertHtmlToText();
  }, [html]);

  return <Text>{text}</Text>;
};

2. Using react-native-webview:

react-native-webview is a library for rendering HTML content in a webview component. Here's how you can use it:

First, install the library using npm or yarn:

npm install react-native-webview
# or
yarn add react-native-webview

Next, link the library to your project:

import WebView from 'react-native-webview';

// ...

const MyComponent = ({ html }) => {
  return <WebView source={{ html }} />;
};

By using these libraries, you can handle HTML responses in React Native and display the content as plain text or in a webview, depending on your requirements.