Skip to content

Commit 2bd8c20

Browse files
author
alvaromb
committed
v0.0.2 Added new ListView component and the keyboard aware mixin.
1 parent 27a8760 commit 2bd8c20

File tree

4 files changed

+47
-78
lines changed

4 files changed

+47
-78
lines changed

KeyboardAwareScrollView.js

Lines changed: 0 additions & 73 deletions
This file was deleted.

README.md

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,36 @@
11
# react-native-keyboard-aware-scroll-view
22
A ScrollView component that handles keyboard appearance.
33

4+
## Installation
5+
You can install this component through ``npm``:
6+
7+
```shell
8+
npm i react-native-keyboard-aware-scroll-view --save
9+
```
10+
411
## Usage
5-
Import ``react-native-keyboard-aware-scroll-view`` and wrap your content inside it:
12+
You can use the ``KeyboardAwareScrollView`` or the ``KeyboardAwareListView``
13+
components. Both accept ``ScrollView`` and ``ListView`` default props and
14+
implements a custom ``KeyboardAwareMixin`` to handle keyboard appearance.
15+
The mixin is also available if you want to use it in any other component.
16+
17+
Import ``react-native-keyboard-aware-scroll-view`` and wrap your content inside
18+
it:
19+
20+
```js
21+
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
22+
```
623

724
```jsx
825
<KeyboardAwareScrollView>
926
<View>
10-
<Text>Hello world!</Text>
27+
<TextInput />
1128
</View>
1229
</KeyboardAwareScrollView>
1330
```
1431

15-
The component accepts three props, ``style``, ``children`` (the children node to render inside) and the experimental prop ``viewIsInsideTabBar``, which tries to solve resizing issues when rendering inside a ``TabBar`` component.
32+
The component accepts the experimental prop ``viewIsInsideTabBar``, which tries
33+
to solve resizing issues when rendering inside a ``TabBar`` component.
1634

1735
## License
1836

lib/KeyboardAwareScrollView.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { ScrollView } from 'react-native'
2+
import KeyboardAwareMixin from './KeyboardAwareMixin'
3+
4+
const KeyboardAwareScrollView = React.createClass({
5+
propTypes: {
6+
...ScrollView.propTypes,
7+
},
8+
mixins: [KeyboardAwareMixin],
9+
10+
render: function () {
11+
return (
12+
<ScrollView
13+
ref='keyboardView'
14+
keyboardDismissMode='interactive'
15+
contentInset={{bottom: this.state.keyboardSpace}}
16+
showsVerticalScrollIndicator={true}
17+
{...this.props}>
18+
{this.props.children}
19+
</ScrollView>
20+
)
21+
},
22+
})
23+
24+
export default KeyboardAwareScrollView

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"name": "react-native-keyboard-aware-scroll-view",
3-
"version": "0.0.1",
3+
"version": "0.0.2",
44
"description": "A React Native ScrollView component that resizes when the keyboard appears.",
5-
"main": "KeyboardAwareScrollView.js",
5+
"main": "index.js",
66
"scripts": {
77
"test": "echo \"Error: no test specified\" && exit 1"
88
},

0 commit comments

Comments
 (0)