useComponentInstance - Amazon Vega Docs

useComponentInstance is a custom hook that provides access to the current component’s instance information in a React Native for Vega app. This hook is useful when you need to access the component’s metadata such as its name, type, or ID. Use the IComponentInstance object to identify an instance of a launched component. It is used by the OS to communicate additional information about the component instance to the application process. IComponentInstance Type:

/**
  * Represents a component instance of the application
  * @interface IComponentInstance
  * @property {string} name - Name of the component
  * @property {ComponentType} type - Type of the component
  * @property {string} id - Contains the address of the associated IComponentInstance
  */
export interface IComponentInstance {
    name : string,
    type : ComponentType,
    id : string
}

ComponentType Type:

/**
  * Represents the different types of components of the application.
  * @enum {number}
  * @readonly
  */
export enum ComponentType {
    INTERACTIVE,
    SERVICE,
    TASK,
} 

Get started with `useComponentInstance`

The useComponentInstance hook is part of the @amazon-devices/react-native-kepler module.

Examples

import { View, StyleSheet, Text } from "react-native";
import { useComponentInstance, IComponentInstance, ComponentType } from @amazon-devices/react-native-kepler;

const App = () => {
  const componentInstance: IComponentInstance = useComponentInstance(); 
  return (
    <View style={styles.container}>
      <Text style={styles.text}> Component Name: {componentInstance.name} </Text>
      <Text style={styles.text}> Component Type: {ComponentType[componentInstance.type]} </Text>
      <Text style={styles.text}> Component ID: {componentInstance.id} </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  text: {
     fontSize: 16
  }
});

export default App; 

import {
  IComponentInstance,
  useComponentInstance
} from '@amazon-devices/react-native-kepler';

import {
  AccountLoginServerComponent,
  IAccountLoginHandlerAsync,
  IStatus,
} from '@amazon-devices/kepler-media-account-login';

const accountLoginServerComponent = new AccountLoginServerComponent();
const server = accountLoginServerComponent.getOrMakeServer();

const accountLoginHandler: IAccountLoginHandlerAsync = {
  handleReadStatus(): Promise<IStatus> {
    // obtain your own cloud service login status
    return Promise.resolve(status);
  },
};

export const App = () => {
  const componentInstance:IComponentInstance = useComponentInstance();
  useEffect(() => {
    server.setHandler(accountLoginHandler, componentInstance);
  }, []);
  
  return (
    <View>
      <Text>Hello IComponentInstance</Text>
    </View>
  );
}

​Get started with useComponentInstance

​Examples

Get started with `useComponentInstance`

Examples