0

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>
Krishna Gupta
  • 55
  • 6

1 Answers1

0

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

Gaurav Roy
  • 11,175
  • 3
  • 24
  • 45
  • It did not help. When testing on OP6T the suitable containerHeight is 325 and the screen height is 845 so `(325/845)*100 i.e 38.5%` . so i gave container height `hp("38.5%")` which worked for OP6T and also worked for Samsung S8 but it did not work for Nexus 6 (Simulator). the drawer was sunk in the bottom of the screen. rn-responsive uses PixelRatio which as i mentioned i already tried. – Krishna Gupta Feb 05 '20 at 09:07
  • the thing is once you give dynamic height to something , you have to give to all other style elemnts. suppose there is a marginTop of 20, you need to change that dynamic too. so check once if all styles are dynamic then it shouldnt be an issue – Gaurav Roy Feb 05 '20 at 09:14