useComponentInstance
Important: The Vega SDK supports many of the React Native version 0.72 components and APIs. You can use the supported components and APIs in the same manner as an ordinary React Native app. This page lists a specific React Native feature supported by the Vega SDK and contains React Native v72 documentation from the reactnative.dev website created by Meta and other contributors and licensed under the Attribution 4.0 International License. For more information about React Native v72, see the React Native documentation, version 0.72. For the most current feature information, see the Release Notes.
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:
/**
* 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 @amzn/react-native-kepler module.
Examples
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;
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
