Expo / React Native: Video Failing to Resize
I'm using Expo with React Native, testing on the Android simulator on a Galaxy S8+.
I'm using the Video component from the Expo library, as I couldn't get react-native-video to work.
I'm using the following code:
<Video style={styles.video} source={{ uri: url }} isMuted={false} shouldPlay isLooping usePoster={true} useNativeControls={false} resizeMode="contain" />
styles.video is simply {width: window.width, height: 650}
Which displays the following: Screenshot of issue
But, if you load the video in, it actually fits the whole window and is sized the way I want, but only for half a second. After that it immediately goes small like in the screenshot. I've tried cover and center as well, and it hasn't worked. Any help would be appreciated.
Edit: More Details:
What I want it to look like is something like this, which I have working for images: Image of what it should look like
With images, I'm using the default Image component from React Native in the following way: <Image style={styles.image} source={{ uri: data.url }} resizeMode="contain" />
And styles.images is identical to styles.video at the moment.
javascript css react-native video expo
asked Nov 27 '18 at 6:23
Oscar WongOscar Wong
11
add a comment |
I'm using Expo with React Native, testing on the Android simulator on a Galaxy S8+.
I'm using the Video component from the Expo library, as I couldn't get react-native-video to work.
I'm using the following code:
<Video style={styles.video} source={{ uri: url }} isMuted={false} shouldPlay isLooping usePoster={true} useNativeControls={false} resizeMode="contain" />
styles.video is simply {width: window.width, height: 650}
Which displays the following: Screenshot of issue
But, if you load the video in, it actually fits the whole window and is sized the way I want, but only for half a second. After that it immediately goes small like in the screenshot. I've tried cover and center as well, and it hasn't worked. Any help would be appreciated.
Edit: More Details:
What I want it to look like is something like this, which I have working for images: Image of what it should look like
With images, I'm using the default Image component from React Native in the following way: <Image style={styles.image} source={{ uri: data.url }} resizeMode="contain" />
And styles.images is identical to styles.video at the moment.
javascript css react-native video expo
asked Nov 27 '18 at 6:23
Oscar WongOscar Wong
11
should the height be specified in pixels? height: 650px
– Carol McKay
Nov 27 '18 at 6:37
Please share a sample design of your screen or denote where exactly you want to place the Video Player !
– Ron
Nov 27 '18 at 6:38
Also, should that be window.innerWidth ? instead of window.width w3schools.com/jsref/prop_win_innerheight.asp
– Carol McKay
Nov 27 '18 at 6:39
@Ron I've added some clarifying details to the original post, with a screenshot of roughly what it should look like.
– Oscar Wong
Nov 27 '18 at 17:05
@CarolMcKay using numbers / "window.width" works on React Native, at least in my experience / to my knowledge.
– Oscar Wong
Nov 27 '18 at 17:06
add a comment |
I'm using Expo with React Native, testing on the Android simulator on a Galaxy S8+.
I'm using the Video component from the Expo library, as I couldn't get react-native-video to work.
I'm using the following code:
<Video style={styles.video} source={{ uri: url }} isMuted={false} shouldPlay isLooping usePoster={true} useNativeControls={false} resizeMode="contain" />
styles.video is simply {width: window.width, height: 650}
Which displays the following: Screenshot of issue
But, if you load the video in, it actually fits the whole window and is sized the way I want, but only for half a second. After that it immediately goes small like in the screenshot. I've tried cover and center as well, and it hasn't worked. Any help would be appreciated.
Edit: More Details:
What I want it to look like is something like this, which I have working for images: Image of what it should look like
With images, I'm using the default Image component from React Native in the following way: <Image style={styles.image} source={{ uri: data.url }} resizeMode="contain" />
And styles.images is identical to styles.video at the moment.
javascript css react-native video expo
asked Nov 27 '18 at 6:23
Oscar WongOscar Wong
11
I'm using Expo with React Native, testing on the Android simulator on a Galaxy S8+.
I'm using the Video component from the Expo library, as I couldn't get react-native-video to work.
I'm using the following code:
<Video style={styles.video} source={{ uri: url }} isMuted={false} shouldPlay isLooping usePoster={true} useNativeControls={false} resizeMode="contain" />
styles.video is simply {width: window.width, height: 650}
Which displays the following: Screenshot of issue
But, if you load the video in, it actually fits the whole window and is sized the way I want, but only for half a second. After that it immediately goes small like in the screenshot. I've tried cover and center as well, and it hasn't worked. Any help would be appreciated.
Edit: More Details:
What I want it to look like is something like this, which I have working for images: Image of what it should look like
With images, I'm using the default Image component from React Native in the following way: <Image style={styles.image} source={{ uri: data.url }} resizeMode="contain" />
And styles.images is identical to styles.video at the moment.
javascript css react-native video expo
javascript css react-native video expo
asked Nov 27 '18 at 6:23
Oscar WongOscar Wong
11
asked Nov 27 '18 at 6:23
Oscar WongOscar Wong
11
edited Nov 27 '18 at 17:04
Oscar Wong
asked Nov 27 '18 at 6:23
Oscar WongOscar Wong
11
asked Nov 27 '18 at 6:23
Oscar WongOscar Wong
11
asked Nov 27 '18 at 6:23
Oscar WongOscar Wong
11
11
should the height be specified in pixels? height: 650px
– Carol McKay
Nov 27 '18 at 6:37
Please share a sample design of your screen or denote where exactly you want to place the Video Player !
– Ron
Nov 27 '18 at 6:38
Also, should that be window.innerWidth ? instead of window.width w3schools.com/jsref/prop_win_innerheight.asp
– Carol McKay
Nov 27 '18 at 6:39
@Ron I've added some clarifying details to the original post, with a screenshot of roughly what it should look like.
– Oscar Wong
Nov 27 '18 at 17:05
@CarolMcKay using numbers / "window.width" works on React Native, at least in my experience / to my knowledge.
– Oscar Wong
Nov 27 '18 at 17:06
add a comment |
should the height be specified in pixels? height: 650px
– Carol McKay
Nov 27 '18 at 6:37
Please share a sample design of your screen or denote where exactly you want to place the Video Player !
– Ron
Nov 27 '18 at 6:38
Also, should that be window.innerWidth ? instead of window.width w3schools.com/jsref/prop_win_innerheight.asp
– Carol McKay
Nov 27 '18 at 6:39
@Ron I've added some clarifying details to the original post, with a screenshot of roughly what it should look like.
– Oscar Wong
Nov 27 '18 at 17:05
@CarolMcKay using numbers / "window.width" works on React Native, at least in my experience / to my knowledge.
– Oscar Wong
Nov 27 '18 at 17:06
should the height be specified in pixels? height: 650px
– Carol McKay
Nov 27 '18 at 6:37
should the height be specified in pixels? height: 650px
– Carol McKay
Nov 27 '18 at 6:37
Please share a sample design of your screen or denote where exactly you want to place the Video Player !
– Ron
Nov 27 '18 at 6:38
Please share a sample design of your screen or denote where exactly you want to place the Video Player !
– Ron
Nov 27 '18 at 6:38
Also, should that be window.innerWidth ? instead of window.width w3schools.com/jsref/prop_win_innerheight.asp
– Carol McKay
Nov 27 '18 at 6:39
Also, should that be window.innerWidth ? instead of window.width w3schools.com/jsref/prop_win_innerheight.asp
– Carol McKay
Nov 27 '18 at 6:39
@Ron I've added some clarifying details to the original post, with a screenshot of roughly what it should look like.
– Oscar Wong
Nov 27 '18 at 17:05
@Ron I've added some clarifying details to the original post, with a screenshot of roughly what it should look like.
– Oscar Wong
Nov 27 '18 at 17:05
@CarolMcKay using numbers / "window.width" works on React Native, at least in my experience / to my knowledge.
– Oscar Wong
Nov 27 '18 at 17:06
@CarolMcKay using numbers / "window.width" works on React Native, at least in my experience / to my knowledge.
– Oscar Wong
Nov 27 '18 at 17:06
add a comment |
1 Answer
1
active
oldest
votes
According to your Screen, your front-end could be designed like this.
return(
<View style={{ width: "100%",height: "100%", flex: 1}}>
<View style={{flex:0.7,justifyContent:'center'}}>
<Video
source={{ uri: url }}
isMuted={false}
shouldPlay
isLooping
usePoster={true}
useNativeControls={false}
/>
</View>
<View style={{flex:0.1}}/>
<TouchableOpacity style={{flex:0.1,paddingHorizontal:10}}>
<View style={{width:"100%",justifyContent:"center",alignItems:"center",backgroundColor:"blue"}}>
<Text>Next</Text>
</View>
</TouchableOpacity>
</View>
)
Do not forget to import TouchableOpacity !
Hope I could help you. Do comment if need more assistance.
answered Nov 27 '18 at 17:29
RonRon
416318
Thank you for the reply, but when I tried this implementation, I found that the video wouldn't play at all if I set height to 100% or auto. The video element just disappeared.
– Oscar Wong
Nov 28 '18 at 5:16
ok, just use my above code as it is and check. Don't give height.
– Ron
Nov 28 '18 at 5:18
same result when I didn't give height, the component just disappears and the "next" button jumps to the top of the page (because the component seems to have 0 height)
– Oscar Wong
Nov 28 '18 at 5:44
I updated code. Use it and check !
– Ron
Nov 28 '18 at 5:56
I tried it again, still can't get it to work. It's like ignoring me telling it to stretch, and is instead only playing at native size.
– Oscar Wong
Dec 3 '18 at 5:38
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53493882%2fexpo-react-native-video-failing-to-resize%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
According to your Screen, your front-end could be designed like this.
return(
<View style={{ width: "100%",height: "100%", flex: 1}}>
<View style={{flex:0.7,justifyContent:'center'}}>
<Video
source={{ uri: url }}
isMuted={false}
shouldPlay
isLooping
usePoster={true}
useNativeControls={false}
/>
</View>
<View style={{flex:0.1}}/>
<TouchableOpacity style={{flex:0.1,paddingHorizontal:10}}>
<View style={{width:"100%",justifyContent:"center",alignItems:"center",backgroundColor:"blue"}}>
<Text>Next</Text>
</View>
</TouchableOpacity>
</View>
)
Do not forget to import TouchableOpacity !
Hope I could help you. Do comment if need more assistance.
answered Nov 27 '18 at 17:29
RonRon
416318
Thank you for the reply, but when I tried this implementation, I found that the video wouldn't play at all if I set height to 100% or auto. The video element just disappeared.
– Oscar Wong
Nov 28 '18 at 5:16
ok, just use my above code as it is and check. Don't give height.
– Ron
Nov 28 '18 at 5:18
same result when I didn't give height, the component just disappears and the "next" button jumps to the top of the page (because the component seems to have 0 height)
– Oscar Wong
Nov 28 '18 at 5:44
I updated code. Use it and check !
– Ron
Nov 28 '18 at 5:56
I tried it again, still can't get it to work. It's like ignoring me telling it to stretch, and is instead only playing at native size.
– Oscar Wong
Dec 3 '18 at 5:38
add a comment |
According to your Screen, your front-end could be designed like this.
return(
<View style={{ width: "100%",height: "100%", flex: 1}}>
<View style={{flex:0.7,justifyContent:'center'}}>
<Video
source={{ uri: url }}
isMuted={false}
shouldPlay
isLooping
usePoster={true}
useNativeControls={false}
/>
</View>
<View style={{flex:0.1}}/>
<TouchableOpacity style={{flex:0.1,paddingHorizontal:10}}>
<View style={{width:"100%",justifyContent:"center",alignItems:"center",backgroundColor:"blue"}}>
<Text>Next</Text>
</View>
</TouchableOpacity>
</View>
)
Do not forget to import TouchableOpacity !
Hope I could help you. Do comment if need more assistance.
answered Nov 27 '18 at 17:29
RonRon
416318
Thank you for the reply, but when I tried this implementation, I found that the video wouldn't play at all if I set height to 100% or auto. The video element just disappeared.
– Oscar Wong
Nov 28 '18 at 5:16
ok, just use my above code as it is and check. Don't give height.
– Ron
Nov 28 '18 at 5:18
same result when I didn't give height, the component just disappears and the "next" button jumps to the top of the page (because the component seems to have 0 height)
– Oscar Wong
Nov 28 '18 at 5:44
I updated code. Use it and check !
– Ron
Nov 28 '18 at 5:56
I tried it again, still can't get it to work. It's like ignoring me telling it to stretch, and is instead only playing at native size.
– Oscar Wong
Dec 3 '18 at 5:38
add a comment |
According to your Screen, your front-end could be designed like this.
return(
<View style={{ width: "100%",height: "100%", flex: 1}}>
<View style={{flex:0.7,justifyContent:'center'}}>
<Video
source={{ uri: url }}
isMuted={false}
shouldPlay
isLooping
usePoster={true}
useNativeControls={false}
/>
</View>
<View style={{flex:0.1}}/>
<TouchableOpacity style={{flex:0.1,paddingHorizontal:10}}>
<View style={{width:"100%",justifyContent:"center",alignItems:"center",backgroundColor:"blue"}}>
<Text>Next</Text>
</View>
</TouchableOpacity>
</View>
)
Do not forget to import TouchableOpacity !
Hope I could help you. Do comment if need more assistance.
answered Nov 27 '18 at 17:29
RonRon
416318
According to your Screen, your front-end could be designed like this.
return(
<View style={{ width: "100%",height: "100%", flex: 1}}>
<View style={{flex:0.7,justifyContent:'center'}}>
<Video
source={{ uri: url }}
isMuted={false}
shouldPlay
isLooping
usePoster={true}
useNativeControls={false}
/>
</View>
<View style={{flex:0.1}}/>
<TouchableOpacity style={{flex:0.1,paddingHorizontal:10}}>
<View style={{width:"100%",justifyContent:"center",alignItems:"center",backgroundColor:"blue"}}>
<Text>Next</Text>
</View>
</TouchableOpacity>
</View>
)
Do not forget to import TouchableOpacity !
Hope I could help you. Do comment if need more assistance.
answered Nov 27 '18 at 17:29
RonRon
416318
edited Nov 28 '18 at 5:56
answered Nov 27 '18 at 17:29
RonRon
416318
answered Nov 27 '18 at 17:29
RonRon
416318
answered Nov 27 '18 at 17:29
RonRon
416318
416318
Thank you for the reply, but when I tried this implementation, I found that the video wouldn't play at all if I set height to 100% or auto. The video element just disappeared.
– Oscar Wong
Nov 28 '18 at 5:16
ok, just use my above code as it is and check. Don't give height.
– Ron
Nov 28 '18 at 5:18
same result when I didn't give height, the component just disappears and the "next" button jumps to the top of the page (because the component seems to have 0 height)
– Oscar Wong
Nov 28 '18 at 5:44
I updated code. Use it and check !
– Ron
Nov 28 '18 at 5:56
I tried it again, still can't get it to work. It's like ignoring me telling it to stretch, and is instead only playing at native size.
– Oscar Wong
Dec 3 '18 at 5:38
add a comment |
Thank you for the reply, but when I tried this implementation, I found that the video wouldn't play at all if I set height to 100% or auto. The video element just disappeared.
– Oscar Wong
Nov 28 '18 at 5:16
ok, just use my above code as it is and check. Don't give height.
– Ron
Nov 28 '18 at 5:18
same result when I didn't give height, the component just disappears and the "next" button jumps to the top of the page (because the component seems to have 0 height)
– Oscar Wong
Nov 28 '18 at 5:44
I updated code. Use it and check !
– Ron
Nov 28 '18 at 5:56
I tried it again, still can't get it to work. It's like ignoring me telling it to stretch, and is instead only playing at native size.
– Oscar Wong
Dec 3 '18 at 5:38
Thank you for the reply, but when I tried this implementation, I found that the video wouldn't play at all if I set height to 100% or auto. The video element just disappeared.
– Oscar Wong
Nov 28 '18 at 5:16
Thank you for the reply, but when I tried this implementation, I found that the video wouldn't play at all if I set height to 100% or auto. The video element just disappeared.
– Oscar Wong
Nov 28 '18 at 5:16
ok, just use my above code as it is and check. Don't give height.
– Ron
Nov 28 '18 at 5:18
ok, just use my above code as it is and check. Don't give height.
– Ron
Nov 28 '18 at 5:18
same result when I didn't give height, the component just disappears and the "next" button jumps to the top of the page (because the component seems to have 0 height)
– Oscar Wong
Nov 28 '18 at 5:44
same result when I didn't give height, the component just disappears and the "next" button jumps to the top of the page (because the component seems to have 0 height)
– Oscar Wong
Nov 28 '18 at 5:44
I updated code. Use it and check !
– Ron
Nov 28 '18 at 5:56
I updated code. Use it and check !
– Ron
Nov 28 '18 at 5:56
I tried it again, still can't get it to work. It's like ignoring me telling it to stretch, and is instead only playing at native size.
– Oscar Wong
Dec 3 '18 at 5:38
I tried it again, still can't get it to work. It's like ignoring me telling it to stretch, and is instead only playing at native size.
– Oscar Wong
Dec 3 '18 at 5:38
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53493882%2fexpo-react-native-video-failing-to-resize%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
should the height be specified in pixels? height: 650px
– Carol McKay
Nov 27 '18 at 6:37
Please share a sample design of your screen or denote where exactly you want to place the Video Player !
– Ron
Nov 27 '18 at 6:38
Also, should that be window.innerWidth ? instead of window.width w3schools.com/jsref/prop_win_innerheight.asp
– Carol McKay
Nov 27 '18 at 6:39
@Ron I've added some clarifying details to the original post, with a screenshot of roughly what it should look like.
– Oscar Wong
Nov 27 '18 at 17:05
@CarolMcKay using numbers / "window.width" works on React Native, at least in my experience / to my knowledge.
– Oscar Wong
Nov 27 '18 at 17:06