20. [Moving] We've moved to the new and improved blog Beluga Code!

We've moved to a new and improved blog Beluga Code, come check us out!

7. [How-to] Do or perform a HTTP GET to download a JSON file from online web server in React Native

You will use the fetch networking API and is available in React Native by default.

I followed this guide: https://facebook.github.io/react-native/docs/network.html

The code highlighted in green will show you how to download a json file from an online web server using the fetch api and then show the content of the json in an alert. You can click a button or TouchableOpacity to trigger the downloading (GET request) of the JSON file.

import React, {
  AppRegistry,
  Alert,
  Component,
  View,
  Text,
  AsyncStorage,
  TouchableOpacity,
  Navigator,
  ScrollView,
  Image,
  Dimensions,
  Animated,
  PanResponder,
  StatusBar,
} from 'react-native'

let {height, width} = Dimensions.get('window')

import Splash from './Splash'
import Element from './Element'

export default class App extends Component {
  constructor(props){
    super(props)
    let appData = {
      page1: {
        type: 'View',
        passProps: {style: {flex:1, backgroundColor: 'white'}},
        children: [{
          type: 'TouchableOpacity',
          passProps: {onPress: ()=>this.navigate({pageName: 'page2', navFunction: 'push'}), style: {flex:1, backgroundColor: '#6a6c94', alignItems: 'center', justifyContent: 'center',}},
          children: {
            type: 'Text',
            passProps: {style: {color: 'white'}},
            children: 'Navigate to Page 2'}
          }, {
          type: 'View',
          passProps: {style: {flex:1, backgroundColor: '#dd4444', alignItems: 'center', justifyContent: 'center',}},
          children: {
            type: 'Text',
            passProps: {style: {color: 'white'}},
            children: 'Page 1 Text'}
          },
        ],
      },
      page2: {
        type: 'View',
        passProps: {style: {flex:1, backgroundColor: 'white'}},
        children: {
          type: 'View',
          passProps: {style: {flex:1, backgroundColor: '#6a6c94', alignItems: 'center', justifyContent: 'center',}},
          children: {
            type: 'Text',
            passProps: {style: {color: 'white'}},
            children: 'Page2 first view'
          }
        }
      },
      page3: {
        type: 'View',
        passProps: {style: {flex:1, backgroundColor: 'white'}},
        children: null,
      },
      page4: {
        type: 'View',
        passProps: {style: {flex:1, backgroundColor: 'white'}},
        children: null,
      },
    }
    let appDataString = JSON.stringify(appData, function(key, val) {
    if (typeof val === 'function') {
      return val + ''; // implicitly `toString` it
    }
    return val
    })
    appData = JSON.parse(appDataString)
    this.state = {
      splashScreen: true,
      currentPage: 'page1',
      isStructureMode: true,
      structureFlexAnim: new Animated.Value(2),
      styleFlexAnim: new Animated.Value(1),
      isPlayMode: false,
      dropZoneValues  : null,
      pan             : new Animated.ValueXY(),
      appData: appData,
    }

    this.panResponder = PanResponder.create({
        onStartShouldSetPanResponder    : () => true,
        onPanResponderMove              : Animated.event([null,{
            dx  : this.state.pan.x,
            dy  : this.state.pan.y
        }]),
        onPanResponderRelease           : (e, gesture) => {
            if(this.isDropZone(gesture)){
              let appData = {...this.state.appData}
              delete appData[e.dispatchMarker.slice(-5)]
              this.setState({appData})
            }
            Animated.spring(
                this.state.pan,
                {toValue:{x:0,y:0}}
            ).start()

        }
    })
  }

