CODEWITHSUNDEEP
react-nativeslidingdrawerreact-native-drawer
Krishna Gupta
Krishna Gupta

Reputation: 55

Dynamic height for react native rn_bottom_drawer

I am using rn-bottom-drawer for drawer implementation for my app. I tried several ways like PixelRatio, ModerateScale, If-else for range of screen height but i am unsuccessful in setting such a containerHeight that it works perfectly with all device screens and there is no space between my drawer and bottom of my screen.

My Code: 

<BottomDrawer
            ref={"_drawer"}
            containerHeight={moderateScale(270)}
            startUp={false}
            backgroundColor={null}
            downDisplay={moderateScale(200)}
            onExpanded={() => this.setState({ isRecentSearchesExpanded: true })}
            onCollapsed={() => this.setState({ isRecentSearchesExpanded: false })}
        >
            <View style={{
                width: screenWidth,
            }}>
                <ImageBackground source={require('../../assets/tabBkgd.png')} style={{ height: "100%", width: screenWidth, justifyContent: "center", backgroundColor: "transparent" }} resizeMode="stretch">
                    {/* some views here */}
                </ImageBackground>
            </View>
        </BottomDrawer>

Upvotes: 0

Views: 560

Answers (1)

Gaurav Roy
Gaurav Roy

Reputation: 12235

This is the package i use for dynamic heights and widths :

rn-responsive.

Basically what you have to do is check in your phone what height suits well. Suppose you get 80 and your deviceHeight is 640 , then all you need to do is calculate (80/640)*100 i.e 12.5 so now

Just do :

import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
<BottomDrawer
            ref={"_drawer"}
            containerHeight={hp("12.5%")}

and its fixed. Hope it helps. feel free for doubts

Upvotes: 0

Related Questions