receiving null is not an object (evaluating ' this.state.search')
<p>I am receiving null is not an object (evaluating 'this.state.search') I am new to react-native so not 100% sure whats going on. thanks for any help.</p>

<p>This is my basic search bar:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>use strict';

import React, { Component }                             from 'react';
import { StyleSheet, Text, View, TextInput, Button }    from 'react-native';
import renderIf                                         from '../common/renderIf';
import { Container, Header, Title, Content, Icon, CardItem, Card, Input, InputGroup} from 'native-base';




export default class SearchBar extends Component {



  render() {
    return (
                &lt;Card&gt; 
                    &lt;CardItem searchBar rounded&gt;                      
                        &lt;InputGroup&gt;
                            &lt;Icon name="ios-search" /&gt;
                            &lt;Input placeholder="Search" value={this.state.search} onChangeText={(text) =&gt; this.setState({search:text})} onSubmitEditing={()=&gt;this.search()}/&gt;
                        &lt;/InputGroup&gt;
                    
                    &lt;/CardItem&gt;
                &lt;/Card&gt;
    );
  }
}</code></pre>
</div>
</div>
</p>

<p>This is is to take the inputed text from the search bar and display the results:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>'use strict';

import React, { Component }                             from 'react';
import { StyleSheet, Text, View, TextInput, Button }    from 'react-native';
import renderIf                                         from '../common/renderIf';
import { Container, Content, Icon, CardItem, Card, Thumbnail, Title, List, ListItem} from 'native-base';
import { Col, Row, Grid }                               from "react-native-easy-grid";

export default class AddMovieResults extends Component {

    search() {   
    // Set loading to true when the search starts to display a Spinner        
    this.setState({            
        loading: true          
    });

    var that = this;        
    return fetch('http://www.omdbapi.com/?s=' +this.state.search)       
    .then((response) =&gt; response.json())            
    .then((responseJson) =&gt; {      
        // Store the results in the state variable results and set loading to                 
         // false to remove the spinner and display the list of repositories                
          that.setState({                    
        results: responseJson,                    
        loading: false                
    });
    return responseJson.Search;            
}) 
    .catch((error) =&gt; {
        that.setState({                    
        loading: false                 
    });
        console.error(error);        
    });    
}


  render() {
    return (

                    &lt;Card scrollEnabled={true}&gt; 
                        &lt;CardItem button &gt;  

                           &lt;List dataArray={this.state.results.items} renderRow={(item) =&gt;               
                                &lt;ListItem button &gt;
                                &lt;Row&gt; 

                                  &lt;Col size={1}&gt;
                                    &lt;Thumbnail square style={{ height: 90, width:60, bottom:6,justifyContent: 'center',}} source={{uri: item.poster}} /&gt; 
                                  &lt;/Col&gt;  

                                  &lt;Col size={3}&gt;
                                    
                                    &lt;Row size={3}&gt; 
                                    &lt;Text style={{ fontSize: 25, color: '#DD5044',justifyContent: 'center',}}&gt;{item.title}&lt;/Text&gt;      
                                    &lt;/Row&gt;

                                    &lt;Row size={1}&gt;
                                    &lt;Text style={{ fontSize: 15, color: '#DD5044',}}&gt;{item._year_data}&lt;/Text&gt;    
                                   &lt;/Row&gt;
                                   
                                   &lt;/Col&gt;
                                  &lt;/Row&gt;  
                                &lt;/ListItem&gt;                            
                            } /&gt;
                        &lt;/CardItem&gt;
                    &lt;/Card&gt; 
    );
  }
}</code></pre>
</div>
</div>
</p>

<p>This is my index file which displays the above files on one page:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>'use strict';

import React, { Component }                             from 'react';
import { StyleSheet, Text, View, TextInput, Button }    from 'react-native';
import renderIf                                         from '../common/renderIf';
import { Container, Header, Title, Content}             from 'native-base';
import { Col, Row, Grid }                               from "react-native-easy-grid";

import AddMovieResults                                  from './AddMovieResults';
import SearchBar                                        from './SearchBar';


export default class AddNewMovie extends Component {




  render() {
    return (
        &lt;Container scrollEnabled={false}&gt;
            &lt;Header&gt;
                &lt;Title&gt; Add Movie&lt;/Title&gt;
            &lt;/Header&gt;
            &lt;Content&gt;
        &lt;Grid&gt;
            &lt;Col&gt;
            {/* import search bar */}
                &lt;SearchBar/&gt;
            {/*import search results*/}
                &lt;AddMovieResults/&gt;
            &lt;/Col&gt;
        &lt;/Grid&gt;
            &lt;/Content&gt;
        &lt;/Container&gt;
    );
  }
}</code></pre>
</div>
</div>
</p>