react-native-gesture-handler Swipable does not take the entire screen

Question

I have the following code:

 <View style={{ backgroundColor: 'black'}}>
            <ArticleSwipable
                ref={swipeableRef}
                renderRightActions={this.renderRightActions}
                onSwipeableClose={() => console.log('close')}
                onSwipeableOpen={loadArticleSwipe}
                onSwipeableWillOpen={() =>{ setzIndex(100); }}>
                <ArticleScreen
                    article={article}
                    navigation={navigation}
                    scrollRef={scrollRef}
                    header={<Header
                        onFavouritePress={toggleFavouriteButton}
                        favouriteButtonIcon={favouriteButtonIcon} />} 
                    isLoading={isLoading}/>
            </ArticleSwipable>
            <LoadingComponent opacity={loadingFadeAnim} zIndex={zIndex} isLoading={isLoading} />
        </View>

where ArticleSwipable is a react-native-gesture-handler/Swipable component but with overridden close method. ArticleScreen has the following structure:

<View>
   <ScrollView>...</ScrollView>
</View>

My goal is to make the Swipeable Component take the entire screen but now if the content is less than the height of the screen will display the white rectangle at the bottom. Example

If the content is bigger than the height of the screen then everyting is ok.

How can I get rid of the white rectangle at the bottom?

score 0 · Answer 1 · answered Aug 29 '22 at 12:40

Try this once :

<View style={{ backgroundColor: 'black' ,flex:1}}>
            <ArticleSwipable
                ref={swipeableRef}
                renderRightActions={this.renderRightActions}
                onSwipeableClose={() => console.log('close')}
                onSwipeableOpen={loadArticleSwipe}
                onSwipeableWillOpen={() =>{ setzIndex(100); }}>
                <ArticleScreen
                    article={article}
                    navigation={navigation}
                    scrollRef={scrollRef}
                    header={<Header
                        onFavouritePress={toggleFavouriteButton}
                        favouriteButtonIcon={favouriteButtonIcon} />} 
                    isLoading={isLoading}/>
            </ArticleSwipable>
            <LoadingComponent opacity={loadingFadeAnim} zIndex={zIndex} isLoading={isLoading} />
        </View>

And also this :

<View style={{flex:1}} >
   <ScrollView>...</ScrollView>
</View>

When I add flex:1 for the root View the rectangle below becomes black and when I add flex: 1 for both Views then the entire screen becomes black — Nazar Mazuryk, Aug 29 '22 at 13:20
I mean, the entire screen just turns black: https://imgur.com/xMtubnA — Nazar Mazuryk, Aug 29 '22 at 13:26

react-native-gesture-handler Swipable does not take the entire screen

1 Answers1