Web support for create-react-native-app – Ron Arts – Medium

  • Web support for create-react-native-appReact Native so far did not really fulfil its promise of write once, render everywhere.
  • The way web support works is by adding some babel-plugins, that replace all instances of import … from ‘react-native’ with import … from ‘react-native-web’ and do the same for ‘expo’ .
  • It’s for a slightly older version of the web support, but it’s very close.
  • Demo AppThe demo app shows an example of how a React Native app can be integrated with a website with 100% code sharing.
  • Use the –with-web-support flag, and specify this alpha version of react-native-scripts : – npm install -g myapp –with-web-support \ – –scripts-version 1.2.0-alpha.4 – … – cd myapp – yarn webThis will show the following screen: – Yay!

React Native so far did not really fulfil its promise of write once, render everywhere. Yes, it works that way for iOS and Android, and there are initiatives for Web, Windows, and MacOS, but there is…
Continue reading “Web support for create-react-native-app – Ron Arts – Medium”

Build a simple video streaming app with OpenTok & React Native –

Build a simple video streaming app with OpenTok & React Native

  • This time we came up with an experiment to build simple mobile application that allow user to live stream their mobile camera using OpenTok and React Native.
  • OpenTok is video platform tool from TokBox community to easily integrate high-quality video,audio streaming with your web or mobile apps.
  • Once you ready with your OpenTok account registration process, you can create a new project for your react native mobile app.
  • Let’s see the steps required to integrate an OpenTok session within React Native app for both Android and iOS – – This plugin is build by integrating native ’s with Javascript.
  • Subscriber component is allow user to join with specified live stream using Session id and Subscriber token like below, – – So the result, we ended up with simple cross-platform mobile app that perform live streaming.

Challenges with React native app development is growing day by day. We are always ready to accept those challenges and make our development process enjoyable.
Continue reading “Build a simple video streaming app with OpenTok & React Native –”

PhotoEditor SDK + React Native – imgly

PhotoEditor SDK + React Native  #ios #photoeditor #photoediting #android #reactjs #reactjs

  • However, react-native-navigation is not required for embedding the PESDK into your React Native application.Launching the PhotoEditor SDK from React NativeTo successfully launch our editor from React Native we needed to do three things:Add the PESDK library to our iOS project.Create a native module that bridges between React Native and the PhotoEditor SDK.Add a method to create a ToolbarController, push a PhotoEditController and present them from the current view controller.Call the method, wherever we want to edit an image in our React Native codeThe first step was rather easy.
  • In the classes implementation we registered our module with React Native by calling RCT_EXPORT_MODULE(PESDK):In order to create a new photo editor view controller we needed to create a new ToolbarController and push a PhotoEditController that loads a sample image.
  • All image fetching, scrolling, etc. is handled by React Native, so we only needed to handle the user’s taps on an image:We used react-native-fs to download a larger resolution image to the local filesystem, pass the path of the local file to our present() call and modify our iOS native module:We then had a nice little app, that shows a grid of images, loads a high-resolution image upon selection and opens the PhotoEditor SDK:The iOS demo app running on a device.Android implementationAs we have seen, opening the PESDK from React Native can easily be done on iOS.
  • To accomplish this we needed to repeat some of the previous steps for Android:Add the PESDK to our Android project.Create a native module that bridges between React Native and the PESDK.Add a method to launch an ImglyIntent using the PhotoEditorBuilder from the current Activity.Installing the SDK is again done by following the instructions for integrating the PESDK and shouldn’t take more than a few minutes.
  • Creating a native module on Android is quite similar to iOS, although a little more setup code is required: We created our PESDKModule that recreates the present(path) method from iOS, a PESDKPackage containing our module and finally added the package to our Application:This time, we prepared the desired settings for our editor, added our image path and passed everything to a PhotoEditorBuilder.

Often our users ask whether it’s possible to use the PhotoEditor SDK for iOS and Android with React Native (the good news right away: Yes, it is possible and fairly easy as well). So, we set out to…
Continue reading “PhotoEditor SDK + React Native – imgly”

Just for Node.js & React.js Developers: A New Neo4j Movies Template

Just for #Nodejs & #Reactjs Developers: A New #Neo4j Movies Template

via @thesilverlogic

  • The Front-end: The front-end, in this case is built in React.js, consumes the data presented by the Express.js API and presents some views to the user, including the home page, a Movie detail page and a Person detail page.
  • If you run into problems, make sure your database is actually running and that you’ve entered your database credentials in the api/config.js file.
  • In the app, calls to the database are handled by /api/neo4j/dbUtils.js , described piece by piece below.
  • An array of genres appears at /genres .
  • npm install bower install gulp Over on http://localhost:4000/ , you should see the homepage of the movie app, displaying three featured movies and some members of the Action genre.

Discover this new movies template app designed just for JavaScript developers using Node.js, React.js or Express.js alongside the Neo4j graph database.
Continue reading “Just for Node.js & React.js Developers: A New Neo4j Movies Template”

Announcing Reactive Trader Cloud

  • Announcing Reactive Trader Cloud
  • Reactive Trader Cloud is a demo client-server FX trading application.
  • To launch Reactive Trader in our demo environment, click .
  • The backend is composed of a set of services which can be scaled, deployed and upgraded independently.
  • Instead of using HTTP, the client connects to the backend using Websockets and since we have a number of services, we decided to use a messaging gateway to act as a broker: this allows the client to establish a single connection to the backend and the broker is used to route messages to the correct service instance or to the correct client.

Read the full article, click here.

@AdaptiveLimited: “Reactive Trader Cloud released, #reactjs front-end, backend on #Kubernetes, all open source!”

In April 2014 we gave a talk at React Conf London on Reactive user interfaces and open-sourced Reactive Trader, a demo app we used to demonstrate the different concepts we highlighted in the talk. The talk was focused on UIs so we put most of our effort into the front-end and built a very simple monolithic backend to simulate the different flows and failure scenarios.

Announcing Reactive Trader Cloud