Building a mobile app in Rust and React Native, Part 1: Project Setup

Building a mobile app in Rust and React Native, Part 1: Project Setup

  • Building a mobile app in Rust and React Native, Part 1: Project SetupThe first post in series ‘building a mobile app in Rust and React Native’.
  • In this series I will describe process of connecting mobile front-end written in React Native with business logic written in Rust.As an introduction to this article, I suggest reading a great series from John Gallagher: Building an iOS App in Rust, Part 1: Getting Started with RustThe app we are building is a mobile wallet for ethereum cryptocurrency.
  • Required toolsnode.js (tested on v7.4.0)npm (tested on 5.2.0)rustup (tested on rustup 1.0.0 (17b6d21 2016-12-15))rustc (tested on 1.19.0 (0ade33941 2017–07–17))cargo (tested on cargo 0.20.0 (a60d185c8 2017–07–13))android_ndk (tested on r13b)Xcode (only, for iOS, tested on Version 8.1 (8B62))$NDK_HOME envarionment variable set to ndk home directory (eg.
  • # iosrustup target add i386-apple-iosrustup target add x86_64-apple-iosrustup target add armv7-apple-iosrustup target add armv7s-apple-iosrustup target add aarch64-apple-ios# androidrustup target add aarch64-linux-androidrustup target add armv7-linux-androideabirustup target add i686-linux-androidNow, let’s create a new project.react-native init our_projectNext, create rust subdirectory, enter it and runcargo new our_projectAfter those steps, the project directory should look like /our_project /Cargo.toml /srcNext, let’s setup makefile the project and place it inside our_project dir.ARCHS_IOS = i386-apple-ios x86_64-apple-ios armv7-apple-ios armv7s-apple-ios aarch64-apple-iosARCHS_ANDROID = aarch64-linux-android armv7-linux-androideabi ios androidios: $(LIB)android: $(ARCHS_ANDROID) sh copy_android.
  • sh.PHONY: $(ARCHS_IOS)$(ARCHS_IOS): %: cargo build –target $@ –release.PHONY: %: cargo build –target $@ –release$(LIB): $(ARCHS_IOS) lipo -create -output $@ $(foreach arch,$(ARCHS_IOS),$(wildcard is a shell script that copies our statically compiled libraries to jniLibs directory.

In this series I will describe process of connecting mobile front-end written in React Native with business logic written in Rust. As an introduction to this article, I suggest reading a great series…
Continue reading “Building a mobile app in Rust and React Native, Part 1: Project Setup”

Learning React and React-Native – Jorge Rubiano – Medium

Learning React and React-Native  #react #learning #reactnative #reactjs #reactjs

  • Learning React and React-NativeExample APP React-nativeIn this article I want to show you about my learning experience using the technologies: “React” and “react-native”, in this moment I am not an expert in this topic, but I am convinced the best option for learning is to create something.Shots — Game ES6I heard about react in the past year (2016), in that year I followed the new technologies and standards in Javascript, learning about ES6, how to configure a basic environment with npm scripts, in this case I used this environment to develop simple games with ES6 and use new technologies such as Service WorkerI decided to start learn react, At first to me was complicated because I had never used webpack, the majority of tutorials I followed need configure this tool initially.Fortunately in this year emerged create-react-app, with this module is very easy to start a project with react, this module configure the environment for you.With create-react-app developed my first “Hello World”, the process was very easy, even the browser makes automatic updates, I think this is “Awesome”.
  • I read articles and saw videos about react, later I decided search a course, It called my attention “react for beginners” by Wes Bos, I learned other topics in courses the Wes Bos for example Flexbox, then I decided to take that course (React for Beginners).
  • Example Project course.The project we develop in this course is called “Catch of the day”, we not only learned about react but also firebase, in this course I understood about the JSX, state, props, components, routing, fetch data and other topics.For me this course is a good introduction to learn react, in this course we not use redux or other libraries to manage the state.Personally I liked React because I use ES6 in the process, for example .
  • reducer, arrow functions and other features , I know there are other fantastic frameworks for example AngularJS/Angular or libraries such as VueJS, At this moment for my work React is the perfect tool.

In this article I want to show you about my learning experience using the technologies: “React” and “react-native”, in this moment I am not an expert in this topic, but I am convinced the best option…
Continue reading “Learning React and React-Native – Jorge Rubiano – Medium”

Getting started with TypeScript and React

Get started with #TypeScript and #ReactJS:  #JavaScript

  • Today I’ll show you how I’ve set up a TypeScript project from scratch that uses React, and Webpack for managing the build process.
  • This turns on a few different settings, the most notable of which are and :

    Often when you want to add TypeScript to an existing project TypeScript makes it easy by not throwing an error when you don’t declare the types of variables.

  • If you run Webpack now against this code you’ll see some errors:

    This happens because TypeScript is trying to figure out the type of React, and what it exports, and is trying to do the same for React DOM.

  • I created the file , and added the following code that creates the module and defines its default export as a React component:

    I first create a TypeScript interface for the properties that the component takes, and then the line declares that the component is the object exported by the module.

  • The object tells Jest to run any TypeScript files through the ts-jest preprocessor, which runs them through the TypeScript compiler and produces JavaScript that Jest can consume.

I’ve recently been getting into TypeScript following a lot of positive blogs about it from Tom Dale and others. Today I’ll show you how I’ve set up a TypeScript project from scratch that uses React, and Webpack for managing the build process. I’ll also discuss my initial impressions of TypeScript and in particular working with TypeScript and ReactJS.
Continue reading “Getting started with TypeScript and React”

week 6 – Carolina de la Fuente – Medium

week 6  #javascript #react #reactjs

  • week 6Since the last time I had time to think, I remember thinking “wow, I know so much more than I did the first week here!”
  • I am entering week 6 and I feel very comfortable creating a new project, styling a simple web app and even give it some functionalities on React.Basically, the moment I realized that I’m actually absorbing and learning was when I found myself explaining state and props to someone.
  • I thought it was ten times harder than vanilla JavaScript.
  • I finally understand what I was writing.We have four more weeks of lecture and I wish it were more because at this rate, four weeks will go by too quickly.
  • I want to dive deeper into JavaScript and React but there are still simple tasks I can’t get to work on my own without giving up from frustration.

Since the last time I had time to think, I remember thinking “wow, I know so much more than I did the first week here!” Now, I’m self-reflecting again and I’m feeling that feeling but doubled the…
Continue reading “week 6 – Carolina de la Fuente – Medium”

Use create-react-native-app to Set Up a Simple React Native App

  • React Native requires a lot of initial set up to get an app going.
  • After creating the project we will run the development server which will print a QR code on the terminal.
  • We will install the app called on our mobile phone and use it to scan the QR code.
  • This will load our app on our mobile phone in development mode.
  • When make adjustments to our project the changes will be reflected on our phone.

React Native requires a lot of initial set up to get an app going. In this lesson, we will use create-react-native-app to do this initial setup for us. We will install create-react-native-app globally and create a new project.
After creating the project we will run the development server which will print a QR code on the terminal. We will install the app called Expo Client on our mobile phone and use it to scan the QR code.
This will load our app on our mobile phone in development mode. When make adjustments to our project the changes will be reflected on our phone. If we use console.log the messages will be printed in our terminal.
Download the Expo Client from App Store (https://itunes.apple.com/app/apple-store/id982107779?pt=17102800&ct=www&mt=8) or Google Play (https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=www)

Continue reading “Use create-react-native-app to Set Up a Simple React Native App”

React Native Animations Using the Animated API – React Native Training – Medium

#ReactNative Animations Using the Animated #API:  by @dabit3 #JavaScript #iOS #Android

  • We render a main View with three Animated.
  • Is the final code for this animation with a working example.
  • If the animation is done because it finished running normally, the completion callback will be invoked with {finished: true}, but if the animation is done because stop was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive {finished: false}.
  • In the animate method, we set the values of all three animated values back to zero.
  • Animated.sequence() – Starts an array of animations in order, waiting for each to complete before starting the next.

We will be covering Animated.timing() and Animated.spring() as they are the most useful in my experience. Along with these three Animated methods, there are three ways to call these animations along…
Continue reading “React Native Animations Using the Animated API – React Native Training – Medium”

Choosing Ember over React in 2016 – Two-Factor Everything

  • The post is about why, when Clef was deciding whether to use React or Ember to build Instant 2FA, we went with Ember.
  • Ember F astBoot enables server side rendering in any Ember app with one command.
  • Because of the way Ember enforces conventions, these addons almost always work out of the box.
  • One of the goals of Ember is to give the developer the best experience currently available without having them do any work (or as little as possible) .
  • We haven’t had to do (2) but it seems much simpler in Ember with Ember addons.

One month ago, we started working on a new product: Instant 2FA, the easiest way to add two-factor authentication to any site in less than an hour. Currently, whether you roll your own two-factor…
Continue reading “Choosing Ember over React in 2016 – Two-Factor Everything”