React Native Modal transparent with backgroundColor black opacity 0.5 become darker between scene
RN 0.57,
React router flux 4
I have loader component to display loading message in modal on every scene.
I set the modal transparent and for modal content I set the backgroundColor: 'rgba(0, 0, 0, 0.5)'
This is the component code:
<Modal
transparent
visible={this.props.visible}
onRequestClose={() => {
console.log('modal closed')
}}
>
<View style={styles.modalBackground}>
.....
</View>
</Modal>
This is the stylesheet:
modalBackground: {
flex: 1,
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'space-around',
backgroundColor: 'rgba(0, 0, 0, 0.5)'
},
This is where loader component to display:
<View style={{flex:1}}>
<Loader
visible={this.props.global.isLoading}
animating={this.props.global.isLoading}
/>
......
</View>
I change the state dispatch(setIsloading(true)) before HTTP REQ and dispatch(setIsloading(false)) after it return JSON from server, then it change to new Scene.
The problem is first visible modal is at correct color and transparent, but on the next scene, the color become darker and darker, it's like the component display multiple times at the next scene and triple after that.
Any idea What cause this problem?
react-native background modal-dialog react-native-android transparent
edited Nov 14 '18 at 6:16
kit
1,1063816
asked Nov 14 '18 at 6:07
Tom KurTom Kur
529613
add a comment |
RN 0.57,
React router flux 4
I have loader component to display loading message in modal on every scene.
I set the modal transparent and for modal content I set the backgroundColor: 'rgba(0, 0, 0, 0.5)'
This is the component code:
<Modal
transparent
visible={this.props.visible}
onRequestClose={() => {
console.log('modal closed')
}}
>
<View style={styles.modalBackground}>
.....
</View>
</Modal>
This is the stylesheet:
modalBackground: {
flex: 1,
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'space-around',
backgroundColor: 'rgba(0, 0, 0, 0.5)'
},
This is where loader component to display:
<View style={{flex:1}}>
<Loader
visible={this.props.global.isLoading}
animating={this.props.global.isLoading}
/>
......
</View>
I change the state dispatch(setIsloading(true)) before HTTP REQ and dispatch(setIsloading(false)) after it return JSON from server, then it change to new Scene.
The problem is first visible modal is at correct color and transparent, but on the next scene, the color become darker and darker, it's like the component display multiple times at the next scene and triple after that.
Any idea What cause this problem?
react-native background modal-dialog react-native-android transparent
edited Nov 14 '18 at 6:16
kit
1,1063816
asked Nov 14 '18 at 6:07
Tom KurTom Kur
529613
add a comment |
RN 0.57,
React router flux 4
I have loader component to display loading message in modal on every scene.
I set the modal transparent and for modal content I set the backgroundColor: 'rgba(0, 0, 0, 0.5)'
This is the component code:
<Modal
transparent
visible={this.props.visible}
onRequestClose={() => {
console.log('modal closed')
}}
>
<View style={styles.modalBackground}>
.....
</View>
</Modal>
This is the stylesheet:
modalBackground: {
flex: 1,
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'space-around',
backgroundColor: 'rgba(0, 0, 0, 0.5)'
},
This is where loader component to display:
<View style={{flex:1}}>
<Loader
visible={this.props.global.isLoading}
animating={this.props.global.isLoading}
/>
......
</View>
I change the state dispatch(setIsloading(true)) before HTTP REQ and dispatch(setIsloading(false)) after it return JSON from server, then it change to new Scene.
The problem is first visible modal is at correct color and transparent, but on the next scene, the color become darker and darker, it's like the component display multiple times at the next scene and triple after that.
Any idea What cause this problem?
react-native background modal-dialog react-native-android transparent
edited Nov 14 '18 at 6:16
kit
1,1063816
asked Nov 14 '18 at 6:07
Tom KurTom Kur
529613
RN 0.57,
React router flux 4
I have loader component to display loading message in modal on every scene.
I set the modal transparent and for modal content I set the backgroundColor: 'rgba(0, 0, 0, 0.5)'
This is the component code:
<Modal
transparent
visible={this.props.visible}
onRequestClose={() => {
console.log('modal closed')
}}
>
<View style={styles.modalBackground}>
.....
</View>
</Modal>
This is the stylesheet:
modalBackground: {
flex: 1,
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'space-around',
backgroundColor: 'rgba(0, 0, 0, 0.5)'
},
This is where loader component to display:
<View style={{flex:1}}>
<Loader
visible={this.props.global.isLoading}
animating={this.props.global.isLoading}
/>
......
</View>
I change the state dispatch(setIsloading(true)) before HTTP REQ and dispatch(setIsloading(false)) after it return JSON from server, then it change to new Scene.
The problem is first visible modal is at correct color and transparent, but on the next scene, the color become darker and darker, it's like the component display multiple times at the next scene and triple after that.
Any idea What cause this problem?
react-native background modal-dialog react-native-android transparent
react-native background modal-dialog react-native-android transparent
edited Nov 14 '18 at 6:16
kit
1,1063816
asked Nov 14 '18 at 6:07
Tom KurTom Kur
529613
edited Nov 14 '18 at 6:16
kit
1,1063816
asked Nov 14 '18 at 6:07
Tom KurTom Kur
529613
edited Nov 14 '18 at 6:16
kit
1,1063816
edited Nov 14 '18 at 6:16
kit
1,1063816
edited Nov 14 '18 at 6:16
kit
1,1063816
1,1063816
asked Nov 14 '18 at 6:07
Tom KurTom Kur
529613
asked Nov 14 '18 at 6:07
Tom KurTom Kur
529613
asked Nov 14 '18 at 6:07
Tom KurTom Kur
529613
529613
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
As these tasks are async you have to make sure that the modal is dismissed before you move to the next scene, in your case you are moving to next scene before this modal is dismissed and once you are on next scene all the async subscriptions are removed hence your modal is not dismissing.
What I do for loading modals is that I do it by refs
In my loading component
export default class Loader extends Component{
hide = () => {
this.setState=({visible:false})
}
show = () => {
this.setState=({visible:true})
}
render(){
return(
<Modal isVisible={this.state.visible}>
....
</Modal>
)
}
}
where you want to show Loader
import Loader from 'path/to/loader'
<Loader ref={r=>this.loader = r}/>
and in your methods when you want to show loader
this.loader.show()
and hide it by calling
this.loader.hide()
answered Nov 14 '18 at 6:49
Ammar TariqAmmar Tariq
979
where do you call this.loader.hide() ?
– Tom Kur
Nov 14 '18 at 9:54
when async function returns with results or in catch block
– Ammar Tariq
Nov 14 '18 at 10:44
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53294089%2freact-native-modal-transparent-with-backgroundcolor-black-opacity-0-5-become-dar%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
As these tasks are async you have to make sure that the modal is dismissed before you move to the next scene, in your case you are moving to next scene before this modal is dismissed and once you are on next scene all the async subscriptions are removed hence your modal is not dismissing.
What I do for loading modals is that I do it by refs
In my loading component
export default class Loader extends Component{
hide = () => {
this.setState=({visible:false})
}
show = () => {
this.setState=({visible:true})
}
render(){
return(
<Modal isVisible={this.state.visible}>
....
</Modal>
)
}
}
where you want to show Loader
import Loader from 'path/to/loader'
<Loader ref={r=>this.loader = r}/>
and in your methods when you want to show loader
this.loader.show()
and hide it by calling
this.loader.hide()
answered Nov 14 '18 at 6:49
Ammar TariqAmmar Tariq
979
where do you call this.loader.hide() ?
– Tom Kur
Nov 14 '18 at 9:54
when async function returns with results or in catch block
– Ammar Tariq
Nov 14 '18 at 10:44
add a comment |
As these tasks are async you have to make sure that the modal is dismissed before you move to the next scene, in your case you are moving to next scene before this modal is dismissed and once you are on next scene all the async subscriptions are removed hence your modal is not dismissing.
What I do for loading modals is that I do it by refs
In my loading component
export default class Loader extends Component{
hide = () => {
this.setState=({visible:false})
}
show = () => {
this.setState=({visible:true})
}
render(){
return(
<Modal isVisible={this.state.visible}>
....
</Modal>
)
}
}
where you want to show Loader
import Loader from 'path/to/loader'
<Loader ref={r=>this.loader = r}/>
and in your methods when you want to show loader
this.loader.show()
and hide it by calling
this.loader.hide()
answered Nov 14 '18 at 6:49
Ammar TariqAmmar Tariq
979
where do you call this.loader.hide() ?
– Tom Kur
Nov 14 '18 at 9:54
when async function returns with results or in catch block
– Ammar Tariq
Nov 14 '18 at 10:44
add a comment |
As these tasks are async you have to make sure that the modal is dismissed before you move to the next scene, in your case you are moving to next scene before this modal is dismissed and once you are on next scene all the async subscriptions are removed hence your modal is not dismissing.
What I do for loading modals is that I do it by refs
In my loading component
export default class Loader extends Component{
hide = () => {
this.setState=({visible:false})
}
show = () => {
this.setState=({visible:true})
}
render(){
return(
<Modal isVisible={this.state.visible}>
....
</Modal>
)
}
}
where you want to show Loader
import Loader from 'path/to/loader'
<Loader ref={r=>this.loader = r}/>
and in your methods when you want to show loader
this.loader.show()
and hide it by calling
this.loader.hide()
answered Nov 14 '18 at 6:49
Ammar TariqAmmar Tariq
979
As these tasks are async you have to make sure that the modal is dismissed before you move to the next scene, in your case you are moving to next scene before this modal is dismissed and once you are on next scene all the async subscriptions are removed hence your modal is not dismissing.
What I do for loading modals is that I do it by refs
In my loading component
export default class Loader extends Component{
hide = () => {
this.setState=({visible:false})
}
show = () => {
this.setState=({visible:true})
}
render(){
return(
<Modal isVisible={this.state.visible}>
....
</Modal>
)
}
}
where you want to show Loader
import Loader from 'path/to/loader'
<Loader ref={r=>this.loader = r}/>
and in your methods when you want to show loader
this.loader.show()
and hide it by calling
this.loader.hide()
answered Nov 14 '18 at 6:49
Ammar TariqAmmar Tariq
979
answered Nov 14 '18 at 6:49
Ammar TariqAmmar Tariq
979
answered Nov 14 '18 at 6:49
Ammar TariqAmmar Tariq
979
answered Nov 14 '18 at 6:49
Ammar TariqAmmar Tariq
979
979
where do you call this.loader.hide() ?
– Tom Kur
Nov 14 '18 at 9:54
when async function returns with results or in catch block
– Ammar Tariq
Nov 14 '18 at 10:44
add a comment |
where do you call this.loader.hide() ?
– Tom Kur
Nov 14 '18 at 9:54
when async function returns with results or in catch block
– Ammar Tariq
Nov 14 '18 at 10:44
where do you call this.loader.hide() ?
– Tom Kur
Nov 14 '18 at 9:54
where do you call this.loader.hide() ?
– Tom Kur
Nov 14 '18 at 9:54
when async function returns with results or in catch block
– Ammar Tariq
Nov 14 '18 at 10:44
when async function returns with results or in catch block
– Ammar Tariq
Nov 14 '18 at 10:44
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53294089%2freact-native-modal-transparent-with-backgroundcolor-black-opacity-0-5-become-dar%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
