Creating a mobile application on React Native

Hello. This will be the first part in creating our mobile application.



We will do a mobile application using react native and expo. We will not create a great news application. For this we will use php via rest api.



In our application, we will display articles that will be in phpmyadmin.

What is expo?

Expo, is a set of tools, libraries and services that allow you to create your own applications for iOS and Android using JavaScript. It sounds promising. Simply put, Expo helps you view projects while you are still developing them. The Expo CLI creates a development URL (similar to a local host on the Internet) that can then be opened in the Expo client to preview the application.

Expo Installation

Before installing expo, make sure you install npm.

npm install expo-cli —global
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Install expo on iphone



Install expo on android





Expo gives you options. You can preview your application through the Expo client application on your mobile device or using the iOS / Android simulator on your computer. When creating the application, I used expo on android.

Creating an expo application

 epxo init
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

After installing Expo, the Expo CLI interface opens and allows you to select the project name and template. We will choose a blank page.

 cd newsApp expo start —tunnel
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

After that, expo will launch the local development server, open a new window for viewing the server and provide you with a QR code to open your project on your mobile device. Or you can register in the mobile application and expo cli, and it will automatically show the current developments in the mobile application.



To enter expo on your computer use this command:

 expo login
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Install react-navigation

So that we can switch from one screen to another, we need to download react-nativation:

 yarn add react-nativation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Development start

Now let's start our development.



The first thing we will do is open App.js (our main file).

Layout

To make our application look attractive, we will add a couple of elements and add styles to them.



First, add the header:

 render() { return ( <SafeAreaView style={styles.MainContainer}> <ScrollView > <Text style={styles.textTitle}>:</Text> </ScrollView> </SafeAreaView> ); } const styles = StyleSheet.create({ textTitle :{fontSize:22,fontFamily: 'Roboto-M',fontWeight:'700', padding:10}, });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Now let's add a block with the output of articles and style it.

 import * as React from 'react'; import { View, Text, SafeAreaView, StyleSheet, Image, Dimensions, ScrollView } from 'react-native'; import Icon from 'react-native-vector-icons/Ionicons' export default class App extends React.Component { constructor(props) { super(props); this.state = { isLoading: true, fontLoaded: false } } async componentDidMount() { return fetch('http://rapprogtrain.com/server-side/test.php') .then((response) => response.json()) .then((responseJson) => { this.setState({ isLoading: false, dataSource: responseJson }, function() { // In this block you can do something with new state. }); }) .catch((error) => { console.error(error); }); } FlatListItemSeparator = () => { return ( <View /> ); } render() { return ( <SafeAreaView style={styles.MainContainer}> <ScrollView > <Text style={styles.textTitle}>:</Text> <View style={styles.postContainer}> <Image source = {{ uri: "https://tinyjpg.com/images/social/website.jpg" }} style={{resizeMode:'cover',width:null,height:null, flex:1, borderRadius:4, borderWidth:1, borderColor:'#dddddd'}} /> <Text style={styles.textOfArticle} > Lorem Ipsum is simply dummy text of the printing and typesetting industry. </Text> <View style={{marginTop:10, flexDirection: 'row', justifyContent: 'space-between'}}> <Text style={{color:'#727272',fontSize:13}}>Lorem</Text> <View style={{flexDirection: 'row'}}> <Icon name="ios-eye" size={18} style={{color:'#727272', marginRight:3}} /> <Text style={{color:'#727272',fontSize:13}}>22</Text> </View> </View> </View> </ScrollView> </SafeAreaView> ); } } const styles = StyleSheet.create({ MainContainer :{ // Setting up View inside content in Vertically center. justifyContent: 'center', flex:1 }, textTitle :{fontSize:22,fontFamily: 'Roboto-M',fontWeight:'700', padding:10}, textOfArticle:{ marginTop:7, fontSize:16, fontFamily: 'Roboto-M' }, postContainer :{ width: Dimensions.get('window').width, height:250, paddingBottom:10, padding:10 }, });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

At this our lesson ends.



In the next lesson, we will output the mysql data.



If you are interested in how it works, go and download this application, there will be a tab with news - a mobile application



My website is http://rapprogtrain.com



I vk and twitter