Hello @yali
ToastKepler and W3C Media Video components require specific URI schemes for bundled assets in Vega/Kepler framework.
Use asset:// Protocol
For ToastKepler Icon
import { useToastKepler } from '@amazon-devices/react-native-kepler';
const showToast = () => {
ToastKepler.show({
message: 'Success!',
iconUri: 'asset://images/logo.png', // Path relative to assets folder
duration: 3000
});
};
For W3C Media Video
import { VideoPlayer, KeplerVideoView } from '@amazon-devices/react-native-w3cmedia';
const BundledVideoPlayer = () => {
const video = useRef<VideoPlayer | null>(null);
const [useKeplerVideoView, setUseKeplerVideoView] = useState(false);
useEffect(() => {
initializeVideo();
}, []);
const initializeVideo = async () => {
video.current = new VideoPlayer();
await video.current.initialize();
video.current.src = 'asset://video/sample.mp4'; // Path relative to assets folder
video.current.autoplay = false;
setUseKeplerVideoView(true);
};
return (
<View style={styles.container}>
{useKeplerVideoView && video.current && (
<KeplerVideoView
showControls={true}
videoPlayer={video.current}
/>
)}
</View>
);
};
Working Examples
ToastKepler with Local Icon
import React from 'react';
import { View, Button, StyleSheet } from 'react-native';
import { useToastKepler } from '@amazon-devices/react-native-kepler';
export const ToastExample = () => {
const showSuccessToast = () => {
ToastKepler.show({
message: 'Operation successful!',
iconUri: 'asset://images/success-icon.png',
duration: 3000,
position: 'bottom'
});
};
const showErrorToast = () => {
ToastKepler.show({
message: 'Something went wrong',
iconUri: 'asset://images/error-icon.png',
duration: 3000,
position: 'bottom'
});
};
return (
<View style={styles.container}>
<Button title="Show Success" onPress={showSuccessToast} />
<Button title="Show Error" onPress={showErrorToast} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
gap: 20
}
});
W3C Media Video with Local Asset
import React, { useRef, useEffect, useState } from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { VideoPlayer, KeplerVideoView } from '@amazon-devices/react-native-w3cmedia';
export const LocalVideoPlayer = () => {
const video = useRef<VideoPlayer | null>(null);
const [isReady, setIsReady] = useState(false);
useEffect(() => {
initializeVideo();
return () => {
if (video.current) {
video.current.pause();
video.current.currentTime = 0;
}
};
}, []);
const initializeVideo = async () => {
video.current = new VideoPlayer();
await video.current.initialize();
// Use asset:// protocol for bundled video
video.current.src = 'asset://video/intro.mp4';
video.current.autoplay = false;
setIsReady(true);
};
const handlePlay = () => {
video.current?.play();
};
const handlePause = () => {
video.current?.pause();
};
return (
<View style={styles.container}>
{isReady && video.current && (
<>
<KeplerVideoView
showControls={true}
videoPlayer={video.current}
style={styles.video}
/>
<View style={styles.controls}>
<Button title="Play" onPress={handlePlay} />
<Button title="Pause" onPress={handlePause} />
</View>
</>
)}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000'
},
video: {
flex: 1
},
controls: {
flexDirection: 'row',
justifyContent: 'center',
gap: 20,
padding: 20
}
});
Warm Regards,
Ivy