Skip to content

Commit 7839cff

Browse files
kulak91kulak91
committed
Add unsubscribe() to preventing-going-back example
1 parent 99d242d commit 7839cff

File tree

6 files changed

+171
-156
lines changed

6 files changed

+171
-156
lines changed

‎static/examples/5.x/prevent-going-back.js‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,33 @@ const EditTextScreen = ({ navigation }) => {
99

1010
const hasUnsavedChanges = Boolean(text);
1111

12-
React.useEffect(
13-
() =>
14-
navigation.addListener('beforeRemove', (e) => {
15-
const action = e.data.action;
16-
if (!hasUnsavedChanges) {
17-
return;
18-
}
12+
React.useEffect(() => {
13+
const unsubscribe = navigation.addListener('beforeRemove', (e) => {
14+
const action = e.data.action;
15+
if (!hasUnsavedChanges) {
16+
return;
17+
}
1918

20-
e.preventDefault();
19+
e.preventDefault();
2120

22-
Alert.alert(
23-
'Discard changes?',
24-
'You have unsaved changes. Are you sure to discard them and leave the screen?',
25-
[
26-
{ text: "Don't leave", style: 'cancel', onPress: () => {} },
27-
{
28-
text: 'Discard',
29-
style: 'destructive',
30-
onPress: () => navigation.dispatch(action),
31-
},
32-
]
33-
);
34-
}),
35-
[hasUnsavedChanges, navigation]
36-
);
21+
Alert.alert(
22+
'Discard changes?',
23+
'You have unsaved changes. Are you sure to discard them and leave the screen?',
24+
[
25+
{ text: "Don't leave", style: 'cancel', onPress: () => {} },
26+
{
27+
text: 'Discard',
28+
style: 'destructive',
29+
onPress: () => navigation.dispatch(action),
30+
},
31+
]
32+
);
33+
});
34+
35+
return () => {
36+
unsubscribe();
37+
};
38+
}, [hasUnsavedChanges, navigation]);
3739

3840
return (
3941
<View style={styles.content}>

‎static/examples/6.x/prevent-going-back.js‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,33 @@ const EditTextScreen = ({ navigation }) => {
99

1010
const hasUnsavedChanges = Boolean(text);
1111

12-
React.useEffect(
13-
() =>
14-
navigation.addListener('beforeRemove', (e) => {
15-
const action = e.data.action;
16-
if (!hasUnsavedChanges) {
17-
return;
18-
}
12+
React.useEffect(() => {
13+
const unsubscribe = navigation.addListener('beforeRemove', (e) => {
14+
const action = e.data.action;
15+
if (!hasUnsavedChanges) {
16+
return;
17+
}
1918

20-
e.preventDefault();
19+
e.preventDefault();
2120

22-
Alert.alert(
23-
'Discard changes?',
24-
'You have unsaved changes. Are you sure to discard them and leave the screen?',
25-
[
26-
{ text: "Don't leave", style: 'cancel', onPress: () => {} },
27-
{
28-
text: 'Discard',
29-
style: 'destructive',
30-
onPress: () => navigation.dispatch(action),
31-
},
32-
]
33-
);
34-
}),
35-
[hasUnsavedChanges, navigation]
36-
);
21+
Alert.alert(
22+
'Discard changes?',
23+
'You have unsaved changes. Are you sure to discard them and leave the screen?',
24+
[
25+
{ text: "Don't leave", style: 'cancel', onPress: () => {} },
26+
{
27+
text: 'Discard',
28+
style: 'destructive',
29+
onPress: () => navigation.dispatch(action),
30+
},
31+
]
32+
);
33+
});
34+
35+
return () => {
36+
unsubscribe();
37+
};
38+
}, [hasUnsavedChanges, navigation]);
3739

3840
return (
3941
<View style={styles.content}>

‎static/examples/7.x/prevent-going-back.js‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,33 @@ const EditTextScreen = ({ navigation }) => {
99

1010
const hasUnsavedChanges = Boolean(text);
1111

12-
React.useEffect(
13-
() =>
14-
navigation.addListener('beforeRemove', (e) => {
15-
const action = e.data.action;
16-
if (!hasUnsavedChanges) {
17-
return;
18-
}
12+
React.useEffect(() => {
13+
const unsubscribe = navigation.addListener('beforeRemove', (e) => {
14+
const action = e.data.action;
15+
if (!hasUnsavedChanges) {
16+
return;
17+
}
1918

20-
e.preventDefault();
19+
e.preventDefault();
2120

22-
Alert.alert(
23-
'Discard changes?',
24-
'You have unsaved changes. Are you sure to discard them and leave the screen?',
25-
[
26-
{ text: "Don't leave", style: 'cancel', onPress: () => {} },
27-
{
28-
text: 'Discard',
29-
style: 'destructive',
30-
onPress: () => navigation.dispatch(action),
31-
},
32-
]
33-
);
34-
}),
35-
[hasUnsavedChanges, navigation]
36-
);
21+
Alert.alert(
22+
'Discard changes?',
23+
'You have unsaved changes. Are you sure to discard them and leave the screen?',
24+
[
25+
{ text: "Don't leave", style: 'cancel', onPress: () => {} },
26+
{
27+
text: 'Discard',
28+
style: 'destructive',
29+
onPress: () => navigation.dispatch(action),
30+
},
31+
]
32+
);
33+
});
34+
35+
return () => {
36+
unsubscribe();
37+
};
38+
}, [hasUnsavedChanges, navigation]);
3739

3840
return (
3941
<View style={styles.content}>

‎versioned_docs/version-5.x/preventing-going-back.md‎

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -28,35 +28,38 @@ function EditText({ navigation }) {
2828
const [text, setText] = React.useState('');
2929
const hasUnsavedChanges = Boolean(text);
3030

31-
React.useEffect(
32-
() =>
33-
navigation.addListener('beforeRemove', (e) => {
34-
if (!hasUnsavedChanges) {
35-
// If we don't have unsaved changes, then we don't need to do anything
36-
return;
37-
}
38-
39-
// Prevent default behavior of leaving the screen
40-
e.preventDefault();
41-
42-
// Prompt the user before leaving the screen
43-
Alert.alert(
44-
'Discard changes?',
45-
'You have unsaved changes. Are you sure to discard them and leave the screen?',
46-
[
47-
{ text: "Don't leave", style: 'cancel', onPress: () => {} },
48-
{
49-
text: 'Discard',
50-
style: 'destructive',
51-
// If the user confirmed, then we dispatch the action we blocked earlier
52-
// This will continue the action that had triggered the removal of the screen
53-
onPress: () => navigation.dispatch(e.data.action),
54-
},
55-
]
56-
);
57-
}),
58-
[navigation, hasUnsavedChanges]
59-
);
31+
React.useEffect(() => {
32+
const unsubscribe = navigation.addListener('beforeRemove', (e) => {
33+
if (!hasUnsavedChanges) {
34+
// If we don't have unsaved changes, then we don't need to do anything
35+
return;
36+
}
37+
38+
// Prevent default behavior of leaving the screen
39+
e.preventDefault();
40+
41+
// Prompt the user before leaving the screen
42+
Alert.alert(
43+
'Discard changes?',
44+
'You have unsaved changes. Are you sure to discard them and leave the screen?',
45+
[
46+
{ text: "Don't leave", style: 'cancel', onPress: () => {} },
47+
{
48+
text: 'Discard',
49+
style: 'destructive',
50+
// If the user confirmed, then we dispatch the action we blocked earlier
51+
// This will continue the action that had triggered the removal of the screen
52+
onPress: () => navigation.dispatch(e.data.action),
53+
},
54+
]
55+
);
56+
});
57+
58+
// Unsubscribe the listener when the component unmounts to avoid memory leaks
59+
return () => {
60+
unsubscribe();
61+
};
62+
}, [navigation, hasUnsavedChanges]);
6063

6164
return (
6265
<TextInput

‎versioned_docs/version-6.x/preventing-going-back.md‎

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -17,35 +17,38 @@ function EditText({ navigation }) {
1717
const [text, setText] = React.useState('');
1818
const hasUnsavedChanges = Boolean(text);
1919

20-
React.useEffect(
21-
() =>
22-
navigation.addListener('beforeRemove', (e) => {
23-
if (!hasUnsavedChanges) {
24-
// If we don't have unsaved changes, then we don't need to do anything
25-
return;
26-
}
27-
28-
// Prevent default behavior of leaving the screen
29-
e.preventDefault();
30-
31-
// Prompt the user before leaving the screen
32-
Alert.alert(
33-
'Discard changes?',
34-
'You have unsaved changes. Are you sure to discard them and leave the screen?',
35-
[
36-
{ text: "Don't leave", style: 'cancel', onPress: () => {} },
37-
{
38-
text: 'Discard',
39-
style: 'destructive',
40-
// If the user confirmed, then we dispatch the action we blocked earlier
41-
// This will continue the action that had triggered the removal of the screen
42-
onPress: () => navigation.dispatch(e.data.action),
43-
},
44-
]
45-
);
46-
}),
47-
[navigation, hasUnsavedChanges]
48-
);
20+
React.useEffect(() => {
21+
const unsubscribe = navigation.addListener('beforeRemove', (e) => {
22+
if (!hasUnsavedChanges) {
23+
// If we don't have unsaved changes, then we don't need to do anything
24+
return;
25+
}
26+
27+
// Prevent default behavior of leaving the screen
28+
e.preventDefault();
29+
30+
// Prompt the user before leaving the screen
31+
Alert.alert(
32+
'Discard changes?',
33+
'You have unsaved changes. Are you sure to discard them and leave the screen?',
34+
[
35+
{ text: "Don't leave", style: 'cancel', onPress: () => {} },
36+
{
37+
text: 'Discard',
38+
style: 'destructive',
39+
// If the user confirmed, then we dispatch the action we blocked earlier
40+
// This will continue the action that had triggered the removal of the screen
41+
onPress: () => navigation.dispatch(e.data.action),
42+
},
43+
]
44+
);
45+
});
46+
47+
// Unsubscribe the listener when the component unmounts to avoid memory leaks
48+
return () => {
49+
unsubscribe();
50+
};
51+
}, [navigation, hasUnsavedChanges]);
4952

5053
return (
5154
<TextInput

‎versioned_docs/version-7.x/preventing-going-back.md‎

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -17,35 +17,38 @@ function EditText({ navigation }) {
1717
const [text, setText] = React.useState('');
1818
const hasUnsavedChanges = Boolean(text);
1919

20-
React.useEffect(
21-
() =>
22-
navigation.addListener('beforeRemove', (e) => {
23-
if (!hasUnsavedChanges) {
24-
// If we don't have unsaved changes, then we don't need to do anything
25-
return;
26-
}
27-
28-
// Prevent default behavior of leaving the screen
29-
e.preventDefault();
30-
31-
// Prompt the user before leaving the screen
32-
Alert.alert(
33-
'Discard changes?',
34-
'You have unsaved changes. Are you sure to discard them and leave the screen?',
35-
[
36-
{ text: "Don't leave", style: 'cancel', onPress: () => {} },
37-
{
38-
text: 'Discard',
39-
style: 'destructive',
40-
// If the user confirmed, then we dispatch the action we blocked earlier
41-
// This will continue the action that had triggered the removal of the screen
42-
onPress: () => navigation.dispatch(e.data.action),
43-
},
44-
]
45-
);
46-
}),
47-
[navigation, hasUnsavedChanges]
48-
);
20+
React.useEffect(() => {
21+
const unsubscribe = navigation.addListener('beforeRemove', (e) => {
22+
if (!hasUnsavedChanges) {
23+
// If we don't have unsaved changes, then we don't need to do anything
24+
return;
25+
}
26+
27+
// Prevent default behavior of leaving the screen
28+
e.preventDefault();
29+
30+
// Prompt the user before leaving the screen
31+
Alert.alert(
32+
'Discard changes?',
33+
'You have unsaved changes. Are you sure to discard them and leave the screen?',
34+
[
35+
{ text: "Don't leave", style: 'cancel', onPress: () => {} },
36+
{
37+
text: 'Discard',
38+
style: 'destructive',
39+
// If the user confirmed, then we dispatch the action we blocked earlier
40+
// This will continue the action that had triggered the removal of the screen
41+
onPress: () => navigation.dispatch(e.data.action),
42+
},
43+
]
44+
);
45+
});
46+
47+
// Unsubscribe the listener when the component unmounts to avoid memory leaks
48+
return () => {
49+
unsubscribe();
50+
};
51+
}, [navigation, hasUnsavedChanges]);
4952

5053
return (
5154
<TextInput

0 commit comments

Comments
 (0)