First steps with react native

This blog is intended to test react native.

We are going to follow steps on this link

We need to install react native command line utility with the follow command. We are assuming that you have node already installed.

npm install -g create-react-native-app

After that we are going to create our application with the follow command

create-react-native-app demo

Finally you can run your application with the following command

npm start

It will give you a QR code on terminal, you can read this QR with exp application on IOs or Android and start testing you application.

Any change you make on your code it will be refreshed on your phone if you enable that on exp application.

You have to download exp application. Plase visit this link

We are going to create a basic application that consume rest service and display the result on a list.

In this blog we are going to use react-native-elements. You can find documentation on this link.

The final result will be an application like the image bellow.

We have three components: App who is the main component, Result who is in charge to show the list of results and ResulItem who is in charge to show each item.
In App module you can see search method to call rest api service to get articles and change state to render the result. At this point its really important to change state to force render.
For UI we use SearchBar component. If you need more information about this components and others please follow this link.

The magic here happends everytime you write something on SearchBar. When you write something search method call a restservice api and change the state using setState. This will force the execution of render and he result is draw again.

App Component

import React from 'react';
import { StyleSheet, Text, View, ActivityIndicator, TextInput } from 'react-native';
import { Result } from './components/Result';
import { SearchBar } from 'react-native-elements';

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { 
      filter: '',
      hasData: false,
      news: [] 
    }
  }
  
  search = (text) => {
    fetch('https://newsapi.org/v1/articles?source=' + text + '&apiKey=********************************')
      .then((response) => {
        return response.json()
      })
      .then((result) => {
        if(result.status == 'error'){
          this.setState({
            hasData:false,
            news: []
          })
        }
        else{
          this.setState({
            hasData:true,
            news:result.articles
          })
        }
        
      })
  }

  render() {
       return (
        <View style={styles.container}>
           <View>
              <Image
                 style={{width: 100, height: 100}}
                 source= {{uri: this.props.item.urlToImage}}
              />
           </View>
          <View style={styles.rigth}>
             <Text style={styles.title}>
                {`${this.props.item.title}`} 
             </Text>
             <Text style={this.props.item.author!=null?styles.author:styles.hide}>
                {`${this.props.item.author}`} 
             </Text>
             <Text style={{color: 'blue'}}
                onPress={() => Linking.openURL(this.props.item.url)}>
                more (+)
             </Text>
         </View>
       </View>);
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 12,
    flexDirection: 'row',
    alignItems: 'center',
  },
  title: {
    marginLeft: 12,
    fontSize: 16,
  },
});

Result Component

import React from 'react';
import { StyleSheet, Text, View, ListView} from 'react-native';
import { ResultItem } from './ResultItem';
 
export class Result extends React.Component {
    constructor(props) {
        super(props)
        this.state = { 
          filter: '',
          news: [] 
        }
      }

    render() {
        if (this.props.list.length){
            const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
            const dataSource = ds.cloneWithRows(this.props.list);
            return (
                      <View style={{flex: 4}}>
                          <ListView
                             dataSource={dataSource}
                             renderRow={(rowData) =>
                             <ResultItemitem={rowData}></ResultItem>
                             }
                          />
                      </View>);
        }
        else {
            return (<Text style={styles.nodata}>No data..</Text>);
        }
    }
}

const styles = StyleSheet.create({
    nodata: {
      padding: 10,
    }
});

ResultItem Component

import React from 'react';
import { StyleSheet, Text, View, Image, Linking} from 'react-native';
 
export class ResultItem extends React.Component {
    render() {
      return (
        <View style={styles.container}>
           <View>
              <Image
                 style={{width: 100, height: 100}}
                 source= {{uri: this.props.item.urlToImage}}
              />
              </View>
                  <View style={styles.rigth}>
                      <Text style={styles.title}>
                         {`${this.props.item.title}`} 
                      </Text>
                      <Text style={this.props.item.author!=null?styles.author:styles.hide}>
                         {`${this.props.item.author}`} 
                      </Text>
                      <Text style={{color: 'blue'}}
                         onPress={() => Linking.openURL(this.props.item.url)}>
                         more (+)
                      </Text>
                  </View>
              </View>);
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    borderBottomColor: '#D5D8DC',
    borderBottomWidth: 1,
    padding: 10
  },
  title: {
    fontSize: 16,
  },
  author: {
    paddingTop:10
  },
  rigth: {
    padding:10
  },
  hide:{
    display: 'none'
  }
});

I hope this blog was helpful for you.
If you want to download the code please go to github