Skip to main content

BaseIconButton

BaseIconButton is a low-level utility component used to create touchable icon buttons in the video player.
It provides a consistent ripple effect, theming integration, and standard spacing, making it the base for other controls like PlayButton, MuteButton, and SettingsButton.

Features:

  • Built on react-native-material-ripple for touch feedback.
  • Integrates with the theme system (useVideo) for colors & sizes.
  • Provides consistent padding (10px) around icons.
  • Serves as the base layer for all other control buttons.

Usage​

import { BaseIconButton } from 'react-native-video-toolkit';
import { Heart } from 'lucide-react-native';

const MyButton = () => {
  return <BaseIconButton IconComponent={Heart} size={28} color="#f00" onPress={() => console.log('Pressed')} />;
};

Props​

PropTypeRequiredDefaultDescription
IconComponentReact.ElementTypeYes–The icon component to render (e.g. from lucide-react-native or custom).
sizenumberNotheme.iconSizes.mdSize of the icon.
colorstringNotheme.colors.textColor of the icon.
...propsPressablePropsNo–Any other props from react-native-material-ripple are passed through.

Examples​

Default Icon Button​

<BaseIconButton IconComponent={Heart} />

Customized Ripple Button​

<BaseIconButton
  IconComponent={Heart}
  size={32}
  color="purple"
  rippleCentered
  rippleDuration={800}
  onPress={() => console.log('Liked!')}
/>
warning

This is a building block — you typically won't use it directly. Instead, use higher-level controls like: