ReactNative

ReactJS/Redux Exception – Uncaught TypeError: Cannot read property ‘type’ of undefined

ReactJS/Redux Exception – Uncaught TypeError: Cannot read property ‘type’ of undefined

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.

More Read About ReactJS:

Advantages of React Stateless Functional Components

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 through this 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 more on React

React More on ReactNative 

React Native List View : Animate Rows While Scrolling Using FlatList

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 Animation library

React Native List View : Pagination With FlatList – Building A Great Scrollable List In React Native

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

  1. It renders list of items if you just provide rendering View
  2. You can mention whether your list is horizontal or vertical, by default its vertical list view
  3. Configurable Callbacks provided 
  4. Header / Footer / Separator are supported by FlatList
  5. Pull To Refresh is made simple with React Native Flat List View
  6. 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 onEndReached callback

style={{ height: ( Dimensions.get(‘window’).height – 100 ) }}

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}
        />


Also Explore React Native Exceptions

ReactNative Exception: TabNavigator expected a component class, got [object, object]

ReactNative Exception: TabNavigator expected a component class, got [object, object]

Possible cases to get ReactNative Error: ReactNative Exception: TabNavigator expected a component class, got [object, object] .

  1. When you are using a component with all small letters or a component that begin with small letter, Example

 

const FooterTabNavigation = TabNavigator(
  {
    Home: {
      screen: ({ screenProps, navigation }) => <homePage navigation={navigation} />
    },
 });

 

Solution : Use Capitalised class names, like HomePage navigation={navigation}

2. Another case is if by any chance you are using <div> component in ReactNative this exception might occur.
Example

const FooterTabNavigation = TabNavigator(
  {
    Home: {
      screen: ({ screenProps, navigation }) =&gt; &lt;homePage navigation={navigation} /&gt;
    },
    TestScreen: {
      screen: ({ screenProps, navigation }) =&gt; &lt;div /&gt;
    }
});

 

Solution : Do not use div tag in ReactNative instead use View

Explore More About React Native : React Native FlatList And Pagination