{"id":639,"date":"2018-11-19T09:58:04","date_gmt":"2018-11-19T14:58:04","guid":{"rendered":"http:\/\/salzlechner.com\/dev\/?p=639"},"modified":"2018-11-19T09:58:04","modified_gmt":"2018-11-19T14:58:04","slug":"dataflex-and-native-mobile-applications-react-native","status":"publish","type":"post","link":"http:\/\/salzlechner.com\/dev\/2018\/11\/19\/dataflex-and-native-mobile-applications-react-native\/","title":{"rendered":"DataFlex and Native Mobile Applications \u2013 React Native"},"content":{"rendered":"

Another post on native applications will cover building a simple native mobile application using React Native.<\/p>\n

What is React Native?<\/p>\n

React Native is a JavaScript framework that allows you to write native mobile applications for iOS and Android. It is based on React ,\u00a0Facebook’s\u00a0 JavaScript library for web applications.<\/p>\n

In the example using React Native we will be creating the same application we created using Xamarin. A simple list showing customer records from the DataFlex WebApp Order Entry workspace.<\/p>\n

To get started with React Native we need to install the NPM package manager (or your favorite package manager). You can find NPM over at\u00a0https:\/\/www.npmjs.com\/<\/a><\/p>\n

For this example we will also utilize expo. Expo is an open source toolchain that makes building Android and iOS apps under React Native very easy.<\/p>\n

to install expo enter the following command line to install using NPM<\/p>\n

npm install -g expo-cli<\/pre>\n
this will install the expo toolchain globally on your computer so it is available to initialize projects<\/p>\n
the next step is to initialize your application. We will use expo to do that and this will create a folder for your application so in a command shell navigate to the folder you want to create your application in and enter the following.<\/p>\n
The first line will create a folder called DataFlexAndReact and then initialize the project. Then we simply navigate to that folder and start the development server.<\/p>\n
expo init DataFlexAndReact\r\n\r\ncd\u00a0DataFlexAndReact\r\nnpm start<\/pre>\n
Now lets look at a simple HelloWorld React project<\/p>\n
import React, { Component } from 'react';\r\nimport { Text, View } from 'react-native';\r\n\r\nexport default class DataFlexAndReact extends Component {\r\n  render() {\r\n    return (\r\n      <View>\r\n        <Text>Hello world!<\/Text>\r\n      <\/View>\r\n    );\r\n  }\r\n}\r\n<\/pre>\n
Running this will obviously show the text Hello world!.<\/p>\n
Now we want to modify this program to show a list of customers and then fill the list with data from our web service<\/p>\n
first we add some state information to our project. We do this by adding some property settings in the constructor<\/p>\n
export default class DataFlexAndReact extends Component {\r\n\r\n  constructor(props){\r\n    super(props);\r\n    this.state ={ isLoading: true}\r\n  }\r\n\r\n  ..\r\n\r\n}<\/pre>\n
then we need to call the web service and get the list of customers.<\/p>\n
We do this by hooking into componentDidMount<\/p>\n
  componentDidMount(){\r\n    return fetch('http:\/\/youripgoeshere\/WebOrder_19_1\/CustomerAndOrderInfo.wso\/GetCustomerInfoList\/JSON')\r\n      .then((response) => response.json())\r\n      .then((responseJson) => {\r\n\r\n        this.setState({\r\n          isLoading: false,\r\n          dataSource: responseJson,\r\n        }, function(){\r\n\r\n        });\r\n\r\n      })\r\n      .catch((error) =>{\r\n        console.error(error);\r\n      });\r\n  }<\/pre>\n
we use the fetch method to call the web service to return the json data. When the data is received we save the data in our state object.<\/p>\n
now lets add some code to the render function to render a flatlist in our view<\/p>\n
first we need to add some imports at the top as follows<\/p>\n
import { FlatList, StyleSheet, ActivityIndicator, Text, View  } from 'react-native';<\/pre>\n
then we modify the render function as follows<\/p>\n
    render() {\r\n    return (\r\n      <View style={styles.container} >\r\n        <Text style={styles.h2text}>\r\n          Customers\r\n        <\/Text>\r\n          <FlatList\r\n          data={this.state.dataSource}\r\n          showsVerticalScrollIndicator={false}\r\n          renderItem={({item}) =>\r\n          <View style={styles.flatview}>\r\n            <Text style={styles.name}>{item.sName}<\/Text>\r\n            <Text style={styles.email}>{item.sCustAddress}<\/Text>\r\n          <\/View>\r\n          }\r\n          keyExtractor={item => item.iCustNumber.toString()}\r\n        \/>\r\n      <\/View>\r\n    );\r\n  }<\/pre>\n
we show the text Customers as a header\u00a0 and then create a FlatList using the data from our state information.<\/p>\n
The renderItem function renders each list item by showing the customer name and address. To satisfy the flatlist we also need to add a unique identifier for each item which will be the customer number as a string.<\/p>\n
Saving the changes will automatically build the updated application. Lets take a look at the application running on an Android phone<\/p>\n
\"\"<\/p>\n\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\t
<\/div>\n\t\t<\/div> \n\t\t
\n\t\t\tMichael Salzlechner is the CEO of StarZen Technologies, Inc.<\/p>\n
He was part of the Windows Team at Data Access Worldwide that created the DataFlex for Windows Product before joining\u00a0StarZen Technologies<\/a>. StarZen Technologies provides consulting services as well as custom Application development and third party products specifically for DataFlex developers<\/p>\n\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n","protected":false},"excerpt":{"rendered":"
Another post on native applications will cover building a simple native mobile application using React Native. What is React Native? React Native is a JavaScript framework that allows you to write native mobile applications for iOS and Android. It is based on React ,\u00a0Facebook’s\u00a0 JavaScript library for web applications. In the example using React Native […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","ngg_post_thumbnail":0,"footnotes":""},"categories":[6,27,40],"tags":[],"class_list":["post-639","post","type-post","status-publish","format-standard","hentry","category-dataflex","category-dataflex-webapp","category-react-native"],"_links":{"self":[{"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/639","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/comments?post=639"}],"version-history":[{"count":1,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/639\/revisions"}],"predecessor-version":[{"id":642,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/639\/revisions\/642"}],"wp:attachment":[{"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/media?parent=639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/categories?post=639"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/tags?post=639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}