‘React Native Useful Libraries’

1. React Native Keyboard Aware Scrollview

Install the library

% npm i react-native-keyboard-aware-scrollview

src/components/DismissKeyboardView.tsx

import React from 'react';
import {
    TouchableWithoutFeedback,
    Keyboard,
    StyleProp,
    ViewStyle,
} from 'react-native';

import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scrollview";

const DismissKeyboardView: React.FC<{ style?: StyleProp<ViewStyle> }> = ({ 
    children, 
    ...props 
}) => (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
        <KeyboardAwareScrollView {...props} style={props.style}>
            {children}
        </KeyboardAwareScrollView>
    </TouchableWithoutFeedback>
);

export default DismissKeyboardView;

- 타입스크립트 미지원으로 타입을 직접 작성 해야함.
types/react-native-keyboard-aware-scrollview.d.ts

declare module 'react-native-keyboard-aware-scrollview' {
    import * as React from 'react';
    import { Constructor, ViewProps } from 'react-native';
    class KeyboardAwareScrollViewComponent extends React.Component<ViewProps> { }
    const KeyboardAwareScrollViewBase: KeyboardAwareScrollViewComponent &
        Constructor<any>;
    class KeyboardAwareScrollView extends KeyboardAwareScrollViewComponent { }
    export { KeyboardAwareScrollView };
}

코드를 감싸준다.

import DismissKeyboardView from "../components/DissmissKeyboardView";

...

    return (
        <DismissKeyboardView styles={styles.fromWrapper}>

            ...

        </DismissKeyboardView>
    );
}