I'm working on a tiktok-like video app, and when I scroll down, the video is supposed to adjust and fit the full screen perfectly, but the video isn't adjusting properly to fit the full screen, it has a growing margin at the bottom. For each video I scroll down, the margin at the bottom gets bigger. I don't want any margin at the bottom. I have recorded a short video of the problem so you can see what I'm talking about (at the end is the best demo) https://streamable.com/tihyt4
(Here is a second link incase that doesn't work: https://imgur.com/a/FNltUE8 sorry its so large, just scroll to see the bottom of it)
When I press pause though, the video(the entire container? likes and all) re-adjusts to fit the screen correctly, why isn't it doing this in the beginning when I scroll down to the next video?
Below I have attached all the code that I think might be related to this problem
This is my Home.tsx:
import React from "react";import { Text, Animated, ScrollView, KeyboardAvoidingView } from "react-native";import { HomeStore } from "../../Stores";import { hoc, ps } from "../../Modules";import { TypedComponent } from "../../Components";import { homeStyle } from "./styles";import { VideoList } from "./VideoList";import { HomeTab } from "./HomeTab";import { Comments } from "./Comments";@hoc("home")export class Home extends TypedComponent<{ home?: HomeStore }> { render() { const { home, lang } = this.props; const str = lang.str.home; return (<KeyboardAvoidingView style={ps.container} behavior="padding" enabled><Animated.ScrollView horizontal pagingEnabled bounces={false} directionalLockEnabled style={homeStyle.hSwiperContainer} contentContainerStyle={homeStyle.hScrollContent} onScroll={home.onScrollEvent}><VideoList videoList={home.followList} tabFocus={home.selectedTab === 0} onFocusVideoChange={home.onFocusVideoChange} /><VideoList videoList={home.recommendList} tabFocus={home.selectedTab === 1} onFocusVideoChange={home.onFocusVideoChange} /><ScrollView horizontal={false} style={ps.container} contentContainerStyle={[ps.container, ps.center]}><Text>{lang.str.home.authorInfo}</Text></ScrollView><HomeTab /></Animated.ScrollView><Comments video={home.focusVideo} /></KeyboardAvoidingView> ); }}export default Home;//lets hope this worksHomeStore: where I keep my onHScroll Action:
import { observable, action } from "mobx";import { VideoInfo } from "./VideoInfo";import { Animated, Dimensions } from "react-native";import { mockVideoList1 } from "./Mock";const screenWidth = Dimensions.get("window").width;const screenHeight = Dimensions.get("window").height;export class HomeStore { @observable followList: VideoInfo[] = mockVideoList1(); @observable recommendList: VideoInfo[] = mockVideoList1(); @observable focusVideo: VideoInfo = this.followList[0]; @observable selectedTab: number = 0; @action onHScroll = (e: any) => { this.selectedTab = Math.floor( (e.nativeEvent.contentOffset.x / e.nativeEvent.contentSize.width) * 3 ); }; private contentOffsetX = new Animated.Value(0); onScrollEvent = Animated.event([{ nativeEvent: { contentOffset: { x: this.contentOffsetX } } }], { useNativeDriver: true, listener: this.onHScroll, }); @action onFocusVideoChange = (video: VideoInfo) => { this.focusVideo = video; }; navStyle = { position: "absolute", left: 0, width: "33.33%", top: 0, paddingHorizontal: 30, transform: [ { translateX: this.contentOffsetX.interpolate({ inputRange: [-1, 0, screenWidth, screenWidth + 1], outputRange: [0, 0, screenWidth, screenWidth], }), }, ], }; indicatorStyle = { position: "absolute", left: 0, width: 36, bottom: 0, height: 3, backgroundColor: "white", transform: [ { translateX: this.contentOffsetX.interpolate({ inputRange: [-1, 0, screenWidth, screenWidth + 1], //outputRange: [0, 0, 52, 52], outputRange: [10, 10, 85, 85], }), }, ], }; private commentsY = new Animated.Value(screenHeight - 100); commentsStyle = { position: "absolute", top: 100, left: 0, right: 0, bottom: 0, borderRadius: 10, padding: 20, backgroundColor: "white", transform: [{ translateY: this.commentsY }], }; onProfileOpen = () => { //TODO: Add actual profile openings Animated.timing(this.commentsY, { toValue: 0, duration: 300, useNativeDriver: true, }).start(); }; onCommentOpen = () => { Animated.timing(this.commentsY, { toValue: 0, duration: 300, useNativeDriver: true, }).start(); }; onCommentClose = () => { Animated.timing(this.commentsY, { duration: 300, toValue: screenHeight - 100, useNativeDriver: true, }).start(); };}This is the code I'm using for the swiping(VideoList.tsx):
import React from "react";import Swiper from "react-native-swiper";import { VideoInfo } from "../../Stores/VideoInfo";import { TVideo } from "./TVideo";export class VideoList extends React.Component<{ videoList: VideoInfo[]; tabFocus: boolean; onFocusVideoChange: (video: VideoInfo) => any;}> { render() { return (<Swiper horizontal={false} loop={false} bounces={false} showsPagination={false} onIndexChanged={index => { this.props.videoList.forEach((video, idx) => { if (video.focus) video.onBlur(); if (index === idx) { this.props.onFocusVideoChange(video); video.onFocus(); } }); }}> {this.props.videoList.map((video, idx) => { return <TVideo video={video} key={video.id} tabFocus={this.props.tabFocus} />; })}</Swiper> ); } componentDidMount() { if (this.props.videoList.length <= 0) return; this.props.videoList[0].onFocus(); this.props.tabFocus && this.props.onFocusVideoChange(this.props.videoList[0]); }}This is the code for a Video (TVideo.tsx):
import React, { useState } from "react";import { Text, StyleSheet, View, Image, Dimensions } from "react-native";import { ps, hoc } from "../../Modules";import { VideoInfo } from "../../Stores/VideoInfo";import Video from "react-native-video";import { TouchableOpacity } from "react-native";import { homeStyle } from "./styles";import { TypedComponent } from "../../Components";import { Comments } from "./Comments";import { HomeStore } from "../../Stores";import ViewPager from "@react-native-community/viewpager";import styled from 'styled-components/native';import Info from "./Info";const Count = styled.Text` color: #fff; font-size: 12px; letter-spacing: -0.1px; textAlign: center;`const Center = styled.View` flex: 1; flex-direction: row;`@hoc("home")export class TVideo extends TypedComponent<{ video: VideoInfo; tabFocus: boolean; home?: HomeStore;}> { render() { const { video, tabFocus, lang, home } = this.props; const str = lang.str.home; return ( // <View style={ps.container}><View style={ps.container}><Video repeat controls={false} resizeMode="cover" style={[ps.container]} onReadyForDisplay={video.onReady} paused={!(tabFocus && video.ready && video.focus && !video.paused)} source={{ uri: this.props.video.uri, }} /><TouchableOpacity style={[StyleSheet.absoluteFill, ps.center]} onPress={video.onPause}> {video.paused && (<Image style={homeStyle.playButton} source={require("../../../Assets/play.png")} /> )}</TouchableOpacity> {/* <Center> */}<View style={homeStyle.totalContainer}><Info></Info ><View style={homeStyle.fabContainer}>< TouchableOpacity onPress={home.onProfileOpen}><Image resizeMode='cover' style={homeStyle.fabButton} source={require("../../../Assets/avatar.png")} /></TouchableOpacity><View style={{ width: 36, height: 18, justifyContent: "center", borderRadius: 36 / 2, backgroundColor: 'pink', }}><Text style={{ alignSelf: 'center', fontWeight: 'bold', color: 'white', fontSize: 11, }}>♀18</Text></View><Count></Count><Count></Count><Count></Count><TouchableOpacity onPress={home.onProfileOpen}><Image resizeMode='contain' style={homeStyle.fabButton} source={require("../../../Assets/icons/like.png")} /><Count>{200}</Count><Count></Count><Count></Count></TouchableOpacity><TouchableOpacity onPress={home.onCommentOpen}><Image resizeMode='contain' style={homeStyle.fabButton} source={require("../../../Assets/icons/comment.png")} /><Count>{1000}</Count><Count></Count><Count></Count></TouchableOpacity><TouchableOpacity><Image resizeMode='contain' style={homeStyle.fabButton} source={require("../../../Assets/location.png")} /><Count>{"2mi"}</Count><Count></Count><Count></Count></TouchableOpacity></View></View> {/* </Center> */} {/* {tabFocus && video.focus && <Comments video={video} />} */}</View> ); }}This is styles.tsx (the 'homeStyle' that TVideo uses):
import { StyleSheet } from "react-native";export const homeStyle = StyleSheet.create({ hSwiperContainer: { flex: 1, }, hScrollContent: { width: "300%", height: "100%", flexDirection: "row", }, safeNav: { flexDirection: "row", justifyContent: "space-between", }, tabContainer: { minWidth: 80, minHeight: 30, flexDirection: "row", justifyContent: "space-between", alignItems: "center", }, tabButton: { fontSize: 18, fontWeight: "bold", color: "#C0C4C2", }, descContainer: { position: "absolute", top: 0, left: 15, bottom: 10, justifyContent: "flex-end", //justifyContent: "center", //alignItems: "center", //flexDirection: "row", flex: 1, }, totalContainer:{ position: "absolute", justifyContent:"space-between", //top:0, bottom:10, flexDirection: "row", flex: 1, }, fabContainer: { position: "absolute", top: 0, right: 15, bottom: 50, justifyContent: "flex-end", //justifyContent: "center", alignItems: "center", //flexDirection: "row", flex: 1, }, author: { fontSize: 16, color: "gray", }, comment: { fontSize: 14, }, commentClose: {}, commentHeader: { flexDirection: "row", justifyContent: "space-between", }, location: { flexDirection: "row", alignItems: "center", }, locationIcon: { width: 30, height: 30, }, locationText: { marginLeft: 15, color: "lightgray", }, postContainer: { minHeight: 48, flexDirection: "row", alignItems: "center", borderTopWidth: 1, borderColor: "lightgray", }, input: { flex: 1, }, fabButton: { width: 48, height: 48, // padding: 30, }, playButton: { width: 100, height: 100, },});And the ps from /Modules which most of the above files use:
export const ps = StyleSheet.create({ container: { flex: 1, }, center: { justifyContent: "center", alignItems: "center", },});Can somebody help me get rid of the bottom margin of the containers when scrolling down? If any other code is needed just tell me, and I'll edit this post to add it. If you have an idea, I'll try it out and tell you the results