How to detect when there's a new data from API using flat list in React Native?
I am building a react native apps using crna where there's flat list that showing data from API. It's quite like twitter or facebook's status feeds. And I would like to show some badge like this
When there's a new post and to make user aware of new post so they will refresh it.
Could anyone tell me what should I do to make this happen?
Thank you so much.
api react-native refresh react-native-flatlist
asked Jan 2 at 2:36
hehehehe
1516
add a comment |
I am building a react native apps using crna where there's flat list that showing data from API. It's quite like twitter or facebook's status feeds. And I would like to show some badge like this
When there's a new post and to make user aware of new post so they will refresh it.
Could anyone tell me what should I do to make this happen?
Thank you so much.
api react-native refresh react-native-flatlist
asked Jan 2 at 2:36
hehehehe
1516
add a comment |
I am building a react native apps using crna where there's flat list that showing data from API. It's quite like twitter or facebook's status feeds. And I would like to show some badge like this
When there's a new post and to make user aware of new post so they will refresh it.
Could anyone tell me what should I do to make this happen?
Thank you so much.
api react-native refresh react-native-flatlist
asked Jan 2 at 2:36
hehehehe
1516
I am building a react native apps using crna where there's flat list that showing data from API. It's quite like twitter or facebook's status feeds. And I would like to show some badge like this
When there's a new post and to make user aware of new post so they will refresh it.
Could anyone tell me what should I do to make this happen?
Thank you so much.
api react-native refresh react-native-flatlist
api react-native refresh react-native-flatlist
asked Jan 2 at 2:36
hehehehe
1516
asked Jan 2 at 2:36
hehehehe
1516
asked Jan 2 at 2:36
hehehehe
1516
asked Jan 2 at 2:36
hehehehe
1516
asked Jan 2 at 2:36
hehehehe
1516
1516
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Not sure if you're using some kind of state management tool like redux, but it would just be a matter of calling the API every so-often and updating the state from there. I'm going to use redux as an example since it's quite popular
You'd prob want state that has the following info:
currentPosts: //array of posts that the user already sees
newPosts: // array of new posts user can't see until they hit "new posts" button
With redux, you can have a function that gets called every 5 or 10 seconds that checks the API to show where you get new post data from. If there is a new post, add it to the newPosts array. This would update state, and if your component is connected to state, it would update props.
With this logic, you'd be able to determine whether or not you should show the "new posts" button with a simple boolean. If the array is empty, hide it, if it isn't, show the button.
Once the button is clicked, you could update the state so that the newPosts data goes into the currentPosts array and those items will get rendered from there.
Hope this makes sense! There may be quite a lot I'm missing but that's the idea of how it could work. Lemme know if you have any questions
answered Jan 2 at 3:00
Nick DeJesusNick DeJesus
4210
thank you so much for the clear explanation, I got it now! so should I start to use redux or can I do it without redux or any other state management? I'm a bit new with react native so I don't really know about this. once again, thank you so much!
– hehe
Jan 2 at 3:45
There are quite a handful of state management tools. I only know redux and I like it a lot. Redux has a pretty big ecosystem, like react. You're probably gonna want to spend some time learning how to use redux, and look into redux-thunk for making API calls within your actions
– Nick DeJesus
Jan 2 at 3:55
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%2f54000607%2fhow-to-detect-when-theres-a-new-data-from-api-using-flat-list-in-react-native%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
Not sure if you're using some kind of state management tool like redux, but it would just be a matter of calling the API every so-often and updating the state from there. I'm going to use redux as an example since it's quite popular
You'd prob want state that has the following info:
currentPosts: //array of posts that the user already sees
newPosts: // array of new posts user can't see until they hit "new posts" button
With redux, you can have a function that gets called every 5 or 10 seconds that checks the API to show where you get new post data from. If there is a new post, add it to the newPosts array. This would update state, and if your component is connected to state, it would update props.
With this logic, you'd be able to determine whether or not you should show the "new posts" button with a simple boolean. If the array is empty, hide it, if it isn't, show the button.
Once the button is clicked, you could update the state so that the newPosts data goes into the currentPosts array and those items will get rendered from there.
Hope this makes sense! There may be quite a lot I'm missing but that's the idea of how it could work. Lemme know if you have any questions
answered Jan 2 at 3:00
Nick DeJesusNick DeJesus
4210
thank you so much for the clear explanation, I got it now! so should I start to use redux or can I do it without redux or any other state management? I'm a bit new with react native so I don't really know about this. once again, thank you so much!
– hehe
Jan 2 at 3:45
There are quite a handful of state management tools. I only know redux and I like it a lot. Redux has a pretty big ecosystem, like react. You're probably gonna want to spend some time learning how to use redux, and look into redux-thunk for making API calls within your actions
– Nick DeJesus
Jan 2 at 3:55
add a comment |
Not sure if you're using some kind of state management tool like redux, but it would just be a matter of calling the API every so-often and updating the state from there. I'm going to use redux as an example since it's quite popular
You'd prob want state that has the following info:
currentPosts: //array of posts that the user already sees
newPosts: // array of new posts user can't see until they hit "new posts" button
With redux, you can have a function that gets called every 5 or 10 seconds that checks the API to show where you get new post data from. If there is a new post, add it to the newPosts array. This would update state, and if your component is connected to state, it would update props.
With this logic, you'd be able to determine whether or not you should show the "new posts" button with a simple boolean. If the array is empty, hide it, if it isn't, show the button.
Once the button is clicked, you could update the state so that the newPosts data goes into the currentPosts array and those items will get rendered from there.
Hope this makes sense! There may be quite a lot I'm missing but that's the idea of how it could work. Lemme know if you have any questions
answered Jan 2 at 3:00
Nick DeJesusNick DeJesus
4210
thank you so much for the clear explanation, I got it now! so should I start to use redux or can I do it without redux or any other state management? I'm a bit new with react native so I don't really know about this. once again, thank you so much!
– hehe
Jan 2 at 3:45
There are quite a handful of state management tools. I only know redux and I like it a lot. Redux has a pretty big ecosystem, like react. You're probably gonna want to spend some time learning how to use redux, and look into redux-thunk for making API calls within your actions
– Nick DeJesus
Jan 2 at 3:55
add a comment |
Not sure if you're using some kind of state management tool like redux, but it would just be a matter of calling the API every so-often and updating the state from there. I'm going to use redux as an example since it's quite popular
You'd prob want state that has the following info:
currentPosts: //array of posts that the user already sees
newPosts: // array of new posts user can't see until they hit "new posts" button
With redux, you can have a function that gets called every 5 or 10 seconds that checks the API to show where you get new post data from. If there is a new post, add it to the newPosts array. This would update state, and if your component is connected to state, it would update props.
With this logic, you'd be able to determine whether or not you should show the "new posts" button with a simple boolean. If the array is empty, hide it, if it isn't, show the button.
Once the button is clicked, you could update the state so that the newPosts data goes into the currentPosts array and those items will get rendered from there.
Hope this makes sense! There may be quite a lot I'm missing but that's the idea of how it could work. Lemme know if you have any questions
answered Jan 2 at 3:00
Nick DeJesusNick DeJesus
4210
Not sure if you're using some kind of state management tool like redux, but it would just be a matter of calling the API every so-often and updating the state from there. I'm going to use redux as an example since it's quite popular
You'd prob want state that has the following info:
currentPosts: //array of posts that the user already sees
newPosts: // array of new posts user can't see until they hit "new posts" button
With redux, you can have a function that gets called every 5 or 10 seconds that checks the API to show where you get new post data from. If there is a new post, add it to the newPosts array. This would update state, and if your component is connected to state, it would update props.
With this logic, you'd be able to determine whether or not you should show the "new posts" button with a simple boolean. If the array is empty, hide it, if it isn't, show the button.
Once the button is clicked, you could update the state so that the newPosts data goes into the currentPosts array and those items will get rendered from there.
Hope this makes sense! There may be quite a lot I'm missing but that's the idea of how it could work. Lemme know if you have any questions
answered Jan 2 at 3:00
Nick DeJesusNick DeJesus
4210
answered Jan 2 at 3:00
Nick DeJesusNick DeJesus
4210
answered Jan 2 at 3:00
Nick DeJesusNick DeJesus
4210
answered Jan 2 at 3:00
Nick DeJesusNick DeJesus
4210
4210
thank you so much for the clear explanation, I got it now! so should I start to use redux or can I do it without redux or any other state management? I'm a bit new with react native so I don't really know about this. once again, thank you so much!
– hehe
Jan 2 at 3:45
There are quite a handful of state management tools. I only know redux and I like it a lot. Redux has a pretty big ecosystem, like react. You're probably gonna want to spend some time learning how to use redux, and look into redux-thunk for making API calls within your actions
– Nick DeJesus
Jan 2 at 3:55
add a comment |
thank you so much for the clear explanation, I got it now! so should I start to use redux or can I do it without redux or any other state management? I'm a bit new with react native so I don't really know about this. once again, thank you so much!
– hehe
Jan 2 at 3:45
There are quite a handful of state management tools. I only know redux and I like it a lot. Redux has a pretty big ecosystem, like react. You're probably gonna want to spend some time learning how to use redux, and look into redux-thunk for making API calls within your actions
– Nick DeJesus
Jan 2 at 3:55
thank you so much for the clear explanation, I got it now! so should I start to use redux or can I do it without redux or any other state management? I'm a bit new with react native so I don't really know about this. once again, thank you so much!
– hehe
Jan 2 at 3:45
thank you so much for the clear explanation, I got it now! so should I start to use redux or can I do it without redux or any other state management? I'm a bit new with react native so I don't really know about this. once again, thank you so much!
– hehe
Jan 2 at 3:45
There are quite a handful of state management tools. I only know redux and I like it a lot. Redux has a pretty big ecosystem, like react. You're probably gonna want to spend some time learning how to use redux, and look into redux-thunk for making API calls within your actions
– Nick DeJesus
Jan 2 at 3:55
There are quite a handful of state management tools. I only know redux and I like it a lot. Redux has a pretty big ecosystem, like react. You're probably gonna want to spend some time learning how to use redux, and look into redux-thunk for making API calls within your actions
– Nick DeJesus
Jan 2 at 3:55
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%2f54000607%2fhow-to-detect-when-theres-a-new-data-from-api-using-flat-list-in-react-native%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
