jacklein / rn-bottom-drawer Goto Github PK
View Code? Open in Web Editor NEWa react native bottom drawer component
License: MIT License
a react native bottom drawer component
License: MIT License
Drawer lags a lot in android
Using react-native: 0.66.5, I get this error: Error: AnimatedValue: Attempting to set value to undefined.
The problem is in Animator.js, in _handlePanResponderMove
method in which only "y" property is updating, missing "x" property.
I provided a PR with this fix.
The drawer gets offset when the device has a notch (e.g. Galaxy 10, Honor 20)
So I wanted to change the content of the drawer when it gets expanded. So I have 2 components, one will render when the drawer is in the collapsed state and one when the drawer is expanded. But when i am even touching the drawer, the onExpanded gets called and the expanded component gets render even if the drawer is not opened.
The component renders even if the drawer is pulled downwards when it is in a collapsed state
When init in landscape mode and change back to portrait mode the size is not correct on the simulator. And it will not render on real device
My code displays the view with the items going off the screen but the view will not scroll. I have tried messing with zIndex and wrapping in views etc with no luck. I have also tried a vertical scroll view and it does not scroll either. Any help is appreciated.
Can we get scroll callbacks with amount of scroll so that we can perform any animation or any other processing?
I.e. drawer resting at the top of device, and being pulled down.
Hello,
Good work on this! Is there a way to update the displayDown value after dynamically setting a state value? Heres what Im working with!
const HEADER_HEIGHT = 50;
const CONTAINER_HEIGHT = 300;
var DOWN_DISPLAY = 0 ;
export default class Drawer extends React.Component {
state = {
height:0,
}
handleLayout = ({nativeEvent}) => {
this.setState({height: CONTAINER_HEIGHT - nativeEvent.layout.height});
}
renderContent = () => {
return (
<View style={styles.drawerContainer}>
<TouchableOpacity
onPress={this._onPressButton}
style={styles.grip}
/>
<View style={styles.HeaderBar} onLayout={this.handleLayout}>
<Text style={[styles.H1,styles.header]}>Discover</Text>
<StoryBarCat title="Test" icon={require("commonwealth/assets/svgs/color-circle.svg")}/>
</View>
<View style={styles.tabContent}>
<Text>HERES SOME MORE TEXT</Text>
</View>
</View>
)
}
render() {
return (
<BottomDrawer
containerHeight={300}
offset={0}
roundedEdges={true}
downDisplay={this.state.height}
startUp={false}
backgroundColor="#455154"
>
{this.renderContent()}
</BottomDrawer>
)
}
}
@jacklein
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>
I see that the drawer has two positions: Up & Down.
I'm trying to put a middle inbetween
this.UP_POSITION = this._calculateUpPosition(SCREEN_HEIGHT, this.props.containerHeight, this.props.offset)
this.DOWN_POSITION = this._calculateDownPosition(this.UP_POSITION, this.DOWN_DISPLAY)
this.state = { currentPosition: this.props.startUp ? this.UP_POSITION : this.DOWN_POSITION, currentState: this.props.startUp ? UP_STATE : DOWN_STATE };
error: bundling failed: Error: Couldn't find preset "module:metro-react-native-babel-preset" relative to directory "/var/www/rnp/node_modules/rn-bottom-drawer"
at /var/www/rnp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
at Array.map ()
Also it is giving Error: AnimatedValue: Attempting to set value to undefined.
How to solve this?
How do I calculate the offset (or give a option) to drawer on iPhone X and above versions?
It is rendering the drawer view ignoring the safe area, so the drawer is positioned lower than usual. Is there any options for iPhone X and above versions to position the drawer properly?
My laptop is too old to download xcode so I cannot test on an iphone x simulator to see what it looks like. I'm also working on setting up the android simulator but if anyone could test on these devices and see if there's any problems that would be great!
hello! is there any way to change the drawer's mode (opened to closed/closed to opened) by a button or touchable opacity?
How to run react-native-cli
The component has conflicts with any touchables if you want to drag up/down and still have a button/textinput on the header.
Here's the error that I get:
.../node_modules/rn-bottom-drawer/src/BottomDrawer.js 13:19
Module parse failed: Unexpected token (13:19)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| export default class BottomDrawer extends Component{
> static propTypes = {
| /**
| * Height of the drawer.
(When creating with expo, I used blank (TypeScript)
. What do I do?
When I have implemented this plugin The view initialized as a full screen but I want that the view should be minimized by deafult If I drag then it should full screen. How can I achieve this?
Error: "Animated: useNativeDriver
was not specified. This is a required option and must be explicitly set to true
or false
"
My current code (react-native-maps & rn-bottom-drawer nested in the components shown):
{/* Maps Component */}
<JobLocator/>
{/* Jobs Bottom Drawer Component */}
<JobsBottomDrawer navigation={navigation}/>
This layers the elements appropriately with the map behind the drawer and the drawer functions as expected, but when I try to interact with the map it is not responsive. I comment out the drawer component and I can interact with the map just fine. Please let me know if this is a known issue or if I have done something incorrectly and I will proceed accordingly. Thanks!
their is problem with onpress event in touchable opacity
I get Malformed calls from JS:field sizes are different. Tried everything from issues still the same no matter what I do.
Hi, I'm trying to use rn-bottom-drawer, but get error message as the title when I swipe up, the error produces on both platform android and iOS.
<BottomDrawer containerHeight={Dimensions.get('window').height / 2} offset={0} startUp={false} roundedEdges={true} shadow={true}>
<View style={{ flex: 1 }}>
<Text>Hi</Text>
</View>
</BottomDrawer>
my react native version is: 0.63.2 and latest rn-bottom-drawer.
I want container size take full screen and user can toggle it.
How to achieve?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.