feat: thumbnail image custom styles #232
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…#231) - Required in order to be able to apply a `resizeMode` style to the video thumbnail. - `ImageBackground` component has a separate `style` prop and `imageStyle` prop. - The `resizeMode` property can only be applied via the `imageStyle` prop. - Updated docs with the new `customStyle.thumbnailImage` property. - Also fixed duplicate variable name `width` in `onLayout` function. - Added `customStyles.thumbnailImage` to example app.
|
@moskalakamil Just following up on this to see if you are ok with the fix. |
moskalakamil
approved these changes
May 5, 2025
moskalakamil
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
There is now a new
customStylesproperty that can be passed to the video player component:thumbnailImage. This is required becausereact-native-video-playeruses theImageBackgroundcomponent fromreact-nativeto render the thumbnail image. TheImageBackgroundcomponent has two separate props for styles:styleandimageStyle. TheresizeModecan only be passed to theImageBackgroundcomponent via theimageStyleprop, not thestyleprop (as it was being passed previously).NOTE: When using the
react-native-video-playercomponent in my app, I noticed that currently TypeScript incorrectly reports that the type ofcustomStyles.thumbnailisImageStyle, but it is actually defined asViewStyleinindex.tsx. I think that maybe theindex.d.tsfile needs to be generated again in order to make sure the types are correct in the npm package.fixes #231
Motivation
When I was using
react-native-video-playerin my app, I noticed that when I passedresizeModevia thecustomStyles.thumbnailprop, theresizeModewas not being applied.Changes
customStyles.thumbnailImageproperty and passed this to theThumbnailImageBackgroundcomponent asimageStyleprop.customStyle.thumbnailImageproperty.customStyles.thumbnailImageto example app (resizeMode: 'cover').widthinonLayoutfunction insrc/index.ts.Test plan
To manually test, run the example app and notice that the thumbnail covers the entire video container:
Then change
customStyles.thumbnailImage.resizeModeto "contain", and notice that the thumbnail no longer covers the entire container:I don't think an automated test is required for this change.