Mixing
How to render Image only once
I have an array of images:
[
{
'base64': ...
}
...
]
And I render these images with:
<Image
source={{
uri: 'data:' + image.mime + ';base64,' + image.base64
}}
/>
The problem is that it takes a lot of time to render and everytime I quit and go back to the screen, React re-renders all the images.
I've tried FastImage but it doesn't help so I'm thinking about rendering those images only once when the app starts and hiding/showing them depending on the current screen.
reactjs react-native
edited Nov 21 '18 at 11:58
Stundji
477212
asked Nov 21 '18 at 11:16
NewBieBRNewBieBR
149110
add a comment |
I have an array of images:
[
{
'base64': ...
}
...
]
And I render these images with:
<Image
source={{
uri: 'data:' + image.mime + ';base64,' + image.base64
}}
/>
The problem is that it takes a lot of time to render and everytime I quit and go back to the screen, React re-renders all the images.
I've tried FastImage but it doesn't help so I'm thinking about rendering those images only once when the app starts and hiding/showing them depending on the current screen.
reactjs react-native
edited Nov 21 '18 at 11:58
Stundji
477212
asked Nov 21 '18 at 11:16
NewBieBRNewBieBR
149110
Base64 image will have to parsed and re-render it self every time you load the page
– Just code
Nov 21 '18 at 11:18
add a comment |
I have an array of images:
[
{
'base64': ...
}
...
]
And I render these images with:
<Image
source={{
uri: 'data:' + image.mime + ';base64,' + image.base64
}}
/>
The problem is that it takes a lot of time to render and everytime I quit and go back to the screen, React re-renders all the images.
I've tried FastImage but it doesn't help so I'm thinking about rendering those images only once when the app starts and hiding/showing them depending on the current screen.
reactjs react-native
edited Nov 21 '18 at 11:58
Stundji
477212
asked Nov 21 '18 at 11:16
NewBieBRNewBieBR
149110
I have an array of images:
[
{
'base64': ...
}
...
]
And I render these images with:
<Image
source={{
uri: 'data:' + image.mime + ';base64,' + image.base64
}}
/>
The problem is that it takes a lot of time to render and everytime I quit and go back to the screen, React re-renders all the images.
I've tried FastImage but it doesn't help so I'm thinking about rendering those images only once when the app starts and hiding/showing them depending on the current screen.
reactjs react-native
reactjs react-native
edited Nov 21 '18 at 11:58
Stundji
477212
asked Nov 21 '18 at 11:16
NewBieBRNewBieBR
149110
edited Nov 21 '18 at 11:58
Stundji
477212
asked Nov 21 '18 at 11:16
NewBieBRNewBieBR
149110
edited Nov 21 '18 at 11:58
Stundji
477212
edited Nov 21 '18 at 11:58
Stundji
477212
edited Nov 21 '18 at 11:58
Stundji
477212
477212
asked Nov 21 '18 at 11:16
NewBieBRNewBieBR
149110
asked Nov 21 '18 at 11:16
NewBieBRNewBieBR
149110
asked Nov 21 '18 at 11:16
NewBieBRNewBieBR
149110
149110
Base64 image will have to parsed and re-render it self every time you load the page
– Just code
Nov 21 '18 at 11:18
add a comment |
Base64 image will have to parsed and re-render it self every time you load the page
– Just code
Nov 21 '18 at 11:18
Base64 image will have to parsed and re-render it self every time you load the page
– Just code
Nov 21 '18 at 11:18
Base64 image will have to parsed and re-render it self every time you load the page
– Just code
Nov 21 '18 at 11:18
add a comment |
1 Answer
1
active
oldest
votes
Base64 takes lot of time to process, instead use image file with .jpg or .png extension.
By stock the images, I think you mean to store the Images in React-native project and render them. In this case you can use the <Image> tag like this,
<Image source={require("./ImageName.png")}/>
If you want to traverse one-level above from the .js file your working on, then use ./ , If you want to jump two level above, then use ../ in the <Image> tag.
Hope this helps. If any doubts do comment !
answered Nov 21 '18 at 11:33
RonRon
391318
But I want to stock the images internally in my app :(
– NewBieBR
Nov 21 '18 at 11:59
I edited my answer @NewBieBR check if it fits your question.
– Ron
Nov 22 '18 at 5:51
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%2f53410947%2fhow-to-render-image-only-once%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
Base64 takes lot of time to process, instead use image file with .jpg or .png extension.
By stock the images, I think you mean to store the Images in React-native project and render them. In this case you can use the <Image> tag like this,
<Image source={require("./ImageName.png")}/>
If you want to traverse one-level above from the .js file your working on, then use ./ , If you want to jump two level above, then use ../ in the <Image> tag.
Hope this helps. If any doubts do comment !
answered Nov 21 '18 at 11:33
RonRon
391318
But I want to stock the images internally in my app :(
– NewBieBR
Nov 21 '18 at 11:59
I edited my answer @NewBieBR check if it fits your question.
– Ron
Nov 22 '18 at 5:51
add a comment |
Base64 takes lot of time to process, instead use image file with .jpg or .png extension.
By stock the images, I think you mean to store the Images in React-native project and render them. In this case you can use the <Image> tag like this,
<Image source={require("./ImageName.png")}/>
If you want to traverse one-level above from the .js file your working on, then use ./ , If you want to jump two level above, then use ../ in the <Image> tag.
Hope this helps. If any doubts do comment !
answered Nov 21 '18 at 11:33
RonRon
391318
But I want to stock the images internally in my app :(
– NewBieBR
Nov 21 '18 at 11:59
I edited my answer @NewBieBR check if it fits your question.
– Ron
Nov 22 '18 at 5:51
add a comment |
Base64 takes lot of time to process, instead use image file with .jpg or .png extension.
By stock the images, I think you mean to store the Images in React-native project and render them. In this case you can use the <Image> tag like this,
<Image source={require("./ImageName.png")}/>
If you want to traverse one-level above from the .js file your working on, then use ./ , If you want to jump two level above, then use ../ in the <Image> tag.
Hope this helps. If any doubts do comment !
answered Nov 21 '18 at 11:33
RonRon
391318
Base64 takes lot of time to process, instead use image file with .jpg or .png extension.
By stock the images, I think you mean to store the Images in React-native project and render them. In this case you can use the <Image> tag like this,
<Image source={require("./ImageName.png")}/>
If you want to traverse one-level above from the .js file your working on, then use ./ , If you want to jump two level above, then use ../ in the <Image> tag.
Hope this helps. If any doubts do comment !
answered Nov 21 '18 at 11:33
RonRon
391318
edited Nov 22 '18 at 5:51
answered Nov 21 '18 at 11:33
RonRon
391318
answered Nov 21 '18 at 11:33
RonRon
391318
answered Nov 21 '18 at 11:33
RonRon
391318
391318
But I want to stock the images internally in my app :(
– NewBieBR
Nov 21 '18 at 11:59
I edited my answer @NewBieBR check if it fits your question.
– Ron
Nov 22 '18 at 5:51
add a comment |
But I want to stock the images internally in my app :(
– NewBieBR
Nov 21 '18 at 11:59
I edited my answer @NewBieBR check if it fits your question.
– Ron
Nov 22 '18 at 5:51
But I want to stock the images internally in my app :(
– NewBieBR
Nov 21 '18 at 11:59
But I want to stock the images internally in my app :(
– NewBieBR
Nov 21 '18 at 11:59
I edited my answer @NewBieBR check if it fits your question.
– Ron
Nov 22 '18 at 5:51
I edited my answer @NewBieBR check if it fits your question.
– Ron
Nov 22 '18 at 5:51
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%2f53410947%2fhow-to-render-image-only-once%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
Base64 image will have to parsed and re-render it self every time you load the page
– Just code
Nov 21 '18 at 11:18