How to build really simple app with react-native

Hello. Welcome. 👋 This is urbunse react-native : A post to help you build your first mobile app, even if all you've ever done is write JavaScript. Especially if all you've ever done is JavaScript.

 At first I need to create new project with react-native project flow the picture..

As you saw above I used the common : react-native init Project name to create my new project so you can put the name of your project as you want.. and choose your location that you want to put it into...☺️☺️☺️ now you it time to start your mission with this project yeyeye…😊😊😊 But before you start to run our project we still need to install some npm as below

Or if you had installed it already it’s okay.. So now I'm going to tell the key how to run our project. It’s really simple follow me..🤗🤗🤗🤗🤗

 If you don’t understand you will say: what the fuck is that? It’s so messy!!!😇😇😇😇 Comedown please let me explain what does it me step by step… Step 1: - cd PhotoFlip..(*my project directory) - react-native run-ios (* run our project) Step 2: - It's the detail of the project when run like what port… Xcode file... As I said It’s simple so don’t think it complex easy easy….🤐🤐🤐🤐🤐🤐😳😳 Let’s see the the result of our first run of the year..😃😃😃😃

 Congrats wow, it's work!!!👏👏👏👏👏 Antother thing I’m going to explain some tips before we jump to write our super cool app….👍👍👍👍

 You will say, what? some but a lot. I’m not a lier😏😏. 🙌🙌🙌 I will tell you some of this that I almost use it and frequently use as well. -The first 1 is Reload: in short cut: cmd + R -Debug JS Remotely it used with your browser like chrome or firefoce.. when you run or reload your simulator it will reload on your browser as well at the same time.. So you will see warming or error or nothing of success 🙌🙌🙌. The last but not less is Enable Hot Reloading it will reload your simulator automatically when you save (cmd + S) your project when writing code.. super cool, right.. thank Facebook.githum.com 👍👍👍👍 Now we’re going deeper it make it work as our expect it work but you should understand the structure first….

 -At the left side it’s project structure index.ios.js it’s run on iOS platform and index.andoid.js it’s run on Android platform Another thing like module for all npm so on, package.json store dependency, configuration, project name…. -At the right side if the default when we init our project so don’t worry…😇😇 😇

 Now I delete some of the default code and write our code to make it our project both iOS and Android.. Let’s do it…😛😛😛. 😛 I Oh, now I will tell you the secret that I are going to build our app…😗😗😗

 Oh, god I just make really awesome app design app, I don’ believe I can do that.. but you did it.. you can use some whatever you like Sketch or Photoshop or other… But for me I used Sketch because It's simple and easy…🤗🤗🤗🤗🤗😝 Back to our code and make as our design or a bit different as you want..

Here is our real design with some code

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableHighlight
} from 'react-native';
import Header from './src/components/Header';
const Images = [
  {
    uri: "https://4.bp.blogspot.com/-_AT3zNuj6Mo/
    WSVA8pNqUGI/AAAAAAAABpI/2w7IvyQP788lIAktMtawnBZQ8tNLJBDcQCLcB/s1600/8.jpg",
    label: "Supper yummy fly mushroom cooking"
  },
  {
    uri: "https://2.bp.blogspot.com/-hM0_laipdCg/
    WSVeoeNhUWI/AAAAAAAAAJo/fU4UnVXnUz0Hz6pVkt2KIkW8fGDwdI0TwCEw/s1600/11.jpg",
    label: "Amazing delicious fly hot checkent"
  },
  {
    uri: "https://2.bp.blogspot.com/
   -TvBHHtwoOqo/WSxGGmZzMAI/AAAAAAAABqs/
    pupaClNum4g79erQYirqbOjz3SorBx5HACEw/s1600/8.jpg",
    label: "Great flavorful fly pork"
  },
  {
    uri: "https://1.bp.blogspot.com/-lUlBhorpaLQ/
    WSRZzHHp4CI/AAAAAAAABmA/DBIB0a7S9gUwyOazCoUVlitlwhSd_FmOwCLcB/s1600/5.jpg",
    label: "Tasty and save money food"
  }
];
class Photoflib extends Component {
  state = {
    index: 0,
    imageWidth: null
  }
  nextImage (event) {
    const {index, imageWidth} = this.state,
    X = event.nativeEvent.locationX,
    delta = (X < imageWidth/2) ? -1: +1;
    let newIndex = (index + delta) % Images.length;
    if(index < 0) {
      newIndex = Images.length - Math.abs(newIndex);
    }
    this.setState({
      index: newIndex
    });
  }
  onImageLayout(event){
    this.setState({
      imageWidth: event.nativeEvent.layout.width
    });
  }

Main code here

const styles = StyleSheet.create({
  // style stuff
  containerStyle: {
    flex: 1
  },
  boxStyle: {
    backgroundColor:'#ddd',
    paddingTop: 70,
    marginTop: 1,
    height: 700,
    flex: 1
  },
  borderStyle:{
    backgroundColor:'#fff',
    height: 400,
    marginLeft: 20,
    marginRight: 20,
    alignItems: 'center',
    justifyContent:'center',
    shadowColor: '#3f4147',
    shadowOpacity: 0.9,
    shadowOffset: { width: 0, height: 2 },
    elevation: 1,
    position: 'relative'
  },
  imageStyle:{
    width: 320,
    height: 320
  },
  textStyle:{
    backgroundColor: '#2dbf60',
    color: '#fff',
    fontSize: 18,
    fontWeight: '600',
    width: 320,
    height: 30,
    textAlign: 'center'
  }
});

Here is the result of our effort, wow, amazing you did it…

here is github project you can check it out..