airbridge-react-native-sdk/qa/source/pages/DeviceInfo.js

Airbridge SDK for React Native

import React, { Component } from 'react'

import { View, NativeModules } from 'react-native'
import CustomButton from '../component/CustomButton'
import { Styles } from '../common/Styles'
import { Colors } from '../common/Colors'

import HorizontalPreference from '../component/HorizontalPreference';

import EntryInputDialog from '../component/EntryInputDialog'
import ValueInputDialog from '../component/ValueInputDialog'

import { Airbridge } from 'airbridge-react-native-sdk'

export default class DeviceInfoPage extends Component {

  constructor(props) {
    super(props);

    this.state = { };

    this.addRef = React.createRef()
    this.removeRef = React.createRef()

    this.fetchDeviceInfo()
  }

  fetchDeviceInfo = async () => {
    const response = await NativeModules.DeviceInfoInteractor.deviceInfo()
    console.log('response : '  + response)
    const jsonData = JSON.parse(response)
    const data = jsonData['data']
    const NA = 'N/A'
    this.setState({ 
      deviceModel: `${data['deviceModel'] ?? NA}`,
      deviceManufacturer: `${data['deviceManufacturer'] ?? NA}`,
      osVersion: `${data['osVersion'] ?? NA}`,
      locale: `${data['locale'] ?? NA}`,
      timezone: `${data['timezone'] ?? NA}`,
      orientation: `${data['orientation'] ?? NA}`,
      screenSize: `${data['screenSize'] ?? NA}`,
      location: `${data['location'] ?? NA}`,
      speed: `${data['speed'] ?? NA}`,
      bluetoothStatus: `${data['wifiStatus'] ?? NA}`,
      networkCarrier: `${data['networkCarrier'] ?? NA}`,
      cellularStatus: `${data['cellularStatus'] ?? NA}`,
      wifiStatus: `${data['wifiStatus'] ?? NA}`,
    })
  }

  render() {
    return (
      <View style={Styles.container}>
        <CustomButton
          buttonColor={Colors.red}
          title={'ADD ALIAS'}
          accessibilityLabel={'addAlias'}
          onPress={() => this.addRef.current.show()} />
        <CustomButton
          buttonColor={Colors.pink}
          title={'REMOVE ALIAS'}
          accessibilityLabel={'removeAlias'}
          onPress={() => this.removeRef.current.show()} />
        <CustomButton
          buttonColor={Colors.purple}
          title={'CLEAR ALIAS'}
          accessibilityLabel={'clearAlias'}
          onPress={() => {
            Airbridge.clearDeviceAlias()
          }} />

        <View style={{margin : 8}} />

        <HorizontalPreference
          title={'Device Model'}
          text={this.state.deviceModel}
          accessibilityLabel={'deviceModel'} />
        <HorizontalPreference
          title={'Device Manufacturer'}
          text={this.state.deviceManufacturer}
          accessibilityLabel={'deviceManufacturer'} />
        <HorizontalPreference
          title={'OS Version'}
          text={this.state.osVersion}
          accessibilityLabel={'osVersion'} />
        <HorizontalPreference
          title={'Locale'}
          text={this.state.locale}
          accessibilityLabel={'locale'} />
        <HorizontalPreference
          title={'Timezone'}
          text={this.state.timezone}
          accessibilityLabel={'timezone'} />
        <HorizontalPreference
          title={'Orientation'}
          text={this.state.orientation}
          accessibilityLabel={'orientation'} />
        <HorizontalPreference
          title={'Screen Size'}
          text={this.state.screenSize}
          accessibilityLabel={'screenSize'} />
        <HorizontalPreference
          title={'Location'}
          text={this.state.location}
          accessibilityLabel={'location'} />
        <HorizontalPreference
          title={'Speed'}
          text={this.state.speed}
          accessibilityLabel={'speed'} />
        <HorizontalPreference
          title={'Network Carrier'}
          text={this.state.networkCarrier}
          accessibilityLabel={'networkCarrier'} />
        <HorizontalPreference
          title={'Bluetooth Status'}
          text={this.state.bluetoothStatus}
          accessibilityLabel={'bluetoothStatus'} />
        <HorizontalPreference
          title={'Cellular Status'}
          text={this.state.cellularStatus}
          accessibilityLabel={'cellularStatus'} />
        <HorizontalPreference
          title={'Wifi Status'}
          text={this.state.wifiStatus}
          accessibilityLabel={'wifiStatus'} />

        <EntryInputDialog
          ref={this.addRef}
          onConfirm={(key, value) => {
            Airbridge.setDeviceAlias(key, value)
          }} />
        <ValueInputDialog
          ref={this.removeRef}
          onConfirm={(key) => {
            Airbridge.removeDeviceAlias(key)
          }} />
        
      </View>
    )
  }
}