[expo-av] Add support for passing custom styles to Video poster

Fixes #4165

CHANGELOG.md

@@ -46,6 +46,7 @@ This is the log of notable changes to the Expo client that are developer-facing.
 - added `foregroundService` option to background location (Android Oreo and newer) by [@tsapeta](https://github.com/tsapeta) ([#3837](https://github.com/expo/expo/pull/3837))
 - added support for picking animated GIFs with `ImagePicker` by [@sjchmiela](https://github.com/sjchmiela) ([#3844](https://github.com/expo/expo/pull/3844))
 - added support for headers in `downloadAsync` method in `FileSystem` by [@mczernek](https://github.com/mczernek) ([#3911](https://github.com/expo/expo/pull/3911))
+- added support for custom poster styles in `Video` by [@sjchmiela](https://github.com/sjchmiela) ([#4165](https://github.com/expo/expo/issues/4165))
 
 ### 🐛 Bug fixes
 

docs/pages/versions/unversioned/sdk/video.md

@@ -67,6 +67,10 @@ The `source` and `posterSource` props customize the source of the video content.
   -   A dictionary of the form `{ uri: 'http://path/to/file' }` with a network URL pointing to a image file on the web.
   -   `require('path/to/file')` for an image file asset in the source code directory.
 
+- `posterStyle`
+
+  An optional property to pass custom styles to the poster image.
+
 The `useNativeControls`, `resizeMode`, and `usePoster` props customize the UI of the component.
 
 - `useNativeControls`

packages/expo-av/src/Video.tsx

@@ -106,6 +106,7 @@ export default class Video extends React.Component<VideoProps, VideoState> imple
       }), // remote URI like { uri: 'http://foo/bar.mp4' }
       PropTypes.number, // asset module like require('./foo/bar.mp4')
     ]),
+    posterStyle: ViewPropTypes.style,
 
     // Callbacks
     onPlaybackStatusUpdate: PropTypes.func,
@@ -364,7 +365,7 @@ export default class Video extends React.Component<VideoProps, VideoState> imple
   _renderPoster = () =>
     this.props.usePoster && this.state.showPoster ? (
       // @ts-ignore: the react-native type declarations are overly restrictive
-      <Image style={_STYLES.poster} source={this.props.posterSource!} />
+      <Image style={[_STYLES.poster, this.props.posterStyle]} source={this.props.posterSource!} />
     ) : null;
 
   render() {

packages/expo-av/src/Video.types.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View } from 'react-native';
+import { View, StyleProp, ViewStyle } from 'react-native';
 
 import { PlaybackNativeSource, PlaybackSource, PlaybackStatus, PlaybackStatusToSet } from './AV';
 export type NaturalSize = {
@@ -28,6 +28,7 @@ export type VideoProps = {
   // Source stuff
   source?: PlaybackSource; // { uri: 'http://foo/bar.mp4' }, Asset, or require('./foo/bar.mp4')
   posterSource?: { uri: string } | number; // { uri: 'http://foo/bar.mp4' } or require('./foo/bar.mp4')
+  posterStyle?: StyleProp<ViewStyle>;
 
   // Callbacks
   onPlaybackStatusUpdate?: (status: PlaybackStatus) => void;