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

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

Source code available on Githug

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

• Follow example to understand how it works

Tabbar

• constructor to set default tab selected

  constructor() {
    super();  
    this.state = {
      selectedTab: 'homeTab',
    };
  }

• TabBarIOS

  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

• Follow example
• Using ScrollView and LayoutAnimation

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

• React Native example
• React Native LifeCycle

  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....]

Thanks coderschool.vn