A Year of React Native: SSL Pinning – Made by Many

Notes on #ReactNative: on SSL pinning by @samueljmurray

  • When your app initiates this communication, your backend sends its certificate (which contains the public key).
  • Your app then checks that the certificate has been signed by a Certificate Authority (CA) that is trusted by the user’s device.
  • SSL pinning narrows these avenues of attack by letting you define the exact certificate or public key that your app will accept when communicating with your backend.
  • If you use a service like AWS Certificate Manager or Let’s Encrypt your certificate and public key could change at any time.
  • TrustKit also comes with a handy tool for extracting public keys from certificates and converting them to Base64 encoded SHA256 hashes.

We’ve been using React Native for over a year now and we’re loving how quickly we can create feature-rich and performant apps for iOS and Android. So far w…
Continue reading “A Year of React Native: SSL Pinning – Made by Many”

Building an app: React Native vs Ionic – Hacker Noon

Building an app: React Native vs #Ionic  #ReactJS #JavaScript

  • In this article, we are going to make a comparison of two frameworks, React Native and Ionic, based on our real time experience in frontend development.When developing various products, either for ourselves or for the clients, there has always been a question that interested us: how can we narrow down time and cost of product development.Android and especially iOS developers have always been valued greatly and cost a lot, and when developing for two platforms one has to spend twice as much money.At some point we were experimenting with Cordova, but it didn’t feel as if we can get something valuable out of it.Then we noticed Ionic.
  • Now we would like to give you detailed frameworks comparison and explain you why React Native is better solution for our developers.We were always trying to get more expertise on different technologies and use them in practice in order to define the best solution.
  • We also kept on watching Ioinc2, which was supposed to become an innovation that would solve many issues that we had while working with Ionic1.The approaches of given frameworks are very different but for us React Native is an ultimate winner.We chose main React Native advantages that are superior in relation to Ionic1/2:Response time that could be compared to native apps.Ability to reuse the code parts (not all code) for desktop (web apps) and mobile (mobile apps) and even for the server.
  • (:-))Incredibly convenient toolchain for developers that allows to quickly develop and debug the app.Big amount of elaborated components from Facebook.Even bigger amount of components from community.Ability to realize the ideas of functional programming in development which ensures great stability and reliability of the app and relative scaling simplicity.However, we don’t make a point here that React Native is 100% perfect.
  • We also chose some of React Native disadvantages in comparison with Native Apps:Those code parts that are linked to work with hardware solutions, camera, external libraries integration, etc are still done in Native parts.The interface between javascript and native part is not so simple (but not more complicated than cordova).

When you start to use new technology, you cannot be sure it will be the best solution. In this article, we are going to make a comparison of two frameworks, React Native and Ionic, based on our real t
Continue reading “Building an app: React Native vs Ionic – Hacker Noon”

Build a React Native Todo Application

Build a React Native Todo Application course by @browniefed #react

  • In this course we’ll explore getting started with a basic React Native application on both iOS and Android.
  • We’ll learn about using React Native components, how to build custom components, how to layout an application using Flexbox, and how to style components.
  • We’ll also focus on how to use state to control components, how to persist information across application reloads with AsyncStorage, and how to inline edit in a ListView.
  • The ultimate goal is to gain an understanding of how to get started building simple React Native applications.

In this course we’ll explore getting started with a basic React Native application on both iOS and Android. We’ll learn about using React Native components, how to build custom components, how to layout an application using Flexbox, and how to style components.

We’ll also focus on how to use state to control components, how to persist information across application reloads with AsyncStorage, and how to inline edit in a ListView.

The ultimate goal is to gain an understanding of how to get started building simple React Native applications.

Continue reading “Build a React Native Todo Application”

How to Add a Splash Screen to a React Native App (iOS and Android)

