Tutorial App Delivery – React Native + API – Part 1: Swiper

React Native video

Logo

URL API

http://tutofox.com/foodapp/api.json

Create project

sudo react-native init appfood

create file local.properties

Antes de compilar en android debes crear un archivo local.properties en la carpeta de android y pegarlo el codigo para localizarlo el SDK
Before compiling on android you must create a local.properties file in the android folder and paste the code to locate the SDK

sdk.dir = /home/artyom/Android/Sdk/
ANDROID_HOME = /home/artyom/Android/Sdk/

windows

sdk.dir=C\:\\Users\\Artyom\\AppData\\Local\\Android\\Sdk

Run project

// android
react-native run-android
// ios
react-native run-ios

Run npm

sudo react-native start

Crear una carpeta llamado src y crear un archivo index.js
Create a folder called src and create an index.js file

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class Examle extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>APp Delivery </Text>
      </View>
    );
  }
}

react-native-swiper

https://github.com/leecade/react-native-swiper
Is a Swiper component for React Native.

npm i --save react-native-swiper@nightly

import

import React, { Component } from 'react';
import { Text,
  FlatList,
  Image,
  StyleSheet,
  Dimensions,
  View,
  ScrollView,
  TextInput
} from 'react-native';
var {height, width } = Dimensions.get('window');
import Swiper from 'react-native-swiper'

state

  constructor(props)
  {
    super(props);
    this.state = {
      dataBanner:[]
    }
  }

componentDidMount

  componentDidMount(){
    const url = "http://tutofox.com/foodapp/api.json"
    return fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {

      this.setState({
        isLoading: false,
        dataBanner: responseJson.banner,
      });

    })
    .catch((error) =>{
      console.error(error);
    });
  }

render

render() {
    return (
      <ScrollView>
        <View style={{ flex: 1,backgroundColor:"#f2f2f2" }}>
          <View style={{width: width, alignItems:'center'}} >
              <Image style={{height:60,width:width/2,margin:10 }} resizeMode="contain" source={require("./image/foodapp.png")}  />
              <Swiper style={{height:width/2}}  showsButtons={false} autoplay={true} autoplayTimeout={2}>
                {
                  this.state.dataBanner.map((itembann)=>{
                    return(
                      <Image style={styles.imageBanner} resizeMode="contain" source={{uri:itembann}}/>
                    )
                  })
                }
              </Swiper>
              <View style={{height:20}} />
          </View>
        </View>
      </ScrollView>
    );
  }

styles

const styles = StyleSheet.create({
  imageBanner: {
    height:width/2,
    width:width-40,
    borderRadius:10,
    marginHorizontal:20
  }, 
});

Source font

import React, { Component } from 'react';
import { Text,
  FlatList,
  Image,
  StyleSheet,
  Dimensions,
  View,
  ScrollView,
  TextInput
} from 'react-native';
var {height, width } = Dimensions.get('window');
import Swiper from 'react-native-swiper'

export default class App extends Component {

  constructor(props)
  {
    super(props);
    this.state = {
      dataBanner:[]
    }
  }

  componentDidMount(){
    const url = "http://tutofox.com/foodapp/api.json"
    return fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {

      this.setState({
        isLoading: false,
        dataBanner: responseJson.banner,
      });

    })
    .catch((error) =>{
      console.error(error);
    });
  }

  render() {
    return (
      <ScrollView>
        <View style={{ flex: 1,backgroundColor:"#f2f2f2" }}>
          <View style={{width: width, alignItems:'center'}} >
              <Image style={{height:60,width:width/2,margin:10 }} resizeMode="contain" source={require("./image/foodapp.png")}  />
              <Swiper style={{height:width/2}}  showsButtons={false} autoplay={true} autoplayTimeout={2}>
                {
                  this.state.dataBanner.map((itembann)=>{
                    return(
                      <Image style={styles.imageBanner} resizeMode="contain" source={{uri:itembann}}/>
                    )
                  })
                }
              </Swiper>
              <View style={{height:20}} />
          </View>
        </View>
      </ScrollView>
    );
  }

}

const styles = StyleSheet.create({
  imageBanner: {
    height:width/2,
    width:width-40,
    borderRadius:10,
    marginHorizontal:20
  }, 
});