# How can I remove or customize the default focus highlight (blur/dim overlay) on focused components in Kepler (Vega OS) TV apps?

**URL:** <https://community.amazondeveloper.com/t/how-can-i-remove-or-customize-the-default-focus-highlight-blur-dim-overlay-on-focused-components-in-kepler-vega-os-tv-apps/24569>\
**Category:** Q&A\
**Created:** [October 17, 2025, 1:21pm UTC](https://community.amazondeveloper.com/t/how-can-i-remove-or-customize-the-default-focus-highlight-blur-dim-overlay-on-focused-components-in-kepler-vega-os-tv-apps/24569 "2025-10-17T13:21:22Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hoang\_Dang](https://avatars.discourse-cdn.com/v4/letter/h/f6c823/32.png) [@Hoang\_Dang](https://community.amazondeveloper.com/u/Hoang_Dang)\
**Post date:** [October 17, 2025, 1:21pm UTC](https://community.amazondeveloper.com/t/how-can-i-remove-or-customize-the-default-focus-highlight-blur-dim-overlay-on-focused-components-in-kepler-vega-os-tv-apps/24569/1 "2025-10-17T13:21:22Z")

</div>

When navigating through UI elements (e.g., using the TV remote) in my Kepler (Vega OS) TV app, every focused component gets a default dim/blur overlay applied by the system.

How can I disable or override this default focus highlight globally, or apply my own custom focus style instead?

---

<div class="post-metadata">

**Author:** ![amen](https://avatars.discourse-cdn.com/v4/letter/a/ee7513/32.png) [@amen](https://community.amazondeveloper.com/u/amen)\
**Post date:** [October 17, 2025, 10:05pm UTC](https://community.amazondeveloper.com/t/how-can-i-remove-or-customize-the-default-focus-highlight-blur-dim-overlay-on-focused-components-in-kepler-vega-os-tv-apps/24569/3 "2025-10-17T22:05:52Z")

</div>

Hello @Hoang_Dang ,

Thank you for your question about customizing the focus highlight in Kepler TV apps.  
Our team will look into this and get back to you.

Regards,  
Aishwarya

---

<div class="post-metadata">

**Author:** ![Siva\_Prakash](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@Siva\_Prakash](https://community.amazondeveloper.com/u/Siva_Prakash)\
**Post date:** [October 18, 2025, 3:49am UTC](https://community.amazondeveloper.com/t/how-can-i-remove-or-customize-the-default-focus-highlight-blur-dim-overlay-on-focused-components-in-kepler-vega-os-tv-apps/24569/4 "2025-10-18T03:49:58Z")

</div>

Hi @Hoang_Dang,

Welcome to the community!

Could you please specify the UI elements exhibiting this behaviour? If you have a code snippet which could demonstrate this behaviour, please share.

I think, you may be referring `TouchableOpacity`. Element `TouchableOpacity` has a prop `activeOpacity` which defaults to `0.2`. When this element gets focussed, you will observe that it gets dimmed/blurred as per the default `activeOpacity` value. Depending on your requirement, you may choose to change `activeOpacity` or implement custom focus handling.

Below is a demo which compares the default `activeOpacity` with custom focus handling:

```js
/* eslint-disable prettier/prettier */
import React, {useState} from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';

const App = () => {
  const [feedbackHistory, setFeedbackHistory] = useState(['Ready']);
  const [button2Color, setButton2Color] = useState('#333333');

  const addFeedback = (message: string) => {
    setFeedbackHistory(prev => [...prev, message]);
  };

  return (
    <View style={styles.container}>
      <View style={styles.leftPane}>
        <TouchableOpacity
          style={styles.defaultStyleButton}
          onPress={() => addFeedback('Button 1 pressed (default Opacity is 1)')}
          onFocus={() => addFeedback('Button 1 focused (activeOpacity is by default 0.2)')}
          onBlur={() => addFeedback('Button 1 lost focus (default Opacity is 1)')}
        >
          <Text style={styles.buttonText}>Button 1: TouchableOpacity (default activeOpacity 0.2)</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[styles.updatedStyleButton, {backgroundColor: button2Color}]}
          activeOpacity={1}
          onPress={() => {
            addFeedback('Button 2 pressed (changing backgroundColor to green)');
            setButton2Color('#116211ff');
          }}
          onFocus={() => {
            addFeedback('Button 2 focused (changing backgroundColor to blue)');
            setButton2Color('#0000ff');
          }}
          onBlur={() => {
            addFeedback('Button 2 lost focus (restored backgroundColor to grey)');
            setButton2Color('#333333');
          }}
        >
          <Text style={styles.buttonText}>Button 2: TouchableOpacity (activeOpacity is 1)</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.rightPane}>
        <Text style={styles.feedbackText}>
          {feedbackHistory.join('\n')}
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    padding: 20,
  },
  leftPane: {
    flex: 1,
    justifyContent: 'space-evenly',
    alignItems: 'center',
    paddingRight: 10,
  },
  rightPane: {
    flex: 1,
    backgroundColor: '#333333',
    padding: 15,
    borderRadius: 10,
  },
  defaultStyleButton: {
    alignItems: 'center',
    backgroundColor: '#333333',
    padding: 10,
  },
  updatedStyleButton: {
    alignItems: 'center',
    backgroundColor: '#333333',
    padding: 10,
  },

  buttonText: {
    color: 'white',
    fontSize: 18,
  },
  feedbackText: {
    color: 'white',
    fontSize: 16,
    lineHeight: 24,
  },
});

export default App;

```

 ![image](https://d3mq594dkmpl37.cloudfront.net/original/2X/d/d0bae682e43d2e9668e5a1a403c82c1345d3f5c8.jpeg)

Regards,  
Siva

---

<div class="post-metadata">

**Author:** ![Siva\_Prakash](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@Siva\_Prakash](https://community.amazondeveloper.com/u/Siva_Prakash)\
**Post date:** [October 19, 2025, 12:52pm UTC](https://community.amazondeveloper.com/t/how-can-i-remove-or-customize-the-default-focus-highlight-blur-dim-overlay-on-focused-components-in-kepler-vega-os-tv-apps/24569/5 "2025-10-19T12:52:01Z")

</div>

More information - [Focus Management | Design and Develop Vega Apps](https://developer.amazon.com/docs/vega/0.21/focus-management.html)

---

<div class="post-metadata">

**Author:** ![Hoang\_Dang](https://avatars.discourse-cdn.com/v4/letter/h/f6c823/32.png) [@Hoang\_Dang](https://community.amazondeveloper.com/u/Hoang_Dang)\
**Post date:** [October 20, 2025, 1:51am UTC](https://community.amazondeveloper.com/t/how-can-i-remove-or-customize-the-default-focus-highlight-blur-dim-overlay-on-focused-components-in-kepler-vega-os-tv-apps/24569/6 "2025-10-20T01:51:27Z")

</div>

Hi **[Siva\_Prakash](https://community.amazondeveloper.com/u/siva_prakash),**  
After reviewing my application and comparing it with the code you shared, I realized that the issue was with the `TouchableOpacity` components — adding `activeOpacity={1}` helped me remove the default focus overlay that appeared on each item when focused.

Thank you so much for your support!

I’m currently working on the video playback feature. Could you recommend a library that can play videos? If possible, could you also share a simple example of how to use it? My video data will be fetched from **Pixabay**.

Once again, I’m really glad to have your help, and I hope to continue learning from you.

---

<div class="post-metadata">

**Author:** ![Siva\_Prakash](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@Siva\_Prakash](https://community.amazondeveloper.com/u/Siva_Prakash)\
**Post date:** [October 20, 2025, 3:36am UTC](https://community.amazondeveloper.com/t/how-can-i-remove-or-customize-the-default-focus-highlight-blur-dim-overlay-on-focused-components-in-kepler-vega-os-tv-apps/24569/7 "2025-10-20T03:36:09Z")

</div>

HI @Hoang_Dang,

Glad to know that your issue is resolved.

For video playback, you may refer ‘Vega Video App’ from [Sample Apps | Vega Get Started](https://developer.amazon.com/docs/vega/0.21/sample-app-home.html)

Regards,  
Siva

---

<div class="post-metadata">

**Author:** ![Hoang\_Dang](https://avatars.discourse-cdn.com/v4/letter/h/f6c823/32.png) [@Hoang\_Dang](https://community.amazondeveloper.com/u/Hoang_Dang)\
**Post date:** [October 20, 2025, 7:22am UTC](https://community.amazondeveloper.com/t/how-can-i-remove-or-customize-the-default-focus-highlight-blur-dim-overlay-on-focused-components-in-kepler-vega-os-tv-apps/24569/8 "2025-10-20T07:22:55Z")

</div>

Hi **[Siva\_Prakash](https://community.amazondeveloper.com/u/siva_prakash)**  
I’ve read and analyzed it, and it seems a bit too complicated — is there any simpler example that can just play a basic video?  
Regards,  
Hoang Dang

---

<div class="post-metadata">

**Author:** ![Siva\_Prakash](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@Siva\_Prakash](https://community.amazondeveloper.com/u/Siva_Prakash)\
**Post date:** [October 20, 2025, 7:46am UTC](https://community.amazondeveloper.com/t/how-can-i-remove-or-customize-the-default-focus-highlight-blur-dim-overlay-on-focused-components-in-kepler-vega-os-tv-apps/24569/9 "2025-10-20T07:46:03Z")

</div>

Hi @Hoang_Dang,

Please check the Media Player documentation from [here](https://developer.amazon.com/docs/vega/0.21/media-player.html). Following [this](https://developer.amazon.com/docs/vega/0.21/media-player-setup.html) initial setup and [this](https://developer.amazon.com/docs/vega/0.21/media-player-shaka-player.html) sample code could get you started with a simple media player app.

Regards,  
Siva

---

<div class="post-metadata">

**Author:** ![Hoang\_Dang](https://avatars.discourse-cdn.com/v4/letter/h/f6c823/32.png) [@Hoang\_Dang](https://community.amazondeveloper.com/u/Hoang_Dang)\
**Post date:** [October 20, 2025, 9:00am UTC](https://community.amazondeveloper.com/t/how-can-i-remove-or-customize-the-default-focus-highlight-blur-dim-overlay-on-focused-components-in-kepler-vega-os-tv-apps/24569/10 "2025-10-20T09:00:41Z")

</div>

> [@Siva\_Prakash](#):
>
> Please check the Media Player documentation from [here](https://developer.amazon.com/docs/vega/0.21/media-player.html). Following [this](https://developer.amazon.com/docs/vega/0.21/media-player-setup.html) initial setup and [this](https://developer.amazon.com/docs/vega/0.21/media-player-shaka-player.html) sample code could get you started with a simple media player app.

Hi Siva Prakash,  
I’ve tried setting it up and running it, but the result still isn’t working — every time I open the video, it only shows a black screen and doesn’t play. Could you please help me check what might be wrong? Thank you so much.  
Here is my code

```auto
//PlayerScreen.tsx
import React, {useRef, useEffect, useState} from 'react';
import {StyleSheet, View, Text, TouchableOpacity, Platform} from 'react-native';
import {
  VideoPlayer,
  KeplerVideoSurfaceView,
  KeplerCaptionsView,
} from '@amazon-devices/react-native-w3cmedia';
import {
  ShakaPlayer,
  ShakaPlayerSettings,
} from '../../w3cmedia/shakaplayer/ShakaPlayer';

// ⚙️ Video sample (DASH)
const content = {
  secure: false,
  uri: 'https://cdn.pixabay.com/video/2019/04/06/22634-328940142_large.mp4',
  drm_scheme: '',
  drm_license_uri: '',
};

const DEFAULT_ABR_WIDTH = Platform.isTV ? 3840 : 1919;
const DEFAULT_ABR_HEIGHT = Platform.isTV ? 2160 : 1079;

export default function PlayerScreen() {
  const currShakaPlayerSettings = useRef<ShakaPlayerSettings>({
    secure: false,
    abrEnabled: true,
    abrMaxWidth: DEFAULT_ABR_WIDTH,
    abrMaxHeight: DEFAULT_ABR_HEIGHT,
  });

  const videoPlayer = useRef<VideoPlayer | null>(null);
  const shakaPlayer = useRef<any>(null);
  const [isReady, setIsReady] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [playerSettings] = useState<ShakaPlayerSettings>(
    currShakaPlayerSettings.current,
  );

  useEffect(() => {
    let isMounted = true;

    const setup = async () => {
      await initVideoPlayer();
    };

    setup();

    return () => {
      if (isMounted) {
        cleanup();
      }
      isMounted = false;
    };
  }, []);

  const initVideoPlayer = async () => {
    try {
      setIsLoading(true);
      videoPlayer.current = new VideoPlayer();
      await videoPlayer.current.initialize();

      videoPlayer.current.autoplay = false;

      shakaPlayer.current = new ShakaPlayer(
        videoPlayer.current,
        playerSettings,
      );
      console.log('✅ Shaka Player created');

      await shakaPlayer.current.load(content, true);
      console.log('✅ Shaka content loaded');

      setIsReady(true);
    } catch (err) {
      console.error('❌ Error initializing video player:', err);
    } finally {
      setIsLoading(false);
    }
  };

  // 🧹 Cleanup player
  const cleanup = async () => {
    console.log('🧹 Cleaning up player...');
    try {
      await videoPlayer.current?.deinitialize();
    } catch (err) {
      console.warn('Error cleaning up:', err);
    } finally {
      videoPlayer.current = null;
      shakaPlayer.current = null;
    }
  };

  // Surface & Caption handles
  const onSurfaceCreated = (surfaceHandle: string) => {
    console.log('Surface created:', surfaceHandle);
    videoPlayer.current?.setSurfaceHandle(surfaceHandle);
  };

  const onSurfaceDestroyed = (surfaceHandle: string) => {
    console.log('Surface destroyed:', surfaceHandle);
    videoPlayer.current?.clearSurfaceHandle(surfaceHandle);
  };

  const onCaptionCreated = (captionHandle: string) => {
    console.log('Caption created:', captionHandle);
    videoPlayer.current?.setCaptionViewHandle(captionHandle);
  };

  return (
    <View style={styles.container}>
      {isReady ? (
        <>
          <KeplerVideoSurfaceView
            style={styles.surface}
            onSurfaceViewCreated={onSurfaceCreated}
            onSurfaceViewDestroyed={onSurfaceDestroyed}
          />
          <KeplerCaptionsView
            onCaptionViewCreated={onCaptionCreated}
            style={styles.captionView}
          />
        </>
      ) : (
        <TouchableOpacity
          style={styles.playButton}
          onPress={initVideoPlayer}
          hasTVPreferredFocus={true}>
          <Text style={styles.playLabel}>Start video</Text>
        </TouchableOpacity>
      )}

      {isLoading && (
        <View style={styles.overlay}>
          <Text style={{color: 'white'}}>Loading video...</Text>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {flex: 1, backgroundColor: 'black', justifyContent: 'center'},
  surface: {width: '100%', height: '100%'},
  captionView: {
    width: '100%',
    height: '100%',
    top: 0,
    left: 0,
    position: 'absolute',
    backgroundColor: 'transparent',
    flexDirection: 'column',
    alignItems: 'center',
    zIndex: 2,
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 10,
    backgroundColor: 'rgba(0,0,0,0.3)',
  },
  playButton: {
    backgroundColor: '#303030',
    padding: 20,
    borderRadius: 10,
    alignSelf: 'center',
  },
  playLabel: {color: '#fff', fontSize: 20},
});

```

 ![Screenshot 2025-10-20 at 15.56.42](https://d3mq594dkmpl37.cloudfront.net/original/2X/7/72a78a39ad84440279ea17604c525cd45885b313.png)

```auto
//tsconfig.json
{
    "extends": "@tsconfig/react-native/tsconfig.json",
    "compilerOptions": {
        "types": ["jest", "@amazon-devices/react-native-kepler"],
        "typeRoots": [
            "src/w3cmedia/shakaplayer",
            "node_modules/@types"
        ]
    },
    "exclude": [
        "src/shakaplayer/dist"
    ]
}

```

Regards,  
Hoang Dang

---

<div class="post-metadata">

**Author:** ![amen](https://avatars.discourse-cdn.com/v4/letter/a/ee7513/32.png) [@amen](https://community.amazondeveloper.com/u/amen)\
**Post date:** [October 21, 2025, 12:34am UTC](https://community.amazondeveloper.com/t/how-can-i-remove-or-customize-the-default-focus-highlight-blur-dim-overlay-on-focused-components-in-kepler-vega-os-tv-apps/24569/11 "2025-10-21T00:34:06Z")

</div>

Hi @Hoang_Dang ,

I’ve reviewed your video playback issue and identified two adjustments that should resolve the black screen problem.

## What I Found

1. **Missing playback trigger** : Since you’ve set `autoplay = false`, the video loads but doesn’t start playing automatically.

2. **Video format compatibility** : ShakaPlayer requires adaptive streaming formats like DASH manifests rather than direct MP4 files.

## Suggested Changes

Please try these modifications:

**1. Add the play() call**

In your `initVideoPlayer` function, add this line after loading the content:

```javascript
await shakaPlayer.current.load(content, true);
console.log('✅ Shaka content loaded');

// Add this line:
await shakaPlayer.current.play();
console.log('▶️ Playback started');

```

**2. Use a compatible video format**

Replace your current video URL with this DASH format example:

```javascript
const content = {
  secure: false,
  uri: 'https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd', // DASH format example
  drm_scheme: '',
  drm_license_uri: '',
};

```

Would you be able to give these changes a try? Let me know if you run into any other issues.

Regards,  
Aishwarya

---

<div class="post-metadata">

**Author:** ![Hoang\_Dang](https://avatars.discourse-cdn.com/v4/letter/h/f6c823/32.png) [@Hoang\_Dang](https://community.amazondeveloper.com/u/Hoang_Dang)\
**Post date:** [October 21, 2025, 1:45am UTC](https://community.amazondeveloper.com/t/how-can-i-remove-or-customize-the-default-focus-highlight-blur-dim-overlay-on-focused-components-in-kepler-vega-os-tv-apps/24569/12 "2025-10-21T01:45:38Z")

</div>

Hi [amen](https://community.amazondeveloper.com/t/how-can-i-remove-or-customize-the-default-focus-highlight-blur-dim-overlay-on-focused-components-in-kepler-vega-os-tv-apps/24569/11)  
I’ve updated the code following your guidance and also checked the version of **@amazon-devices/react-native-w3cmedia** , which should be **2.1.0**. The video is now playing successfully.  
First of all, thank you for your help! I also have a few more questions so I can understand this part better:

1. Is there a way for me to check the player’s status (whether it’s loading, has finished loading, is playing, or has ended)? I want to add a **loading indicator** for the video, and later I might want to trigger an action when the video finishes.

2. How can I change the default URL — `uri: 'https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd'` — to use an **MP4 file (or other formats)** instead?

3. Regarding the video interface, can I **customize the player UI** , such as adding media controls to control playback?

Regards,  
Hoang Dang

---

<div class="post-metadata">

**Author:** ![amen](https://avatars.discourse-cdn.com/v4/letter/a/ee7513/32.png) [@amen](https://community.amazondeveloper.com/u/amen)\
**Post date:** [October 22, 2025, 11:18pm UTC](https://community.amazondeveloper.com/t/how-can-i-remove-or-customize-the-default-focus-highlight-blur-dim-overlay-on-focused-components-in-kepler-vega-os-tv-apps/24569/13 "2025-10-22T23:18:18Z")

</div>

Hi @Hoang_Dang ,

Great to hear that your video is now playing successfully! Here are the answers to your three questions:

**1. Checking Player Status**

With the [Vega Media Controls](https://developer.amazon.com/docs/kepler-tv/media-controls-get-started.html) integration, you can use the `IPlaybackState` interface to monitor player status. The W3C Media API automatically handles state management when integrated with Kepler Media Controls (KMC). [IPlaybackState](https://developer.amazon.com/docs/vega-api/0.21/turbo-modules.types.KeplerMediaControlsTypes.interfaces.IPlaybackState.amazon-devices_kepler-media-controls.html)

**2. Using MP4 Files Instead of DASH**

Set the video source directly using the HTMLMediaElement’s `src` property for MP4 files:

```javascript
// For MP4 files, use HTMLMediaElement directly
const content = {
    src: 'your-domain.com/video.mp4'// Direct MP4 URL
};

// Set the source
player.src = content.src;

// Control autoplay
player.autoplay = false; // or true for automatic playback

// Start playback manually
await player.play();

```

The [HTMLMediaElement API](https://developer.amazon.com/docs/vega-api/0.21/HTMLMediaElement.classes.HTMLMediaElement.amazon-devices_react-native-w3cmedia.html) supports various formats including MP4, WebM, and Ogg through the src property.

[@amazon-devices/react-native-w3cmedia](https://developer.amazon.com/docs/vega-api/0.21/README.amazon-devices_react-native-w3cmedia.html)

**3. Customizing Player UI and Media Controls**

The Vega Media Controls documentation shows you can override specific control commands while maintaining the automatic integration. You can customize the player controls by extending the VegaMediaControlHandler class: [W3C Media integration with Vega Media Controls](https://developer.amazon.com/docs/vega/0.21/media-player-media-control.html)

Let me know if you need clarification on any of these points or run into any issues during implementation!

Best regards,  
Aishwarya

---

<div class="post-metadata">

**Author:** ![amen](https://avatars.discourse-cdn.com/v4/letter/a/ee7513/32.png) [@amen](https://community.amazondeveloper.com/u/amen)\
**Post date:** [October 31, 2025, 4:14am UTC](https://community.amazondeveloper.com/t/how-can-i-remove-or-customize-the-default-focus-highlight-blur-dim-overlay-on-focused-components-in-kepler-vega-os-tv-apps/24569/14 "2025-10-31T04:14:39Z")

</div>