Comments (6)
Hey @vnshgrg , could share your code with us? However, ListView
renders its row depending on provided data prop.
from ui.
@SoHotSoup Here's my code:
componentDidMount(){
this._getFeed();
}
_getFeed = async function(){
var id = this.props.user.data.id;
var token = 'JWT '+ this.props.user.token;
var limit = this.props.state.limit;
var requestUrl = 'http://52.68.64.112:1337/feed/'+id+'/allFeed/'+limit;
this.props.dispatch((dispatch) => {
axios.get(requestUrl, {headers: {Authorization: token}})
.then((response) =>{
if(response.status === 200){
if(limit === 1){
this.props.dispatch(feedAction.getFeed(response.data.objects));
}else{
this.props.dispatch(feedAction.appendFeed(response.data.objects));
}
}else{
// dispatch ERROR
console.log(response);
}
this.props.dispatch(feedAction.incrementLimit(this.props.state.limit));
}).catch((error) => {
console.log(error);
});
});
}
_updateFeed(){
this._getFeed();
}
_renderRow(feed){
console.log(feed);
return(
<View styleName="stretch" style={{marginHorizontal: 5, marginTop: 10, borderRadius: 2}}>
<Row>
<Image
styleName="respect-avatar"
source={{ uri: feed.creatorId.profilePhoto}}
/>
<View styleName="vertical stretch space-between">
<Subtitle style={{fontSize: 18}}>{feed.creatorId.name}</Subtitle>
<Caption>{Moment(feed.createdAt).fromNow()}</Caption>
</View>
</Row>
<Row>
<Text>{feed.message}</Text>
</Row>
</View>
);
}
render() {
return(
<View styleName="flexible sm-gutter-horizontal" style={{marginTop: 64, marginBottom: 50, backgroundColor: '#f1f5f8'}}>
<StatusBar
barStyle="light-content"
/>
<ListView
data={this.props.state.feeds}
onLoadMore = {this._updateFeed.bind(this)}
renderRow={this._renderRow.bind(this)}
/>
</View>
);
}
So, with this i am able to fetch array of data from the server using _getFeed method, populate my ListView with the data. i am also able to fetch for new data and append it to the state but the appended array of data is not rendered in the ListView. The shoutem/ui documentation have very less information so couldn't figure it out.
from ui.
It's hard to get it from this code snippet but seems to me that data
isn't changed and always points to the same reference. Take a look at this line https://github.com/shoutem/ui/blob/develop/components/ListView.js#L116
ListView doesn't do deepEqual
on data, but it expects a completely new array, so if reducer that handles appendFeed
mutate state that wouldn't trigger new render on ListView
.
I'm afraid that deep comparison on data object could have an impact on performance on larger sets of data.
So, I would advise you to try always create a new array in your reducers. If that is not an option, then you could just do this:
<ListView
data={[].concat(this.props.state.feeds)}
onLoadMore = {this._updateFeed.bind(this)}
renderRow={this._renderRow.bind(this)}
/>
from ui.
Here's the reducer that handles data change. I am not sure if I am doing it correctly.
case "APPEND_FEEDS": {
const prevState = state;
action.payload.map((feed) => {
prevState.feeds.push(feed);
});
const newFeeds = prevState.feeds;
state = Object.assign({}, state, {feeds: newFeeds});
break;
}
UPDATE: I used the data={[].concat(this.props.state.feeds)}
method and it is working as per my expectation. Not sure if it will have performance issues. I am fairly new to React-native.
Thank you for helping me out @SoHotSoup, I am loving shoutem/ui and will be around.
from ui.
Ok, I was right about your reducer, you are mutating feeds.
Just change
const newFeeds = prevState.feeds
to const newFeeds = [].concat(prevState.feeds)
After it, you can remove my previous suggestion and [].concat(data)
will not be needed anymore.
Please close issue if you're satisfied with my answer.
from ui.
Thank you very much. Works as expected.
from ui.
Related Issues (20)
- unable to install HOT 9
- [Expo project] BVLinearGradient was not found in uimanager HOT 1
- Getting an error in Android Studio "Caused by: java.lang.Exception: internal/modules/cjs/loader.js:983 throw err; ^Error: Cannot find module 'react-native/cli'" #1121
- StatusBar style fixing HOT 1
- Unable to resolve "warnOnce" from "node_modules/@shoutem/ui/node_modules/react-native/Libraries/react-native/react-native-implementation.js" HOT 8
- Wrong onEndReachedThreshold for ListView
- DropDownMenu given 2 items in list the last items is transparent
- Android Not compiling with Shoutem UI HOT 3
- I had to remove a react-native-photo-view which links to the github of shoutem from the dependency to fix a com.facebook.imagepipeline.cache.CountingMemoryCacheInspector duplicated class error
- Error: Unable to resolve module `@shoutem/ui;` | @shoutem/ui; could not be found within the project
- Navigation bar issue with notch on iPhone 12
- Inherited view properties are not correctly assigned on some components
- Icon must be an SVG file imported as a React component. HOT 1
- Why I'm getting this error message HOT 1
- All icons throw `Icon with name "____" not found within the provided set.` HOT 3
- Module not found: Can't resolve './ImageGallery' HOT 1
- Not support latest version of React HOT 1
- Latest versions are not getting published as releases?
- Create a Security Policy
- Image.propTypes is undefined when using ImagePreview component HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ui.