Skip to content

Commit 1c8cf5c

Browse files
satya164satya164
authored
BREAKING: remove Portal wrapper from components (#439)
Currently, we wrap certain components such as FAB.Group and Snackbar in Portal by default. This means they are always rendered on top of everything and there's no way to control it. This makes it hard to integrate with navigation libraries such as React Navigation. The PR removes the Portal wrapper by default and exports PortalHost so users can control where the components are rendered. In future React Navigation could provide an API to render things on top of the screen and users would be able to take advantage of it.
1 parent b963158 commit 1c8cf5c

18 files changed

+681
-700
lines changed

‎example/src/FABExample.js

+19-17
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import * as React from 'react';
44
import { View, StyleSheet } from 'react-native';
5-
import { Colors, FAB, withTheme } from 'react-native-paper';
5+
import { Colors, FAB, Portal, withTheme } from 'react-native-paper';
66
import type { Theme } from 'react-native-paper/types';
77

88
type Props = {
@@ -38,22 +38,24 @@ class ButtonExample extends React.Component<Props, State> {
3838
style={styles.fab}
3939
onPress={() => {}}
4040
/>
41-
<FAB.Group
42-
open={this.state.open}
43-
icon={this.state.open ? 'today' : 'add'}
44-
actions={[
45-
{ icon: 'add', onPress: () => {} },
46-
{ icon: 'star', label: 'Star', onPress: () => {} },
47-
{ icon: 'email', label: 'Email', onPress: () => {} },
48-
{ icon: 'notifications', label: 'Remind', onPress: () => {} },
49-
]}
50-
onStateChange={({ open }) => this.setState({ open })}
51-
onPress={() => {
52-
if (this.state.open) {
53-
// do something if the speed dial is open
54-
}
55-
}}
56-
/>
41+
<Portal>
42+
<FAB.Group
43+
open={this.state.open}
44+
icon={this.state.open ? 'today' : 'add'}
45+
actions={[
46+
{ icon: 'add', onPress: () => {} },
47+
{ icon: 'star', label: 'Star', onPress: () => {} },
48+
{ icon: 'email', label: 'Email', onPress: () => {} },
49+
{ icon: 'notifications', label: 'Remind', onPress: () => {} },
50+
]}
51+
onStateChange={({ open }) => this.setState({ open })}
52+
onPress={() => {
53+
if (this.state.open) {
54+
// do something if the speed dial is open
55+
}
56+
}}
57+
/>
58+
</Portal>
5759
</View>
5860
</View>
5961
);

‎src/components/Dialog/Dialog.js

+15-13
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ type Props = {
3333

3434
/**
3535
* Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.
36+
* To render the `Dialog` above other components, you'll need to wrap it with the [`Portal`](portal.html) component.
3637
*
3738
* <div class="screenshots">
3839
* <img class="medium" src="screenshots/dialog-1.png" />
@@ -43,7 +44,7 @@ type Props = {
4344
* ```js
4445
* import * as React from 'react';
4546
* import { View } from 'react-native';
46-
* import { Button, Dialog, Paragraph } from 'react-native-paper';
47+
* import { Button, Paragraph, Dialog, Portal } from 'react-native-paper';
4748
*
4849
* export default class MyComponent extends React.Component {
4950
* state = {
@@ -58,18 +59,19 @@ type Props = {
5859
* return (
5960
* <View>
6061
* <Button onPress={this._showDialog}>Show Dialog</Button>
61-
* <Dialog
62-
* visible={this.state.visible}
63-
* onDismiss={this._hideDialog}
64-
* >
65-
* <Dialog.Title>Alert</Dialog.Title>
66-
* <Dialog.Content>
67-
* <Paragraph>This is simple dialog</Paragraph>
68-
* </Dialog.Content>
69-
* <Dialog.Actions>
70-
* <Button onPress={this._hideDialog}>Done</Button>
71-
* </Dialog.Actions>
72-
* </Dialog>
62+
* <Portal>
63+
* <Dialog
64+
* visible={this.state.visible}
65+
* onDismiss={this._hideDialog}>
66+
* <Dialog.Title>Alert</Dialog.Title>
67+
* <Dialog.Content>
68+
* <Paragraph>This is simple dialog</Paragraph>
69+
* </Dialog.Content>
70+
* <Dialog.Actions>
71+
* <Button onPress={this._hideDialog}>Done</Button>
72+
* </Dialog.Actions>
73+
* </Dialog>
74+
* </Portal>
7375
* </View>
7476
* );
7577
* }

‎src/components/Dialog/DialogActions.js

+11-9
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ type Props = {
1717
* ## Usage
1818
* ```js
1919
* import * as React from 'react';
20-
* import { Button, Dialog } from 'react-native-paper';
20+
* import { Button, Dialog, Portal } from 'react-native-paper';
2121
*
2222
* export default class MyComponent extends React.Component {
2323
* state = {
@@ -28,14 +28,16 @@ type Props = {
2828
*
2929
* render() {
3030
* return (
31-
* <Dialog
32-
* visible={this.state.visible}
33-
* onDismiss={this._hideDialog}>
34-
* <Dialog.Actions>
35-
* <Button onPress={() => console.log("Cancel"))}>Cancel</Button>
36-
* <Button onPress={() => console.log("Ok")}>Ok</Button>
37-
* </Dialog.Actions>
38-
* </Dialog>
31+
* <Portal>
32+
* <Dialog
33+
* visible={this.state.visible}
34+
* onDismiss={this._hideDialog}>
35+
* <Dialog.Actions>
36+
* <Button onPress={() => console.log("Cancel"))}>Cancel</Button>
37+
* <Button onPress={() => console.log("Ok")}>Ok</Button>
38+
* </Dialog.Actions>
39+
* </Dialog>
40+
* </Portal>
3941
* );
4042
* }
4143
* }

‎src/components/Dialog/DialogContent.js

+10-8
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ type Props = {
1717
* ## Usage
1818
* ```js
1919
* import * as React from 'react';
20-
* import { Dialog, Paragraph } from 'react-native-paper';
20+
* import { Paragraph, Dialog, Portal } from 'react-native-paper';
2121
*
2222
* export default class MyComponent extends React.Component {
2323
* state = {
@@ -28,13 +28,15 @@ type Props = {
2828
*
2929
* render() {
3030
* return (
31-
* <Dialog
32-
* visible={this.state.visible}
33-
* onDismiss={this._hideDialog}>
34-
* <Dialog.Content>
35-
* <Paragraph>This is simple dialog</Paragraph>
36-
* </Dialog.Content>
37-
* </Dialog>
31+
* <Portal>
32+
* <Dialog
33+
* visible={this.state.visible}
34+
* onDismiss={this._hideDialog}>
35+
* <Dialog.Content>
36+
* <Paragraph>This is simple dialog</Paragraph>
37+
* </Dialog.Content>
38+
* </Dialog>
39+
* </Portal>
3840
* );
3941
* }
4042
* }

‎src/components/Dialog/DialogScrollArea.js

+12-10
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ type Props = {
1919
* ```js
2020
* import * as React from 'react';
2121
* import { ScrollView } from 'react-native';
22-
* import { Dialog } from 'react-native-paper';
22+
* import { Dialog, Portal } from 'react-native-paper';
2323
*
2424
* export default class MyComponent extends React.Component {
2525
* state = {
@@ -30,15 +30,17 @@ type Props = {
3030
*
3131
* render() {
3232
* return (
33-
* <Dialog
34-
* visible={this.state.visible}
35-
* onDismiss={this._hideDialog}>
36-
* <Dialog.ScrollArea>
37-
* <ScrollView contentContainerStyle={{ paddingHorizontal: 24 }}>
38-
* This is a scrollable area
39-
* </ScrollView>
40-
* </Dialog.ScrollArea>
41-
* </Dialog>
33+
* <Portal>
34+
* <Dialog
35+
* visible={this.state.visible}
36+
* onDismiss={this._hideDialog}>
37+
* <Dialog.ScrollArea>
38+
* <ScrollView contentContainerStyle={{ paddingHorizontal: 24 }}>
39+
* This is a scrollable area
40+
* </ScrollView>
41+
* </Dialog.ScrollArea>
42+
* </Dialog>
43+
* </Portal>
4244
* );
4345
* }
4446
* }

‎src/components/Dialog/DialogTitle.js

+11-9
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ type Props = {
2424
* ## Usage
2525
* ```js
2626
* import * as React from 'react';
27-
* import { Dialog, Paragraph } from 'react-native-paper';
27+
* import { Paragraph, Dialog, Portal } from 'react-native-paper';
2828
*
2929
* export default class MyComponent extends React.Component {
3030
* state = {
@@ -35,14 +35,16 @@ type Props = {
3535
*
3636
* render() {
3737
* return (
38-
* <Dialog
39-
* visible={this.state.visible}
40-
* onDismiss={this._hideDialog}>
41-
* <Dialog.Title>This is a title</Dialog.Title>
42-
* <Dialog.Content>
43-
* <Paragraph>This is simple dialog</Paragraph>
44-
* </Dialog.Content>
45-
* </Dialog>
38+
* <Portal>
39+
* <Dialog
40+
* visible={this.state.visible}
41+
* onDismiss={this._hideDialog}>
42+
* <Dialog.Title>This is a title</Dialog.Title>
43+
* <Dialog.Content>
44+
* <Paragraph>This is simple dialog</Paragraph>
45+
* </Dialog.Content>
46+
* </Dialog>
47+
* </Portal>
4648
* );
4749
* }
4850
* }

0 commit comments

Comments
 (0)