as

Settings
Sign out
Notifications
Alexa
亚马逊应用商店
AWS
文档
Support
Contact Us
My Cases
新手入门
设计和开发
应用发布
参考
支持
感谢您的访问。此页面目前仅提供英语版本。我们正在开发中文版本。谢谢您的理解。

useComponentInstance

useComponentInstance is a custom hook that provides access to the current component's instance information in a React Native for Kepler 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:

Copied to clipboard.

/**
  * 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:

Copied to clipboard.

/**
  * 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 @amzn/react-native-kepler module.

Examples

Copied to clipboard.

import { View, StyleSheet, Text } from "react-native";
import { useComponentInstance, IComponentInstance, ComponentType } from @amzn/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; 

Copied to clipboard.

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

import {
  AccountLoginServerComponent,
  IAccountLoginHandlerAsync,
  IStatus,
} from '@amzn/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>
  );
}

Last updated: Sep 30, 2025