Noticias de hoy sábado, 24 de agosto de 2019, React Native - Portada

  • Khoa Pham
    How to dismiss keyboard with react-navigation in React Native apps

    Wed, 20 Feb 2019 13:12:29 GMT

    Showing and dismiss keyboard seems like a trivial thing to do in mobile apps, but it can be tricky in automatically dismissing it when it comes together with react-navigation and modal presentation. At least that’s according to my initial assumption. This article aims to detail what I have learned about keyboard handling and how to avoid extra tap when dealing with TextInput There will also be lots of code spelunking, thanks to the all the libraries being open source. The version of React Native I’m using at the time of writing is 0.57.5

    The built in TextInput component

    React Native comes with a bunch of basic components, one of them is the TextInput for inputting text into the app via a keyboard.

    import React, { Component } from 'react';
    import { AppRegistry, TextInput } from 'react-native';



    Autor/Fuente: Khoa Pham
  • Artem Dudinskyi
    Let’s write examples with Package by Feature approach on React Native

    Fri, 18 Jan 2019 21:34:37 GMT

    People tend to follow the code style and project structure which is presented to them in examples and later use it at work.

    Team work

    I see that almost all React Native examples have created with Package by Layer(PBL) approach. In PBL, the highest level packages reflect the various application “layers” like components, actions, reducers etc. It even applies to influent developers. For example you can check out these articles Todo app and Facebook Messenger clone which use it as the structure of choice.

    My goal is to motivate React Native Community writing examples with Package by Feature approach

    Let’s see what’s wrong with PBL from the practical point of view.




    Autor/Fuente: Artem Dudinskyi
  • Khoa Pham
    How to handle Background App Refresh with HealthKit in React Native

    Thu, 17 Jan 2019 22:43:01 GMT

    Source: Vietnam Travel Guide

    Table of Contents

    I enjoy React Native when it comes to UI and hot reloading, but there are also many simple things that becomes really hard in React Native. Mostly it is about dealing with native capability and React bridge. This article is about my journey from pulling hairs into gradually understanding native module with Background fetch and HealthKit in React Native for iOS.

    The app that I’m working with has HealthKit integration, that means querying for HealthKit data and accumulate them for other researches. One of the feature is to periodically send workout data in the background. There may be some libraries for this task, but I always prefer doing manually as the React Native wrapper should not be that heavy, and I have complete control over the execution. This article is about HealthKit, but the same idea should work for other background needs too.




    Autor/Fuente: Khoa Pham
  • Pritish Vaidya
    Building a Lightweight Speedometer in React Native

    Mon, 14 Jan 2019 00:23:07 GMT

    Photo by chuttersnap on Unsplash

    Introduction

    This article demonstrates the building of a simple and lightweight Speedometer implementation in React Native with minimal dependencies.

    • Basic Requirements
    • Default Props Overview
    • Utils
    • Integrating into the Component
    • Usage
    • Links

    The only external dependency required is the prop-types package for Type Checking or Prop Validation.




    Autor/Fuente: Pritish Vaidya
  • Juan Pablo Garcia
    Passwordless Authentication in React Native Using Facebook Account Kit (Part 3)

    Thu, 01 Nov 2018 18:16:01 GMT

    Consuming secure resources from React Native

    In this article we will integrate the basic example that we began in Part 1 with the services that we created in Part 2 of this series.

    You can find the complete code for this example on the Github repository. You can also see the code we wrote for Part 1.

    Introduction




    Autor/Fuente: Juan Pablo Garcia
  • Juan Pablo Garcia
    Passwordless Authentication in React Native Using Facebook Account Kit (Part 2)

    Thu, 01 Nov 2018 18:15:15 GMT

    Accessing secure resources with JSON Web Tokens

    In this article we will create the services that we described on the introductory Part 1, to be ultimately used on Part 3 of this series.

    Introduction

    We will create a simple API with two services:




    Autor/Fuente: Juan Pablo Garcia
  • Juan Pablo Garcia
    Passwordless Authentication in React Native Using Facebook Account Kit (Part 1)

    Thu, 01 Nov 2018 18:14:50 GMT

    Integrating React Native Facebook Account Kit

    One of the first features you must develop when building an app is a simple and seamless login and sign up flow in which users don’t need to remember complicated passwords.

    A very interesting option for this is Facebook’s Account Kit, which provides a validation process of phone numbers through SMS, for free.

    Account Kit lets people quickly register for and login to your app by using just their phone number or email address — no password needed. It’s reliable, easy to use and gives you a choice about how you sign up for apps.



    Autor/Fuente: Juan Pablo Garcia
  • Adhithi Ravichandran
    Securing your React Native App using Keychain

    Mon, 05 Nov 2018 15:36:01 GMT

    Security is of paramount importance for your mobile application. Learn about securing your React Native app by using Keychains

    Securing your mobile application is crucial when dealing with passwords, touch ids, account names, credit card information and so on.

    In my previous post, we saw how to integrate touch id and face id to your app. When storing user passwords, biometric information, and other sensitive information at login, you will have to store them in a secure keychain. The react-native-keychain library provides keychain/keystore access to your React Native application, making your application secure.

    Installation




    Autor/Fuente: Adhithi Ravichandran
  • Reginald Johnson
    Sharing Code Between React Web and React Native Applications

    Sun, 21 Oct 2018 13:57:58 GMT

    Using Render Props to Share Logic Across Platforms in React

    Introduction

    It can be desirable for a consumer facing product to exist on the web as well as on mobile. For example, many food delivery applications exist as both web and mobile applications.

    These applications may even share significant functionality. In the before mentioned example, both the web and the mobile applications would let you place a food order. In fact, they may both perform the same business logic of gathering the order data and sending it to the same backend servers for processing. On the other hand, the two platforms may do some things differently. For example, the mobile application might request the user’s location using a platform specific API, while the web app would use the HTML5 Geolocation API.

    Also, lets not miss the forest for the trees here. Occasionally using different APIs to accomplish the same functionality isn’t even the primary difference between the platforms. UI presentation and the flow of the UX are a very significant difference.




    Autor/Fuente: Reginald Johnson
  • Khoa Pham
    React Native Bridging — How to Make Linear Gradient View

    Thu, 18 Oct 2018 12:06:31 GMT

    React Native Bridging — How to Make Linear Gradient View

    React Native lets us build mobile apps using only Javascript. It works by providing a common interface that talks to native iOS and Android components. There are enough essentials components to get started, but the cooler thing is that it is easy to build our own, hence we are not limited by React Native. In this post we will implement a linear gradient view, which is not supported by default in React Native, using native UI component, particularly CAGradientLayer in iOS and GradientDrawable in Android.

    In Javascript there are hundreds of libraries for a single problem and you should check if you really need it or not. A search on Google for linear gradient shows a bunch of libraries, like react-native-linear-gradient. The less dependencies the better. Linear gradient is in fact very easy to build and we probably don’t need to add extra dependencies. Also integrating and following updates with 3rd libraries are painful, I would avoid that as much as possible.




    Autor/Fuente: Khoa Pham