mileung / done-bar

React Native component that dismisses keyboard

Hi there 👋

If you find any of my projects helpful, please:

PayPal: https://paypal.me/MiLeung

Venmo: https://www.venmo.com/u/MiLeung

Cash App: https://cash.app/$mileung

I'm unemployed and I live with my parents. Also I owe the IRS around $20,000 because my former employer overreported my income and refuses to ammend my 2019 tax return.

done-bar's Issues

Does not work with KeyboardAvoidingView when behavior is height or position

Does work when KeyboardAvoidingView position is padding or if just using plain Views.

Duplicate module name: react-native

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

It Doesnt works

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.

Keyboard.dismiss is not defined on RN 0.33

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.

More improvement

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);

Support number-pad and other keyboard types

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.)

Move React and React Native in package.json from dependencies to peerDependencies

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!