{
    "componentChunkName": "component---src-templates-post-template-tsx",
    "path": "/react-native-useful-libraries/",
    "result": {"data":{"allMarkdownRemark":{"edges":[{"node":{"html":"<h1>‘React Native Useful Libraries’</h1>\n<h2>1. React Native Keyboard Aware Scrollview</h2>\n<ul>\n<li>Install the library</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\">% <span class=\"token function\">npm</span> i react-native-keyboard-aware-scrollview </code></pre></div>\n<ul>\n<li>src/components/DismissKeyboardView.tsx</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"ts\"><pre class=\"language-ts\"><code class=\"language-ts\"><span class=\"token keyword\">import</span> React <span class=\"token keyword\">from</span> <span class=\"token string\">'react'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span>\n    TouchableWithoutFeedback<span class=\"token punctuation\">,</span>\n    Keyboard<span class=\"token punctuation\">,</span>\n    StyleProp<span class=\"token punctuation\">,</span>\n    ViewStyle<span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'react-native'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> KeyboardAwareScrollView <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">\"react-native-keyboard-aware-scrollview\"</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">const</span> DismissKeyboardView<span class=\"token operator\">:</span> React<span class=\"token punctuation\">.</span><span class=\"token constant\">FC</span><span class=\"token operator\">&lt;</span><span class=\"token punctuation\">{</span> style<span class=\"token operator\">?</span><span class=\"token operator\">:</span> StyleProp<span class=\"token operator\">&lt;</span>ViewStyle<span class=\"token operator\">></span> <span class=\"token punctuation\">}</span><span class=\"token operator\">></span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> \n    children<span class=\"token punctuation\">,</span> \n    <span class=\"token operator\">...</span>props \n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span>\n    <span class=\"token operator\">&lt;</span>TouchableWithoutFeedback onPress<span class=\"token operator\">=</span><span class=\"token punctuation\">{</span>Keyboard<span class=\"token punctuation\">.</span>dismiss<span class=\"token punctuation\">}</span> accessible<span class=\"token operator\">=</span><span class=\"token punctuation\">{</span><span class=\"token boolean\">false</span><span class=\"token punctuation\">}</span><span class=\"token operator\">></span>\n        <span class=\"token operator\">&lt;</span>KeyboardAwareScrollView <span class=\"token punctuation\">{</span><span class=\"token operator\">...</span>props<span class=\"token punctuation\">}</span> style<span class=\"token operator\">=</span><span class=\"token punctuation\">{</span>props<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">}</span><span class=\"token operator\">></span>\n            <span class=\"token punctuation\">{</span>children<span class=\"token punctuation\">}</span>\n        <span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>KeyboardAwareScrollView<span class=\"token operator\">></span>\n    <span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>TouchableWithoutFeedback<span class=\"token operator\">></span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> DismissKeyboardView<span class=\"token punctuation\">;</span></code></pre></div>\n<br />\n- 타입스크립트 미지원으로 타입을 직접 작성 해야함. <br />\ntypes/react-native-keyboard-aware-scrollview.d.ts\n<div class=\"gatsby-highlight\" data-language=\"ts\"><pre class=\"language-ts\"><code class=\"language-ts\"><span class=\"token keyword\">declare</span> <span class=\"token keyword\">module</span> <span class=\"token string\">'react-native-keyboard-aware-scrollview'</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">import</span> <span class=\"token operator\">*</span> <span class=\"token keyword\">as</span> React <span class=\"token keyword\">from</span> <span class=\"token string\">'react'</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> Constructor<span class=\"token punctuation\">,</span> ViewProps <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'react-native'</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">class</span> <span class=\"token class-name\">KeyboardAwareScrollViewComponent</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React</span><span class=\"token punctuation\">.</span>Component<span class=\"token operator\">&lt;</span>ViewProps<span class=\"token operator\">></span> <span class=\"token punctuation\">{</span> <span class=\"token punctuation\">}</span>\n    <span class=\"token keyword\">const</span> KeyboardAwareScrollViewBase<span class=\"token operator\">:</span> KeyboardAwareScrollViewComponent <span class=\"token operator\">&amp;</span>\n        Constructor<span class=\"token operator\">&lt;</span><span class=\"token builtin\">any</span><span class=\"token operator\">></span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">class</span> <span class=\"token class-name\">KeyboardAwareScrollView</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">KeyboardAwareScrollViewComponent</span> <span class=\"token punctuation\">{</span> <span class=\"token punctuation\">}</span>\n    <span class=\"token keyword\">export</span> <span class=\"token punctuation\">{</span> KeyboardAwareScrollView <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<br />\n<ul>\n<li>코드를 감싸준다.</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"ts\"><pre class=\"language-ts\"><code class=\"language-ts\"><span class=\"token keyword\">import</span> DismissKeyboardView <span class=\"token keyword\">from</span> <span class=\"token string\">\"../components/DissmissKeyboardView\"</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token operator\">...</span>\n\n    <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>\n        <span class=\"token operator\">&lt;</span>DismissKeyboardView styles<span class=\"token operator\">=</span><span class=\"token punctuation\">{</span>styles<span class=\"token punctuation\">.</span>fromWrapper<span class=\"token punctuation\">}</span><span class=\"token operator\">></span>\n\n            <span class=\"token operator\">...</span>\n\n        <span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>DismissKeyboardView<span class=\"token operator\">></span>\n    <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div>","frontmatter":{"title":"React Native Useful Libraries","summary":"리액트 네이티브 실사용에 필요한 라이브러리 모음.","date":"2000.01.01.","categories":["React Native","React Native Library","Typescript"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABdElEQVQoz42Sy0rDUBCG+2g+gu/gQhcufAUFcaELwY2CFBURF4o3EEURxIUIWixqa2prrNFomzZNbC5tk/STnBANVbSLnznDGb7zz5lJ6VZArHozjr6IptsVMpxAKDwn7+OYVKoXGBdpps/ljYEk28iqi/zq8lB2qDQ8Af+G/gHULf+rsPbhkytZPL44lJRIT28tlEpbQPt2GBdqZpQXym0yeY9cqYPdgfVtlf2TKq0A8WgfQF9EteYjqx7So0el3uVa8ig8uTwoFu/69x/2uvwBbNg+r1rA4amPZgRkcwbnWZeLmxaK8kFReqZuh+5+bzvVO5BQhtNlYS3P8t4z85sSGzsq0+kqSwcq0p1MWWlTS3STHEyPwwgYury6azA8scvo9BnFe0tMfGBolsGRLTK3Du96Hw7jgprp4QYwNbfC2GSaneMm2bzO4toR4zMFVreqFBVbdBKZ+KflMK8YHerNcKlBMz0adoBhR0senpM7mwR+Al2i7Y9yilqyAAAAAElFTkSuQmCC"},"images":{"fallback":{"src":"/static/fc08115821c7a59b627f4536bdc3901f/2874e/react-native-useful-library.png","srcSet":"/static/fc08115821c7a59b627f4536bdc3901f/84721/react-native-useful-library.png 213w,\n/static/fc08115821c7a59b627f4536bdc3901f/e1170/react-native-useful-library.png 425w,\n/static/fc08115821c7a59b627f4536bdc3901f/2874e/react-native-useful-library.png 850w","sizes":"(min-width: 850px) 850px, 100vw"},"sources":[{"srcSet":"/static/fc08115821c7a59b627f4536bdc3901f/f3048/react-native-useful-library.webp 213w,\n/static/fc08115821c7a59b627f4536bdc3901f/cad38/react-native-useful-library.webp 425w,\n/static/fc08115821c7a59b627f4536bdc3901f/539b5/react-native-useful-library.webp 850w","type":"image/webp","sizes":"(min-width: 850px) 850px, 100vw"}]},"width":850,"height":425}}},"publicURL":"https://kyong-dev.github.io"}}}]}},"pageContext":{"slug":"/react-native-useful-libraries/"}},
    "staticQueryHashes": []}