React-native tutorial #2 : Make movie search application step by step

Public on March 19, 2017
After finish this tutorial we can build something like this.





So let's start.
First we gonna break down the layout, create a project structure  and make a check list what we gonna use to make this. 

#1 : Create TabBarIOS
#2 : Create Navigator
#3 : Create a Listview ,  pull to refresh
#4 : Load and parse data
#5 : Create movie items, bind data to Listview
#6 : Create a search bar, excuse seach function
#7 : Create and parse data to detail movie screen
#8 : Drag view





Take note :

/** there is something new in this project , i take note for myself here */

 - List of movies currently playing in theaters from The Movie Database

Walkthrough

Navigator pass data to next page

Tabbar

  • constructor to set default tab selected
  constructor() {
    super();  
    this.state = {
      selectedTab: 'homeTab',
    };
  }
  return (
   
      {
         this.setState({
           selectedTab: 'homeTab',
         });
       }}>
       {this._renderContent('#414A8C', 'Home tab')}
     
      {
         this.setState({
           selectedTab: 'newMobieTab',              
         });
       }}>
       {this._renderContent('#783E33', 'Featured Tab')}
     

   
 );  
  • _renderContent()

    _renderContent(color: string, pageText: string){
      return (
        <View style={[styles.tabContent, {backgroundColor: color}]}>
          <Text style={styles.tabText}>{pageText}</Text>
          <Text style={styles.tabText}>{num} re-renders of the {pageText}</Text>
        </View>
      );
    }  

Search Bar

  1. Add textinput and trigger when input change
  2. Filter function, using javascript search method, example
  var rows = [];
  var title = rowData.title.toLowerCase();
  var desc = rowData.overview.toLowerCase();
  if(title.search(this.state.searchText.toLowerCase()) !== -1 || desc.search(this.state.searchText.toLowerCase()) !== -1){
    return(
    ...
    )
  }

Animation

Image
Alternative filter
  • Examples
  • The concept is you filter when fetch data and update to datasource
 fetch(‘notes’, {
   context: this,
   asArray: true,
   then(data){
     let filteredData = this.filterNotes(searchText, data); // Filter here
     this.setState({
       dataSource: this.ds.cloneWithRows(filteredData),
     });
   }
 });
}
// Process filter data
filterNotes(searchText) {

}
  • Loading images
npm install react-native-image-progress --save
npm install react-native-progress --save
movies.js
import Image from 'react-native-image-progress';
import Progress from 'react-native-progress';
...



References

  constructor(); // 1. first
  componentWillMount(); // 2 second
  render(); // 3 third
  componentDidMount(); // 4 last

Tips:

Wait to load data from API ? cause JS using async method, so we have to wait util the datasouce has data:

  render(){        
    if(this.state.dataSource.getRowCount() === 0 ){
      var rows = <View><Text>Loading.....</Text></View>
    }else {
      var rows = <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this._renderRow.bind(this)}
                    renderSeparator={this._renderSeparator}
                  />
    }

[Updating....]












[Advertising]Faster Thinking - Speed up your brain


Faster Thinking Game



sentiment_satisfied Emoticon