@hmscore/react-native-hms-push/example/src/components/ShowMessages.js

React Native HMS Push Kit

import React from 'react';
import { View, Text, StyleSheet, Dimensions, ScrollView, Button } from 'react-native';
import styles from './ShowMessagesStyles'; 
const { height } = Dimensions.get('window');

  export default class MessageDisplay extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        logMessages: [],
      };
    }
  
    addMessageToLog = (message) => {
      try {
        const formattedMessage = (() => {
          if (message === null) return 'null';
          if (message === undefined) return 'undefined';
          if (typeof message === 'object') return JSON.stringify(message, (key, value) => {
            return typeof value === 'number' ? value.toString() : value;
          }, 2);
          return String(message);
        })();
  
        this.setState(prevState => ({
          logMessages: [...prevState.logMessages.slice(-100), formattedMessage]
        }));
      } catch (error) {
        console.error('Error processing message:', error);
        this.setState(prevState => ({
          logMessages: [...prevState.logMessages, `Error: ${error.message}`]
        }));
      }
    };
  
    resetLogMessages = () => {
      this.setState({ logMessages: [] });
    };
  
    render() {
      return (
        <View style={styles.container}>
          <Text style={styles.title}>Log Message Viewer</Text>
          <ScrollView style={styles.scrollArea}>
            {this.state.logMessages.map((log, idx) => (
              <Text key={idx} style={styles.messageText}>
                {log}
              </Text>
            ))}
          </ScrollView>
          <TouchableOpacity style={styles.clearButton} onPress={this.resetLogMessages}>
            <Text style={styles.clearButtonText}>Clear Logs</Text>
          </TouchableOpacity>
        </View>
      );
    }
  }