mileung / done-bar Goto Github PK
View Code? Open in Web Editor NEWReact Native component that dismisses keyboard
Home Page: https://www.npmjs.com/package/done-bar
React Native component that dismisses keyboard
Home Page: https://www.npmjs.com/package/done-bar
Does work when KeyboardAvoidingView position is padding or if just using plain Views.
This warning is caused by a @providesModule declaration with the same name across two different files.
jest-haste-map: @providesModule naming collision:
Duplicate module name: react-native
Paths: /Library/WebServer/Documents/cimbrtbmobile/node_modules/react-native/package.json collides with /Library/WebServer/Documents/cimbrtbmobile/node_modules/done-bar/node_modules/react-native/package.json
Hey ,
I just tried your example code in my project.
i have tried your library to get the "Done" over my keyboard. But it doesnt works.
Kindly check and help me.
Hi,
I tried to use done-bar on a project stuck with [email protected] but I got the error _reactNative.Keyboard.dismiss is not a function
, because Keyboard.dismiss
is not defined on old versions of RN.
This can be easily solved app-side by this polyfill
import { Keyboard } from 'react-native';
import TextInputState from 'TextInputState';
if (!Keyboard.dismiss) {
Keyboard.dismiss = () => TextInputState.blurTextInput(TextInputState.currentlyFocusedField());
}
Just to let you know in case you want to support previous versions.
Hey I did little improvement taking your code, now hide and show delay in Donebar is removed, see my code you can improve it a bit. I used little bit of redux for my personal use but it can be used with or without that.
import React, {Component} from 'react';
import {
TouchableWithoutFeedback,
TouchableOpacity,
Keyboard,
View,
Text,
Animated,
StyleSheet,
LayoutAnimation,
Dimensions,
Platform
} from 'react-native';
import { connect } from 'react-redux'
import KeyboardActions from '../../Redux/keyboardRedux'
const propTypes ={
// viewBehavior: React.PropTypes.string,
keyboardType: React.PropTypes.string,
isShown:React.PropTypes.bool,
isSwiper:React.PropTypes.bool, //will handle it if you wrapped it around react-native-swiper
text: React.PropTypes.string,
onPress: React.PropTypes.func,
};
const defaultProps = {
// viewBehavior: 'padding',
keyboardType: 'numeric',
//includeLayoutAnimation: true,
isShown:true,
isSwiper:false,
text: 'Done',
onPress: () => {},
};
const DismissKeyboardHOC = (WrappedComponent) => {
return class DoneBarKeyboard extends Component {
constructor(props) {
super(props);
this.state = {
height: 0,
width: Dimensions.get('window').width,
bottom: new Animated.Value(-81),
opened:false,
};
this.onClick = this.onClick.bind(this);
this.dismissKeyboard = this.dismissKeyboard.bind(this);
this.updateBottom = this.updateBottom.bind(this);
}
componentDidMount(){
// this.animationListener = this.state.bottom.addListener(({value}) => {
// console.log('bottom - ', value);
// });
if (!Keyboard.dismiss) {
Keyboard.dismiss = () => TextInputState.blurTextInput(TextInputState.currentlyFocusedField());
}
this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', ({ endCoordinates }) => {
const {isShown, keyboardType}= this.props;
if (keyboardType !== 'numeric') {
return null;
}
let { height, width } = endCoordinates;
this.setState({
width,
opened:true
});
const isDoneBarShown = ((Platform.OS === 'ios' || isShown) && (keyboardType === 'numeric'))?true:false
this.updateBottom(height, 440);
const barHeight = (isDoneBarShown)?45:5;
this.props.updateHeight(height+barHeight);
});
this.keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', ({ endCoordinates }) => {
if (this.state.opened) {
this.dismissKeyboard("reload")
}
});
}
componentWillUnmount() {
if (this.state.opened) {
this.dismissKeyboard("reload")
}
//this.state.bottom.removeListener(this.animationListener);
this.keyboardWillShowListener.remove();
this.keyboardWillHideListener.remove();
}
dismissKeyboard(e){
this.setState({opened:false});
this.state.bottom.setValue(-81);
this.props.updateHeight(0);
if(e !=="reload"){
Keyboard.dismiss();
}
}
onClick(e) {
console.log(e)
}
updateBottom(toValue, duration) {
Animated.timing(this.state.bottom, {
toValue,
duration: duration,
}).start();
}
render() {
const {children, isShown, keyboardType, doneText, isSwiper} = this.props;
const {bottom, width, opacity , opened} = this.state;
let isDoneBarShown = ((Platform.OS !== 'ios' || !isShown || !opened) && (keyboardType !== 'numeric'))?false:true
if(isSwiper){
return(
<WrappedComponent {...this.props}>
<View>
{children}
{isDoneBarShown &&
<Animated.View style={[{ bottom, width, opacity }, styles.barWrapper]}>
<View
style={styles.bar}
>
<TouchableOpacity
style={styles.button}
onPress={()=>this.dismissKeyboard()}
>
<Text style={styles.done}>{doneText || 'Done'}</Text>
</TouchableOpacity>
</View>
<View style={styles.bar} />
</Animated.View>
}
</View>
</WrappedComponent>
)
}
return (
<TouchableWithoutFeedback onPress={()=>this.dismissKeyboard()}>
<WrappedComponent {...this.props}>
<View>
{children}
{isDoneBarShown &&
<Animated.View style={[{ bottom, width, opacity }, styles.barWrapper]}>
<View
style={styles.bar}
>
<TouchableOpacity
style={styles.button}
onPress={()=>this.dismissKeyboard()}
>
<Text style={styles.done}>{doneText || 'Done'}</Text>
</TouchableOpacity>
</View>
<View style={styles.bar} />
</Animated.View>
}
</View>
</WrappedComponent>
</TouchableWithoutFeedback>
);
}
}
}
DismissKeyboardHOC.propTypes = propTypes;
DismissKeyboardHOC.defaultProps = defaultProps;
const styles = StyleSheet.create({
barWrapper: {
borderTopWidth: 1,
backgroundColor: '#ededed',
borderColor: 'rgb(237, 237, 237)',
position: 'absolute',
height : 40,
},
bar: {
height : 40,
alignItems: 'flex-end'
},
button: {
flex: 1,
justifyContent: 'center'
},
done: {
fontSize: 18,
fontWeight: "bold",
letterSpacing: 0.34,
textAlign: "center",
color: "#616161",
marginRight : 20
}
});
const DismissKeyboardView = DismissKeyboardHOC(View);
const mapStateToProps = (state) => {
return {
state
}
}
const mapDispatchToProps = (dispatch) => {
return {
updateHeight: (height) => dispatch(KeyboardActions.updateHeight(height)),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(DismissKeyboardView);
Currently, this check is hardcoded for the numeric
keyboard type:
if (screenY === height || this.props.keyboardType !== 'numeric') {
bottom = -81;
} else {
bottom = endCoordinates.height - 40;
}
But this does not do the right thing for keyboard types such as number-pad
:
https://facebook.github.io/react-native/docs/textinput.html#keyboardtype
(Admittedly, the difference between the two is slight. It seems the only difference is the lack of a decimal point in number-pad
mode.)
Hi there!
We happen to use this library in one of our projects (nice job btw ๐ ), but I did notice something that doesn't jive with the latest versions of React Native.
I see your package.json
locks down react
and react-native
to specific versions of both. Unfortunately, when trying to run this with the latest version of RN, it will cause issues. You'll get a weird RSOD that seems to indicate that ActivityIndicator
can't be resolved, assuming you import it in from react-native
.
The reason for this is because this library pulls in RN 0.40 on top of my actual version of React Native. This causes some collisions and the dependencies get jacked up. Please see this RN issue for reference: facebook/react-native#14302
In that issue, the react-native-calendar-picker
was causing grief for that particular developer because it locked down the version of RN.
I'd suggest adding a little flexibility to your package.json. Stealing from AirBnB's react-native-maps
library, you might want to refactor your package.json by moving your react-native
and react
from dependencies to peerDependencies like so:
"peerDependencies": {
"react": ">=15.4.0",
"react-native": ">=0.40"
}
I'll submit a PR shortly for this, but thought I'd let you know.
Thank you!
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.