This issue might occur in many cases but one case which is hard to troubleshoot and debug is as given below. The typical call stack looks as follows for the exception
Uncaught TypeError: Cannot read property 'type' of undefined
at bundle.js:64518
at bundle.js:64518
at Array.forEach (<anonymous>)
at x (bundle.js:64518)
One can make out nothing from the call stack, it looks meaningless. Hence the debugging will be tedious job in ReactJS .
Solution for the above exception
check whether return statement with dispatch is missing in your redux action method.
return (function (dispatch) {
});
Your action should have return statement as shown above.
Advantages of React Stateless Functional Components
Before reading this post, if you have not gone through what are functional components in Reactjs then kindly go throughthis post
In this post we will see what are the advantages of functional posts in React js. If you check your react js code, you will quickly figure out that many components do not actually need state, they do get data from parent as props and will render the information. In such a case why to introduce state and make it complicated? rather I would prefer calling a function which returns me a component. Isn’t it so simple ? React 14 introduced Functional Components, also called as stateless components and removed unnecessary complications. So let us explore what are the advantages of stateless components
Advantages of React Functional/Stateless Components: Ref
1. More focused on presentation
React is forcing us to write components which are used only for presentational purpose, these components are useful for dumb presentational purpose only, that focus on UI rather than behaviour. Technically speaking its normal tendency to go for stateful components, doing that way we are making our code easily hackable where every damn component keeps its own local state. Functional components allowing us to have pure components which just focus on presentation. where as the state is maintained by few higher level components.
2. Gain in Performance
Stateless components will bring performance gain since there is no state and lifecycle of a component. React doesn’t need to have unnecessary check and memory allocations which eventually brings performance boost.
3. Clean and Optimised Code
Stateless components reduce lot of code, almost 20% – 30% reduction in code and hence the code will become clean and optimised.
4. Easy to debug
Functional components are pure components and helps your to analyse your code quickly and you no need to put log if assert calls everywhere to debug.
React Native List View : Animate Rows While Scrolling Using FlatList
In my previous post I have written about how to use React Native FlatList and we have seen the issues we face with pagination also how to add a loading indicator in the footer of FlatList. You can first read about it Link In this post we will see how to animate the rows while scrolling a FlatList.
Animating Rows In React Native FlatList :
To achieve animation for FlatList Rows, you have to install an npm module react-native-animatable, which provides variety of smooth animations for List Rows.
Installation of npm module:
$ npm install react-native-animatable --save
To make a continuous animation do this
<Animatable.Text animation="slideInDown" iterationCount={5} direction="alternate">Up and down you go</Animatable.Text>
<Animatable.Text animation="pulse" easing="ease-out" iterationCount="infinite" style={{ textAlign: 'center' }}>❤</Animatable.Text>
To animate rows in FlatList Rows do this
import * as Animatable from 'react-native-animatable';
class FlatListRow extends Component {
render(){
return(
<Animatable.View animation='fadeInUp'>;
<TouchableWithoutFeedback>;
// here your row component
</TouchableWithoutFeedback>;
</Animatable.View>;
);
}
}
Variety of animations are supported in this React Native Animationlibrary
React Native List View : Pagination With FlatList – Building A Great Scrollable List In React Native
FlatList is is an interface used to render flat list, the component is provided by Facebook’s React Native Library
Handy features of FlatList are as follows
It renders list of items if you just provide rendering View
You can mention whether your list is horizontal or vertical, by default its vertical list view
Configurable Callbacks provided
Header / Footer / Separator are supported by FlatList
Pull To Refresh is made simple with React Native Flat List View
Pagination is made easy using React Native Flat List view
How To Use React Native Flat List Component: With Loading symbol in Footer
<FlatList
refreshing={this.state.refreshing}
onRefresh={true}
onEndReachedThreshold={0.5}
onEndReached={({ distanceFromEnd }) => {
//Call API to fetch next page of data
console.log('on end reached ', distanceFromEnd);
}}
ListFooterComponent={(
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Spinner color='#6d4c41' />
<Text>Loading please wait...</Text>
</View>
)}
data={this.props.messages}
renderItem={this.notificationContent.bind(this)}
keyExtractor={(item) => item._id}
/>
React Native Pull To Refresh Using Flat List
Pull to refresh is made easy by just mentioning onRefresh = true and we should also mention refreshing = true while fetching new data
Pagination Using Flat List In React Native
To achieve pagination mention onEndReachedThreshold some value between 0 – 1 and a callback for onEndReached should be provided where we have a logic to call API to fetch next page of data
Official documentation of React Native FlatList has many more functionalities listed.
Issues with React Native FlatList or onEndReached doesn’t get fired
Some times pagination for FlatList doesn’t work as expected, onEndReached Will never get fired, or some times it will be called only first time when list is loaded. Possible reason for this behaviour would be keeping FlatList inside native base Container or Content, Keep FlatList inside View to fix the issue.
Another possible solution to the issue of FlatList is changing onEndReachedThreshold value to a small number like 0.001.
Another Interesting solution which worked for me is giving height explicitly to the FlatList , this will call onEndReachedcallback
Addressing The issue : React Native FlatList onEndReached called again and again
This can be addressed by ignoring the callback calls, this is can be done by using distanceFromEnd, if the value is +ve then do your pagination stuffs, if the value is -ve then ignore the callback call. ReactNative FlatList returns +ve value when scroll reaches the end of the list. So the update code looks like below
<FlatList
refreshing={this.state.refreshing}
onRefresh={true}
onEndReachedThreshold={0.5}
onEndReached={({ distanceFromEnd }) => {
if (distanceFromEnd >= 0) {
//call API to get next page values
}
console.log('on end reached ', distanceFromEnd);
}}
data={this.props.messages}
renderItem={this.notificationContent.bind(this)}
keyExtractor={(item) => item._id}
/>