  downloadjson(){

    // change the url to the path of where you json file is located;
    fetch('http://gerrycao.com/drago/testFile.json', {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }
    }).then((response)=>{
        alert(response);
      response.json().then((jsonBody)=>{
        alert(jsonBody);
      })
    })
    .catch((err)=>{
      alert("error getting json");
    })
  }
  componentDidMount(){
    setTimeout(()=>this.setState({
      splashScreen: false
    }), 2000)
  }
  render(){
    if(this.state.splashScreen) {
      // Load App here, and show Splash while we load the app.
      return <Splash />
    }
    return (
      <View style={{flex: 1, backgroundColor: '#404040'}}>
        <StatusBar backgroundColor="black" />
        <View style={{flexDirection: 'row', justifyContent:'flex-end', alignItems: 'center', backgroundColor: '#212121'}}>
          <TouchableOpacity onPress={this.export.bind(this)}>
          <Image source={require('./img/upload.png')} style={{width: 50, height:50}} resizeMode='contain'/>
          </TouchableOpacity>

          <TouchableOpacity onPress={this.downloadjson.bind(this)}>
          <Image source={require('./img/download.png')} style={{width: 50, height:50}} resizeMode='contain'/>
          </TouchableOpacity>

  {/*        <TouchableOpacity onPress={this.addobjecttoapp.bind(this)}>
          <Text style={{color:'black'}}>Add Object to App</Text>
          </TouchableOpacity>*/}
        </View>


        {/*<View style={{flex:1, backgroundColor: 'pink'}}>
          <View style={{flex:1, backgroundColor: 'orange', alignItems: 'center', justifyContent: 'center',}}>
            <Text style={{color: 'blue'}}>Page2 first view</Text>
          </View>
        </View>*/}
        <View style={{flex:1, flexDirection: 'row'}}>
          <View style={{flex:2, flexDirection: 'column', marginRight: 12}}>
            {/*<View style={{flex:65, borderLeftWidth: 18, borderColor: '#dd4444', backgroundColor: '#514d4d', marginTop: 19, elevation: 25}}>
              <ScrollView style={{marginTop: 4, marginBottom: 4}}>
                {this.renderStyleElements()}
              </ScrollView>
            </View>*/}
            <View style={{flex:65, borderLeftWidth: 18, borderColor: this.state.isStructureMode?'#6a6c94':'#dd4444', backgroundColor: '#514d4d', marginTop: 19, elevation: 12}}>
              <ScrollView style={{marginTop: 4, marginBottom: 4}}>
                { this.state.isStructureMode
                  ? this.renderViewElements()
                  : this.renderStyleElements()
                }
              </ScrollView>
            </View>
            <View style={{flex:12, marginTop: 8, marginBottom: 8, flexDirection: 'row', elevation: 12}}>
              <TouchableOpacity onPress={()=>{
                  if(this.state.isPlayMode) {
                    this.setState({isPlayMode: false})
                  } else {
                    this.setState({isPlayMode: true})
                  }
                }}
                style={{flex:1, borderLeftWidth: 18, borderColor: '#009688', backgroundColor: '#514d4d', marginRight: 6, elevation: 12, alignItems: 'center', justifyContent: 'center'}}>
                <Image source={this.state.isPlayMode?require('./img/icon_build.png'):require('./img/icon_preview.png')} style={{width: 80}} resizeMode='contain'/>
              </TouchableOpacity>
              <View onLayout={this.setDropZoneValues.bind(this)}
                style={{flex:1, borderLeftWidth: 18, borderColor: '#009688', backgroundColor: '#514d4d', elevation: 12, alignItems: 'center', justifyContent: 'center'}}>
                  <TouchableOpacity>
                    <Image source={require('./img/icon_delete.png')} style={{width: 80}} resizeMode='contain'/>
                  </TouchableOpacity>
              </View>
            </View>
            <View style={{flex:23, borderLeftWidth: 18, borderColor: '#6a6c94', backgroundColor: '#514d4d', marginBottom: 12, justifyContent: 'center', elevation: 8}}>
              <ScrollView contentContainerStyle={{margin: 8, flexDirection: 'row', flexWrap: 'wrap'}} bounces={false}>
                {this.renderPageThumbnails()}
              </ScrollView>
            </View>
          </View>
          <View style={{flex:3, marginTop: 12, marginBottom:6, width: (width*2)/3, marginLeft: -24, marginRight: 36}}>
            <Image style={{flex:1, width: (width*2)/3}} resizeMode='contain' source={require('./img/phone_mockup.png')} >
              <View style={{flex:1, margin: 70, marginTop: 139, marginBottom: 132}}>
                <Navigator
                  ref='navigator'
                  initialRoute={{name: 'My First Scene', index: 0}}
                  renderScene={(route, navigator) =>
                    <Element {...this.state.appData[route.currentPage || this.state.currentPage]} navigator={navigator} route={route} />
                  }
                />
              </View>
            </Image>
            {/*<Navigator
              ref='navigator'
              initialRoute={{name: 'My First Scene', index: 0}}
              renderScene={(route, navigator) =>
                <Element {...this.state.appData[route.currentPage || 'page1']} navigator={navigator} route={route} />
              }
            />*/}
          </View>
        </View>

        {/*<View style={{height: 70, flexDirection: 'row', backgroundColor: 'grey', alignItems: 'center'}}>
          {this.renderPageThumbnails()}
        </View>*/}

        {/* --- Render bottom two buttons --- */}
        <View style={{height: 44, flexDirection: 'row'}}>
          <Animated.View style={{flex:this.state.structureFlexAnim}}>
            <TouchableOpacity style={{flex:1}} onPress={()=>{
                this.setState({isStructureMode: true})
                Animated.timing(  // Uses easing functions
                  this.state.structureFlexAnim,  // The value to drive
                  {toValue: 2, duration: 200,}  // Configuration
                ).start()
                Animated.timing(  // Uses easing functions
                  this.state.styleFlexAnim,  // The value to drive
                  {toValue: 1, duration: 200,}  // Configuration
                ).start()
              }}>
              <View style={{flex:1, backgroundColor: this.state.isStructureMode?'#6a6c94':'#212121', alignItems: 'center', justifyContent: 'center'}}>
                <Text style={{color: 'white'}}>Structure</Text>
              </View>
            </TouchableOpacity>
          </Animated.View>
          <Animated.View style={{flex:this.state.styleFlexAnim}}>
            <TouchableOpacity style={{flex:1}} onPress={()=>{
                this.setState({isStructureMode: false})
                Animated.timing(  // Uses easing functions
                  this.state.styleFlexAnim,  // The value to drive
                  {toValue: 2, duration: 200,}  // Configuration
                ).start()
                Animated.timing(  // Uses easing functions
                  this.state.structureFlexAnim,  // The value to drive
                  {toValue: 1, duration: 200,}  // Configuration
                ).start()
              }}>
              <View style={{flex:1, backgroundColor: this.state.isStructureMode?'#212121':'#dd4444', alignItems: 'center', justifyContent: 'center'}}>
                <Text style={{color: 'white'}}>Style</Text>
              </View>
            </TouchableOpacity>
          </Animated.View>
        </View>
      </View>
    )
  }
}

AppRegistry.registerComponent('drago', () => App)