background preloader

React Native

Facebook Twitter

Updating the React Native Meteor Boilerplate. Updating the React Native Meteor Boilerplate A few months ago I released a boilerplate to build React Native apps with Meteor.

Updating the React Native Meteor Boilerplate

A lot has changed on this landscape in the last 3 months and that boilerplate has fallen behind. It was extremely simple and used the best practices at the time — it was based off of how I was actually building React Native Meteor apps at that time. We’ve now got react-native-meteor which gives us all of the same DDP capabilities (and then some) with a very Meteor like API (the goal is to follow it as closely as possible). Build and publish React Native apps without installing Xcode. Why You Should Consider React Native For Your Mobile App. Like many others, I was initially skeptical of Facebook and Instagram’s React1.

Why You Should Consider React Native For Your Mobile App

Initial demos of React’s JavaScript language extension, JSX, made many developers uneasy. For years we had worked to separate HTML and JavaScript, but React seemed to combine them. Many also questioned the need for yet another client-side library in an ocean full of them. As it turns out, React has proved tremendously successful, both on my own projects, and with many others around the web, including large companies like Netflix2. And now with React Native3, the framework has been brought to mobile. This article will explain why I think you should consider using React Native, by providing an overview of the framework and what I believe to be its best features. Why Native Starter Pro, why not Ionic Framework? Why Native Starter Pro, why not Ionic Framework?

Why Native Starter Pro, why not Ionic Framework?

When I started out with mobile app development, it was fairly easy with Ionic using web technologies without the knowledge of Java for Android and Objective-C (Swift) for iOS. But in due time what bothered me was that the layer of WebView made it somewhat slow which affected the overall performance of the app.

The very aim to develop a good app is that at the end we get smooth running product, user friendly and negligible performance issue. 6 essential libraries to use on your next React Native app. React Native Meteor FAQ. React Native Meteor FAQ There are a few questions that I see pop up on the various blog posts I've written on React Native Meteor.

React Native Meteor FAQ

I want to put together an FAQ to, hopefully, help you out and point you in the write direction. This document will be updated over time so please send me anything you feel should be included. Make sure to point your React Native app to the correct url for your Meteor app Meteor automatically knows what your server URL is because it handles the entire stack. When I try to `subscribe` I get an error of `INVALID_STATE_ERR`, what does this mean? This error means you're trying to interact with the DDP/Meteor server before you've actually connected to the server. How can I identify a user? If you've authenticated your user via DDP then you'll have access to this.userId in publish functions and Meteor.userId() everywhere else. Can I do Hot Code Push? Writing Cross-Platform Apps with React Native. React Native is a JavaScript framework for writing real, natively rendering iOS and Android applications.

Writing Cross-Platform Apps with React Native

It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: if you're a web developer, you can use React Native to write clean, fast mobile apps, from the comfort of a familiar framework and a single JavaScript codebase. We've heard promises of universal app development before, of course, with frameworks like Cordova or Titanium. What's it like to actually use React Native? In this article, we'll explore what React Native is and how it works. Google OAuth using Meteor and React Native. Allowing a user to sign up for your app via OAuth has become common place.

Google OAuth using Meteor and React Native

If you've used Meteor in the past you've experienced the ease through which you can set up OAuth in the browser or in Cordova. If you haven't, or you're just interested in learning more about the flexibility, I would suggest checking out this recipe by The Meteor Chef. It may also help you configure Google OAuth if you run into any issues throughout this post. One problem with the way Meteor handles the integrated OAuth is its reliance on the browser. This one took me a while to workout but I think I've now find a solution I'm happy with - which we'll be exploring today. Application mobile Cordova avec Meteor. GitHub - PaulBGD/react-native-image-slider: A quick and easy image slider for react native. GitHub - meteor-factory/react-native-tinder-swipe-cards: Tinder-like swipe cards for your React Native app. React Native Navigator — Navigating Like A Pro in React Native. React Native Navigator — Navigating Like A Pro in React Native There is a lot you can do with the React Native Navigator.

React Native Navigator — Navigating Like A Pro in React Native

Here, I will try to go over a few examples of what you can do with the Navigator and explain how it all works in depth. In React Native you have two choices as of now for Navigation (only one cross platform) out of the box, as well as the ExNavigator from Exponent. A library to manage dynamic updates to React Native apps. A framework for building native apps using React. Native Components With React Native, you can use the standard platform components such as UITabBar on iOS and Drawer on Android.

A framework for building native apps using React

This gives your app a consistent look and feel with the rest of the platform ecosystem, and keeps the quality bar high. These components are easily incorporated into your app using their React component counterparts, such as TabBarIOS and DrawerLayoutAndroid. How to Debug Exceptions with React Native. So you took the plunge.

How to Debug Exceptions with React Native

You decided to try out React Native. So did I, and it’s awesome. But as with all brand new shiny things, there are some rough edges. Easily Connect React Native to a Meteor Server. With Parse recently announcing that they will be shutting down, many companies are looking into the next steps to take.

Easily Connect React Native to a Meteor Server

This shut down may lead many away from BaaS products and towards an in-house backend - such as Meteor. Let's walk through what it's like to connect a React Native app to a Meteor app (serving as the backend). This tutorial assumes you already have React Native and Meteor installed and working on your system. You can access the finished app (Meteor and React Native) on Github. React Native’s LayoutAnimation is Awesome. React Native’s LayoutAnimation is Awesome If you are developing with ReactNative and have not tried LayoutAnimation yet, you are missing out. Coming to ReactNative as an iOS developer, I was worried about losing the convenience of CoreAnimation.

UIView animations are so nice; set the desired view properties and go. ReactNative’s Animated API works similarly, but requires a state property for each desired animation. For complex views this gets messy fast. Enter LayoutAnimation. For n number of layout changes in your view, one line does it all. In this example, I have a complex view with three possible states. The state changing code without any animation is below. Now, lets spice it up by adding a fancy LayoutAnimation. LayoutAnimation.configureNext(LayoutAnimation.Presets.spring); This will apply the `spring`animation preset to any layout changes that occur during the next render cycle.

BAM. Note: LayoutAnimation works for Create and Update layout events. EaseInEaseOutlinearspring. Testing React Native Apps on Android and iOS. Dear Testdroiders, It was roughly a year ago when Facebook announced their intention to open source the React Native framework for building native apps. This wasn’t a big surprise considering their own experiences with the HTML5 based application which got lots of negative feedback.

Moving to native was clearly the right move and as they had some good and popular implementation for writing web apps (with React) there was a need to bridge the gap between the native and web/hybrid apps.