More improvement

[manjeets12]

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