Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Docs: update README providing React Hooks usage instead Class #431

Merged
merged 2 commits into from May 5, 2020
Merged

Docs: update README providing React Hooks usage instead Class #431

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8fee14b
docs: update README providing useState() hook examples instead of cla…
caiangums May 5, 2020
269908b
docs: typo at `isVisible` to `isModalVisible` to match state callback…
caiangums May 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
112 changes: 58 additions & 54 deletions README.md
View file
Open in desktop
Expand Up @@ -38,36 +38,36 @@ import Modal from 'react-native-modal';
2. Create a modal and nest its content inside of it:

```javascript
render () {
return (
<View>
<Modal>
<View style={{ flex: 1 }}>
<Text>I am the modal content!</Text>
</View>
</Modal>
</View>
)
}
function WrapperComponent() {
return (
<View>
<Modal>
<View style={{ flex: 1 }}>
<Text>I am the modal content!</Text>
</View>
</Modal>
</View>
)
}
```

3. Then simply show it by setting the `isVisible` prop to true:

```javascript
render () {
return (
<View>
<Modal isVisible={true}>
<View style={{ flex: 1 }}>
<Text>I am the modal content!</Text>
</View>
</Modal>
</View>
)
}
function WrapperComponent() {
return (
<View>
<Modal isVisible={true}>
<View style={{ flex: 1 }}>
<Text>I am the modal content!</Text>
</View>
</Modal>
</View>
)
}
```

The `isVisible` prop is the only prop you'll really need to make the modal work: you should control this prop value by saving it in your state and setting it to `true` or `false` when needed.
The `isVisible` prop is the only prop you'll really need to make the modal work: you should control this prop value by saving it in your wrapper component state and setting it to `true` or `false` when needed.

## A complete example

Expand All @@ -77,33 +77,35 @@ Pressing the button sets `isModalVisible` to true, making the modal visible.
Inside the modal there is another button that, when pressed, sets `isModalVisible` to false, hiding the modal.

```javascript
import React, {Component} from 'react';
import React, {useState} from 'react';
import {Button, Text, View} from 'react-native';
import Modal from 'react-native-modal';

export default class ModalTester extends Component {
state = {
isModalVisible: false,
};

toggleModal = () => {
this.setState({isModalVisible: !this.state.isModalVisible});
function ModalTester() {
const [isModalVisible, setModalVisible] = useState(false);

const toggleModal = () => {
setModalVisible(!isModalVisible);
};

render() {
return (
<View style={{flex: 1}}>
<Button title="Show modal" onPress={this.toggleModal} />
<Modal isVisible={this.state.isModalVisible}>
<Button title="Show modal" onPress={toggleModal} />

<Modal isVisible={isModalVisible}>
<View style={{flex: 1}}>
<Text>Hello!</Text>
<Button title="Hide modal" onPress={this.toggleModal} />

<Button title="Hide modal" onPress={toggleModal} />
</View>
</Modal>
</View>
);
}
}

export default ModalTester;
```

For a more complex example take a look at the `/example` directory.
Expand Down Expand Up @@ -163,22 +165,24 @@ If you're experiencing this issue, you'll need to install [`react-native-extra-d
Then, provide the real window height (obtained from `react-native-extra-dimensions-android`) to the modal:

```javascript
render() {
const deviceWidth = Dimensions.get("window").width;
const deviceHeight = Platform.OS === "ios"
? Dimensions.get("window").height
: require("react-native-extra-dimensions-android").get("REAL_WINDOW_HEIGHT");
const deviceWidth = Dimensions.get("window").width;
const deviceHeight = Platform.OS === "ios"
? Dimensions.get("window").height
: require("react-native-extra-dimensions-android").get("REAL_WINDOW_HEIGHT");

function WrapperComponent() {
const [isModalVisible, setModalVisible] = useState(true);

return (
<Modal
isVisible={this.state.isVisible}
deviceWidth={deviceWidth}
deviceHeight={deviceHeight}
>
<View style={{ flex: 1 }}>
<Text>I am the modal content!</Text>
</View>
</Modal>
<Modal
isVisible={isModalVisible}
deviceWidth={deviceWidth}
deviceHeight={deviceHeight}
>
<View style={{ flex: 1 }}>
<Text>I am the modal content!</Text>
</View>
</Modal>
)
}
```
Expand All @@ -189,8 +193,8 @@ The prop `onBackdropPress` allows you to handle this situation:

```javascript
<Modal
isVisible={this.state.isVisible}
onBackdropPress={() => this.setState({isVisible: false})}>
isVisible={isModalVisible}
onBackdropPress={() => setModalVisible(false)}>
<View style={{flex: 1}}>
<Text>I am the modal content!</Text>
</View>
Expand All @@ -203,8 +207,8 @@ The prop `onSwipeComplete` allows you to handle this situation (remember to set

```javascript
<Modal
isVisible={this.state.isVisible}
onSwipeComplete={() => this.setState({isVisible: false})}
isVisible={isModalVisible}
onSwipeComplete={() => setModalVisible(false)}>
swipeDirection="left">
<View style={{flex: 1}}>
<Text>I am the modal content!</Text>
Expand Down Expand Up @@ -277,7 +281,7 @@ You need to specify the size of your custom backdrop component. You can also mak

```javascript
<Modal
isVisible={this.state.isVisible}
isVisible={isModalVisible}
customBackdrop={<View style={{flex: 1}} />}>
<View style={{flex: 1}}>
<Text>I am the modal content!</Text>
Expand All @@ -291,7 +295,7 @@ You can provide an event handler to the custom backdrop element to dismiss the m

```javascript
<Modal
isVisible={this.state.isVisible}
isVisible={isModalVisible}
customBackdrop={
<TouchableWithoutFeedback onPress={dismissModalHandler}>
<View style={{flex: 1}} />
Expand Down