Preview poster

Overview

The PreviewPoster component is a React Native component designed for use within a carousel. It displays a poster image that gradually fades out and scales away while a video starts playing in the background when the card is focused. It includes a mute/unmute button that persists user preferences across all instances.

Features

• Displays a poster image before the video starts playing.
• Plays the video when the card remains focused for a specified delay.
• Stops the video when the card loses focus or is no longer visible.
• Detects visibility changes using onLayout.
• Stops playback when switching to a different tab or screen.
• Includes a mute/unmute button with persistent state across instances.
• Shows a progress bar for the video playback.
• Includes a play/pause button with persistent state across instances
• Automatically pauses playback when the component scrolls out of view, and resumes when it comes back into view — unless manually paused by the user.

Props

Prop Name	Type	Default	Description
posterUri	string	Required	The URI of the poster image displayed before the video starts.
videoUri	string	Required	The URI of the video to be played when focused.
isFocused	boolean	Required	Determines whether the card is currently focused.
focusDelayMs	number	1000	Delay (in milliseconds) before the video starts playing when focused.
repeat	boolean	true	Determines if the video should loop after finishing.
showVolume	boolean	true	Displays the mute/unmute button.
showPlayPause	boolean	true	Displays the play/pause button.
showProgress	boolean	true	Displays the progress bar at the top or bottom.
progressPosition	'top' | 'bottom'	'bottom'	Position of the progress bar.
tintColor	string	'white'	Tint color for progress bar and mute button icon.
muteButtonStyle	StyleProp<ViewStyle>	undefined	Optional style override for the mute/unmute button container.
pauseButtonStyle	StyleProp<ViewStyle>	undefined	Optional style override for the play/pause button container.
progressContainerStyle	StyleProp<ViewStyle>	undefined	Optional style override for the progress bar container.
progressBarStyle	StyleProp<ViewStyle>	undefined	Optional style override for the visual progress bar.
overlayView	StyleProp<ViewStyle>	undefined	Optional overlay view rendered on top of the Video / Poster.
overlayPosition	'Poster' | 'Video'	Video	Position of the overlay view. Rendered on top of Video by default.
isVideoPlaying	boolean	Required	Controls whether the video should currently be playing.
setPlaybackState	(play: boolean, isUserAction: boolean) => void	Required	Function to update the video’s play/pause state. • play: true to play, false to pause. • isUserAction (optional): Set to true if triggered by a user action (e.g., button press), or leave out for automatic control (e.g., scroll-based).

Usage

import { PreviewPoster } from './PreviewPoster';

const MyComponent = () => {
  const [isVideoPlaying, setVideoPlayState] = useState(true);
    /**
   * Function to update the video play state.
   * 'play' determines whether the video should play (true) or pause (false)
   * 'isUserAction' is optional and defaults to 'false'; it tells whether the action was initiated by the user(button Press)
   */
  const setPlaybackState = (play: boolean = true, isUserAction: boolean = false) => {
    setVideoPlayState(play);  // Updates the state to play or pause the video
  };
  return (
    <PreviewPoster
      posterUri="https://example.com/poster.jpg"
      videoUri="https://example.com/video.mp4"
      isFocused={true}
      isVideoPlaying={isVideoPlaying} //'isVideoPlaying' tells the PreviewPoster whether to play or pause the video
      setPlaybackState={setPlaybackState}
    />
  );
};

Behavior

• The video starts playing after focusDelayMs if the card remains focused.
• The poster fades out and scales out while the video starts playing.
• The video stops playing when the card loses focus, user switches tabs, or the component goes out of view.
• Mute/unmute state is stored in SessionStorage, ensuring consistency across multiple cards.

Dependencies

• react-native-video for video playback.
• react-navigation hooks (useFocusEffect).
• react-native-svg.

References

• Using typescript with existing RN Project
• Configuring TypeScript with ESLint
• React Native GeoLocation
• React Native GeoLocation - Agontuk
• npm i eslint-plugin-react --save-dev.
• Add "lint:fix": "npx eslint './src/**/*.{ts,tsx}'" in scripts - package.json.
• "pretty:fix": "npx prettier \"src/**/*.ts*\" --write" in scripts - package.json.
• Publishing NPM Packages for RN

---