<Vimeo
videoId={'embeeded'} // embeeded link here.
onReady={() => console.log('Video is ready')}
onPlay={() => console.log('Video is playing')}
onPlayProgress={(data) => console.log('Video progress data:', data)}
onFinish={() => console.log('Video is finished')}
loop={false}
autoPlay={true}
controls={true}
speed={false}
time={'0m0s'}
/>
I don't have any problems with normal videos. I can view them. What I want is to be able to play private videos that are closed to the outside. The "react-native-video-iframe" library.
"react-native-vimeo-iframe": "^1.0.4",
Related
We are facing some very weird issue with opening keyboard on Android device.
It works great on iOS, 90% on Android devices, but on some devices it simply don't work = the keyboard don't show despite the input field has focus.
We tried it with different approaches (with refs, with timeout and without ref either).
All with the same result :/. One of the devices we are trying has API 30, so it even doesn't seem to be an old API problem.
Have anybody facing similar issue? What can cause the issue? Any tips how to debug it?
Here is code:
export const AddNotificationModal: AddNotificationModalT = ({
visible,
category,
onCloseModal,
}) => {
const input = useRef<TextInput>(null);
...
useEffect(() => {
if (visible) {
// 1.
// InteractionManager.runAfterInteractions(() => {
// if (input?.current) {
// input.current.focus();
// }
// });
// 2.
input.current?.focus();
// 3.
// setTimeout(() => input.current?.focus(), 150);
}
}, [visible]);
return (
<Modal
name={AddNotificationModal.name}
visible={visible}>
...
<View>
<TextInput autoFocus={true} ref={input} />
<Button dark onPress={() => onConfirm()}>
{t('shared:buttons.safe')}
</Button>
</View>
</Modal>
);
};
I have a qr-code in my react-native project from react-native-qrcode-svg like this:
<QRCode
value={singleTicketResponse.voucher}
size={width * 0.5}
getRef={(c) => (svg = c)}
/>;
I want to save this QR to the gallery! I use this code for saving it to gallery!
svg.toDataURL((data) => {
RNFS.writeFile(
RNFS.CachesDirectoryPath + `/${tracking_code}.png`,
data,
"base64"
)
.then((success) => {
return CameraRoll.save(
RNFS.CachesDirectoryPath + `/${tracking_code}.png`,
"photo"
);
})
.then(() => {
onClose();
})
.catch((e) => {
console.log("saveToGallery", e);
});
});
Now I want to save this QR with white background in the gallery!
Because now, I save QR to gallery and gallery show this in black background and scanner does not detect QR-code!!! Is there any solution??
In other words, how to combine two images (white background and QR-code) or how to set a background for this image??
You can simply add quietZone props to QRCode component. This props is the margin around the QR-code and when yo save the QR it is shown!!
<QRCode
value={singleTicketResponse.voucher}
size={width * 0.5}
quietZone={10} // this props
getRef={c => (svg = c)}
/>
I need a vimeo player for my react-native app, but it can't be an WebView. There are some apps with this behaviour, but I can't find libs for it.
const html = `<iframe ... src="https://player.vimeo.com/video/${video.id}"></iframe>`
<WebView ... source={{ html }} />
This snippet is my current player, but it doesn't offer a good user experience for being webview.
You can use this module. React Native Vimeo Player
You can run npm install react-native-vimeo
Usage
<Vimeo
ref='video'
videoId='2619976' // Vimeo video ID
onReady={ () => console.log('Video is ready') }
onPlay={ () => console.log('Video is playing') }
onPlayProgress={ data => console.log('Video progress data:', data) }
onFinish={ () => console.log('Video is finished') }
/>
My requirement is when the page loads the video should be start playing from the local storage and but it doesnt play at all.
Initially the state paused:true , and when the video loads i tried to change the state to false , but the video doesnt play automatically.
<Video
onEnd={this.handleEnd}
onLoad={this.handleLoad}
onProgress={this.handleProgress}
autoplay={true}
paused={this.state.paused}
ref={ref=> {
this.player = ref;
}}
resizeMode="cover"
source={{uri:this.state.v_url}}
volume={this.state.muted==true?0.0:1.0}
muted={this.state.muted}
/>
handleLoad = (meta) => {
console.log('Its working',this.props)
this.setState({
duration:meta.duration,
paused:false,
})
Use #coffeebeanslabs/react-native-inviewport to detect whether your component is in your device viewport:
Install using: npm i #coffeebeanslabs/react-native-inviewport
then do the following in your code:
import InViewPort from "#coffeebeanslabs/react-native-inviewport";
checkVideoVisible(isVideoVisible) {
this.setState({videoVisible: isVideoVisible});
}
<InViewPort onChange={(isVideoVisible) => this.checkVideoVisible(isVideoVisible)}>
<Video
paused={!this.state.videoVisible}
/>
</InViewPort>
I have a list of items with a Video URL in each row.I have used React-Native-Video component for Video view.
<TouchableOpacity
style={styles.fullScreen}
onPress={() => this.setState({ paused: !this.state.paused })}
>
<Video source={{ uri: rowData.podcastUrl }} // URL
ref={(ref) => {
// Store reference
this.player = ref
......
......
}}
paused={true}
</TouchableOpacity>
Above code is inside renderMyList() function which is called on the rendering of each row.
When I load my UI all the videos are either in play mode or stopped based on 'paused' state false or true(whatever I pass in above. But I want to properly handle the play/pause of individual video(list item).I have maintained a paused state variable.
Please suggest some sample code.
If you are planning to let only one video to play any given moment you can do something like below
onPress={() => { this.setState({ playing: 'someUniqueIdForThisVideo'}) }}
And check if that video is playing
paused={this.state.playing !== 'videoIdOrSomething'}
If you want multiple videos to be played you can do something like below
onPress={() => { this.setState({ ['someUniqueIdForThisVideo']: true}) }}
And check state like below
paused={this.state['someUniqueIdForThisVideo'] !== true}
This is just to give you a rough idea. You need to implement some sort of logic to set state to false if its already playing.