React Native Pitfalls – Anton Kulyk – Medium

React Native Pitfalls  #reactnative #react #reactjs #reactjs

  • React Native PitfallsThere are a lot of collections of anti-patterns for React and different app’s state managers like Redux and MobX (e.g. react-bits), but I haven’t seen a lot of advises for React Native developers.
  • You can create bridges between JavaScript and native modules, enable messaging between two sides of an app, create your own components.
  • Sometimes just a few lines of native code can save you from dozens of unneeded JavaScript.Do not estimate Android iOS equallyPersonally I spend much more time on configuring iOS apps.
  • Your apps are native and that’s awesome, but Android and iOS are different platforms, with different guidelines and components.
  • So develop and test both versions in parallel.Test on a device from the day oneEmulators are nice, but use devices, especially on Android because of variety of screen sizes, OS versions is use, etc.It won’t be iOS/Android only storySometimes people pick React Native for developing an app only for one platform (yep, seriously).

There are a lot of collections of anti-patterns for React and different app’s state managers like Redux and MobX (e.g. react-bits), but I haven’t seen a lot of advises for React Native developers. In…
Continue reading “React Native Pitfalls – Anton Kulyk – Medium”

How to Scan Fingerprints with Async PHP and React Native — SitePoint

How to Scan Fingerprints with Async PHP and #reactnative  #reactjs

  • Our composer.json file could look something like:
    {
    “scripts”: {
    “dev”: “vendor/bin/aerys -d -c loader.php”,
    “prod”: “vendor/bin/aerys -c loader.php”
    },
    “require”: {
    “amphp/aerys”: “dev-amp_v2”,
    “pre/kitchen-sink”: “^0.1.0”
    },
    “autoload”: {
    “psr-4”: {
    “App\\”: “app”
    }
    },
    “config”: {
    “process-timeout”: 0
    },
    “minimum-stability”: “dev”,
    “prefer-stable”: true
    }

    This is from composer.json in the server project

    We can also set up a placeholder for requesting scans, along with an HTTP GET route to get to it:
    namespace App\Action;

    use Aerys\Request;
    use Aerys\Response;

    class ScanAction
    {
    public function __invoke(Request $request, Response $response)
    {
    $response-end(“requesting a scan…”);
    }
    }

    This is from app/Action/ScanAction.

  • pre in the server project

    use Aerys\Router;
    use App\Action\ScanAction;

    return (Router $router) = {
    $router-route(
    “GET”, “/scan”, new ScanAction
    );
    };

    This is from routes/web.

  • pre in the server project

    And we can start the server up with a server config file and pre-processor loader script:
    $port = 8080;

    $host = new $port);

    $host-use($router = Aerys\router());

    $web = process ‘http://127.0.0.1:{$port}’ | pbcopy”);

    This is from config.pre in the server project

    return Pre\processAndRequire(__DIR__ . “

  • Let’s add web sockets to our server:
    namespace App\Socket;

    use Aerys\Request;
    use Aerys\Response;
    use Aerys\Websocket;
    use Aerys\Websocket\Endpoint;
    use FingerprintSocket implements Websocket
    {
    private $endpoint;
    private $connections = [];

    public function onStart(Endpoint $endpoint)
    {
    $this-endpoint = $endpoint;
    }

    public function onHandshake(Request $request,
    Response $response)
    {
    // $origin = $request-getHeader(“origin”);
    //
    // if ($origin !

  • == “http://127.0.0.1:8080”) {
    // $response-setStatus(403);
    // $response-end(“origin not allowed”);
    // return null;
    // }

    $info = return $info[“client_addr”];
    }

    public function onOpen(int $clientId, $address)
    {
    $this-connections[$clientId] = $address;
    }

    public function onData(int $clientId, Message $message)
    {
    $body = yield $message;

    yield $this-endpoint-send(
    $payload, $clientId
    );
    }

    public function onClose(int $clientId,
    int $code, string $reason)
    {
    }

    public function onStop()
    {
    // nothing to see here…
    }
    }

    This is from in the server project

    use Aerys\Router;
    use App\Action\ScanAction;
    use (Router $router) = {
    $router-route(
    “GET”, “/scan”, new ScanAction
    );

    $router-route(
    “GET”, “/ws”, Aerys\websocket(new FingerprintSocket)
    );
    };

    This is from routes/web.

In this comprehensive and advanced tutorial, Chris shows us how to scan fingerprints with Async PHP and React Native. The future is here!
Continue reading “How to Scan Fingerprints with Async PHP and React Native — SitePoint”

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”

Putting the “Native” in React Native

Putting the

  • Thankfully, getting the system volume is not difficult in iOS or Android, so it makes a perfect example of a simple native module.
  • This post will walk through making a native module for iOS, for Android, and the JavaScript code we can use in our app to call our new modules.
  • In our React Native module, we have a bit of a special case: we need only define the module in our header file as each method we want to expose is done so via the macro in the implementation file only.
  • Just as we did with the iOS module, we can add a method to our module that will get the system’s volume (see this commit in our example code).
  • We’ll need to use the to get the system volume, so add a couple imports to :

    And add an instance variable set in the constructor:

    Adding the actual method looks similar to the iOS version:

    One final improvement we can do is refactor our use of into its own JavaScript module, (see this commit in our example code):

    Then, we can get the volume using:

    A benefit of this refactoring is that if we want to perform different native code depending on the platform, we can isolate those code branches to their own (testable!)

A guide to writing native modules in a React Native application.
Continue reading “Putting the “Native” in React Native”

What we learned after using React Native for a year

  • We had faced some performance issues while using these APIs.
  • If we want to push an update after fixing a bug, we usually have to wait for 3 to 4 days to send a fix to the users.
  • If your use case is simple, Then you don’t have to touch any of the native code.
  • React Native community is slowly moving many animations to native, and the performance is much better than before.
  • Many people were asking me which one to choose Native script or React Native.

At Witworks we have been developing the Blink smartwatch, which runs on a customised version of Android called Marvin. We have also been building companion.
Continue reading “What we learned after using React Native for a year”

What I learned from building my first React Native App

What I learned from creating my first #reactNative app  #react #es6 #javascript #appdev

  • I’ll talk about my experiences now after having created a full app with React Native and show some of the obstacles I encountered along the way with their solutions.
  • For my app I needed a lot of components that don’t immediately ship with React Native.
  • I had a state tree that contained deeply nested objects , but it was annoying to change the state tree, because you cannot simply mutate the state.
  • I used local notifications for the rest timer in my app, as these work even when the app is not in the foreground or when the device is sleeping.
  • When a lot of components are mounted and pushed onto the route stack, every single component that is connected to the store calls their selectors when a state update occurs, even the ones that are not being rendered right now.

I recently released my first app on Android built with React Native. It’s a fully fledged workout log for the PHUL fitness program including customizing workouts and exercises, a rest timer, a calendar, progress charts, etc. You can see the full feature list and check out the app PHUL Workout Log on the Google Play Store. I don’t own a Mac so it’s only available on Android for now.

Continue reading “What I learned from building my first React Native App”

Building a Media Player in React Native by Mike Grabowski

  • Start a Meetup Group Start a Meetup Group
  • Building a Media Player in React Native by Mike Grabowski
  • Building a Fully-Fledged Media Player in React Native At Callstack.io, we have been working on the media player for one of our clients on both iOS and Android and decided to do it in React Native.
  • In the talk, we will check how all the above can be added to React Native with native modules while still being 100% reusable and easy to maintain.
  • Mike’s React pedigree is high-quality.

Visiting from Poland, Mike Grabowski (@grabbou) and Anna Lankauf (@annalankauf) are touring California, stopping at meetups along the coast: San Francisco, Los Angeles, and now San Diego!
Mike's
Continue reading “Building a Media Player in React Native by Mike Grabowski”