How to add a splash screen to a React Native app (#iOS and #Android):  #ReactJS #JavaScript

  • How to Add a Splash Screen to a React Native App (iOS and Android)I’m often asked about that last mile of developing a React Native app (actually getting it into the app store).
  • There’s more to it than just building your app and sending it off to Apple/Google — you’ve got to add icons, splash screens, write descriptions, and more before sending it off for review.In this tutorial we’ll be working in the platform IDEs and writing a bit of native code.
  • The Phonegap repo has a guide on the various size splash screens your app should include but in this tutorial we’ll use Image Gorilla by Ape Tools to generate all the necessary sizes for our splash screen (as well as icons, but we won’t use those in this tutorial).
  • Once Image Gorilla completes and you download and extract the zip file you’ll see multiple directories, we’re only interested in the Android and iOS ones.Adding Splash Screens (iOS)First open the project in Xcodeopen scroll down to “Launch Images Source” and click “Use Asset Catalog…”and press “Migrate” when prompted.
  • You might have to mess with it a bit to take care of all of them.If you run your application now you should see the new splash screen in use.Note: I had to delete the app from the simulator before re-building the app for the splash screen to work.Adding Splash Screens (Android)Much of these instructions are pull from this article.

I’m often asked about that last mile of developing a React Native app (actually getting it into the app store). There’s more to it than just building your app and sending it off to Apple/Google — you…
Continue reading “How to Add a Splash Screen to a React Native App (iOS and Android)”

Introducing React Native support for Radar – On the Radar

Introducing React Native support for Radar:  #ReactJS #JavaScript

  • Introducing React Native support for RadarBy popular demand, we’re excited to introduce React Native support for Radar on iOS and Android.React Native is a framework from Facebook that lets you build mobile apps using only JavaScript.
  • It abstracts away cross-platform differences, much like Radar abstracts away cross-platform differences between location services on iOS and Android.Now it’s easier than ever to add location tracking and context to your React Native apps.
  • After you sign up for Radar, create geofences, and configure your projects, you can start tracking users and receiving events with just a few lines of code:If you’d like to learn more, see the documentation and source on GitHub or get the react-native-radar package on npm.Happy coding!

React Native is a framework from Facebook that lets you build mobile apps using only JavaScript. It abstracts away cross-platform differences, much like Radar abstracts away cross-platform…
Continue reading “Introducing React Native support for Radar – On the Radar”

Introducing Support for React Native

We're excited to announce that mParticle now supports @ReactNative on Android and iOS!:

  • We are excited to announce that mParticle now supports React Native on Android and iOS!
  • While a wide variety of SDKs are available for iOS and Android, many do not support React Native, so app developers need to write platform-specific code (which somewhat defeats React Native’s purpose).
  • In the same way that React Native abstracts the OS, allowing you to focus on the UI, mParticle abstracts the integrations, allowing you to focus on writing your app.
  • By leveraging the mature mParticle SDKs already available for iOS and Android, and the cross-platform capabilities of React Native, your app can have a single clean codebase connected to all the app services you need to run your business.
  • Like our other SDKs, the React Native module is open source and hosted on GitHub:

With the React Native SDK, learn how your app can have a single clean codebase connected to all the app services you need to run your business.
Continue reading “Introducing Support for React Native”

Add a custom font to your React Native app

Add a custom font to your React Native app  by @Guitoof

  • Your React Native application needs a custom font to be the prettiest ?
  • In order to add your font to your app, you’ll need the files for all supported styles (bold, italic …)

    You can, for instance, get your font from Google Fonts.

  • Add the font folder into your project :

    Add the rnpm link to your font in your project’s :

    In the folder where your font was copied, rename the files so that:

    You can find a step by step example in this rn-custom-font repo.

  • I have been unable to figure out why there seems to be no difference between the Light, the ExtraLight and Light fonts on iOS on the one hand and no differences between ExtraLight, Light, Regular andSemiBold, Bold and Black on Android.
  • You can also add a custom font for your custom icons.

This article walk you through the few steps you need to do to add and use a custom font in your React Native app
Continue reading “Add a custom font to your React Native app”

What’s Happening with Navigation in React Native? – Revisify

What’s happening with navigation in React Native?  #JavaScript #ReactJS

  • What’s Happening with Navigation in React Native?There’s something nice about the background image…When I began learning React Native the docs and developers said that to handle navigation between scenes in your app you should use Navigator and a depreciated component, NavigatorIOS, was no longer recommended.
  • After seeing a post on the React Native subreddit and then doing some digging, I found out that Navigator and NavigationExperimental will be depreciated in favour of one last library React-Navigation.
  • It’s all a bit of a mess but I will clear everything up from what I’ve found while building my app.NavigatorIOSThe first solution to navigation in React Native was NavigatorIOS.
  • Like NavigatorIOS and Navigator, NavigationExperimental is being depreciated.React NavigationThe new recommended solution is React Navigation which hopes to overcome the issues of the previous solutions.
  • It also has support for deep linking.Navigation in React Native has been a mess, but the developers in the community are doing a great job at finalising a long-term solution with React Navigation.

When I began learning React Native the docs and developers said that to handle navigation between scenes in your app you should use Navigator and a depreciated component, NavigatorIOS, was no longer…
Continue reading “What’s Happening with Navigation in React Native? – Revisify”

Converting a React App to React Native – Gwendolyn Faraday – Medium

Converting a React App to React Native  #reactnative #react #reactjs

  • Converting a React App to React NativeI have been working on a lot of mobile projects lately — including Cordova, PhoneGap, React Native, some Ionic and Swift — but I have to say, React Native is by far the best experience in mobile development I have had so far.
  • It shares the same workflow as a React application for the web which is pretty easy to reason about and find where things are quickly.Now I am building an app to gamify recycling in Indiana.
  • Since the web app is in React, I figured it would be easier to build the Native version in iOS and Android at the same time using React Native.Here are some mockups to give you an idea.
  • (I changed the menu from the right side to the left side after this)Setting Up the React Native AppWhere React Native outdoes React is on it’s simple set up for apps.
  • That was pretty quick and easy —I just installed a few modules and wrote a minimal amount of code.List ViewsMost of the components I made I was able to copy from my web app and just update the UI.For this app, I have an ever-growing array of various characters that I wanted to display in a scrollable list on mobile.

I have been working on a lot of mobile projects lately — including Cordova, PhoneGap, React Native, some Ionic and Swift — but I have to say, React Native is by far the best experience in mobile…
Continue reading “Converting a React App to React Native – Gwendolyn Faraday – Medium”

Launching NativeBase 2.0 – Sanket Sahu – Medium

Launching NativeBase 2.0  #ios #mobileappdevelopment #android #react #reactnative #reactjs

  • Here is an example —SCSS like Theming of component using Shoutem’s Theme libraryEject the complete Stylesheet to modify almost anythingSince we have one single object which defines the entire style of NativeBase, you can eject it using CLI and modify every style attribute of any component.
  • More details can be found under the customization section of the docs.Three themes to start withNativeBase is packed with three preset themes.Platform: The default theme of NativeBase maps to the platform design where the app runs.Material: Sometimes, you need Material design on both the platforms.
  • This theme is not 100% material yet but it can be used today.Common Colors: Most of the brands use a common color scheme for both the platforms but they also follow platform specific icons, font and orientation of the components.
  • Unified IconsWe have mapped icons such that the same code leads to relevant icon on Android and iOS.For example: Icon name=”arrow-back” / maps to md-arrow-backon Android andios-arrow-back on iOS.And yes, we also have fallback options for the legacy support.Kitchen Sink App updated to v2.0We have showcased each and every component of NativeBase in a KitchenSink app.
  • We have a lot of components on our list to be added which includes unified ActionSheet, Swipeable ListItem, Slider Input, Carousel, Toasts, Animations and more complete support for Material Design.Web version coming soon: Port your mobile app for the web in no time.

I am excited to announce NativeBase 2.0. If you haven’t heard of NativeBase yet, it is a UI component library for React Native to build native cross-platform apps. NativeBase compiles to Native. The…
Continue reading “Launching NativeBase 2.0 – Sanket Sahu – Medium”