Developing A React Native App with Expo – Exposition

Developing A #reactnative App with Expo

  • Developing A React Native App with ExpoAt Ducklings, Inc., we use Expo + React Native to develop applications for iOS/Android.
  • It comes with build and production environments, you can write React Native code using JS (no need for Xcode or Android Studio), and develop for both iOS and Android.
  • However, with Expo, it’s possible to replace just the JS bundle that determines the behavior of your application, reducing the amount of work you have to do; and, of course, iOS and Android get updated at the same time.
  • The specific steps are: – Acquire the push token on the application side – This token is issued by Expo for each device in a format like Save this on the server side.Send the push notification – On the server side, send the following via POST to the endpoint “to”:…
  • If you really need to a specific native module that’s not supported, you can detach from Expo and keep building in Xcode and Android Studio (though you then can’t take advantage of all the benefits we described above).

This post is cross-posted (and translated) from Takahiko Wada’s original post on the Ducklings Tech Blog. Thank you, Takahiko & team, for your work and for sharing your experience with us! Expo is a…
Continue reading “Developing A React Native App with Expo – Exposition”

Kotlin vs. React Native: Which Is Better?

Kotlin vs. React Native: Which Is Better?

  • Kotlin, a programming language, pitched against React Native, a JavaScript library – let’s see what sticks and what slips.
  • Same app quality: This might not mean anything to some of you, but apps developed in React Native vs. apps developed in Kotlin feel the same.
  • If you compare an optimized Kotlin app with a React Native app, React Native will fall behind.
  • If your developer does not have apt knowledge about the native language (iOS or Android), which is something (he/she) was probably avoiding in the first place by choosing React Native, this will be a major problem.
  • Using React Native for its intended tasks performs quite well – but I think, this JavaScript library, with all its goods and glory, cannot outweigh Kotlin as a language.

This post covers the basics of the Kotlin programming language and compares it to the React Native JavaScript library for mobile application development.
Continue reading “Kotlin vs. React Native: Which Is Better?”

React Native Study Jams

Register to attend React Native Study Jams:  
Limited Seats

  • React Native is taking over the mobile market, where you develop once and get two native application good to go.
  • This means we can easily build mobile apps for iOS and Android quickly and intuitively.
  • What is Study Jam ?
  • Study Jams are community-run study groups for developers on Google Developers content, on various product topics.
  • The objective of Study Jams is to raise the technical proficiency of our global community members through the highest possible course completion rate.

Continue reading “React Native Study Jams”

Introducing Sideswipe: a cross-platform carousel for React Native

  • Ideally we want to animate based on scroll position, not index changes, which would provide a much smoother effect.Old solution for handling transitions between itemsI knew I could add an Animated.event to the FlatList and pass the animated value to the child components but the value would be the raw…
  • This means the components using the animated value would have do some math to figure out if they were the active index.
  • It also updates any time either one of the underlying animated values updates.What this means is we can divide the scroll position by the width of a child item (which is a required prop) and that will give us an animated value starting at 0 and ending at the length…
  • Now child components can animate based on their index instead of scroll position but the animation will still be based on scroll position under the hood.
  • Here’s what that looks like in code:Using Animated.divide to get animated value for carousel itemsNow each carousel item gets an animated value they can use to create entrance and exit animations based on their index in the list, not the scroll position of the underlying FlatList, this provides a much…

Recently I found myself in need of a flexible carousel solution that could support some pretty tough requirements, mainly: My first attempt was to utilize open-source and use something someone else…
Continue reading “Introducing Sideswipe: a cross-platform carousel for React Native”

Cosmic JS Blog Stay tuned for feature roll-outs, news and updates as we continue to help you manage content for your websites and applications faster and easier.

How to Build a Cross-Platform Blog Using #ReactNative, #NodeJS and #CosmicJS 🚀

  • Cosmic JS is an API-first cloud-based content platform that makes it not only easy to add dynamic content to any existing or new website, but makes it possible to seamlessly deliver content across devices and platforms.
  • This comes with everything you need to get started with a basic website as well as the codebase for the native applications running React Native for iOS and Android.
  • React Native is a very powerful way to build applications for both iOS and Android.
  • To install and run the iOS React Native application run the following commands: – – Run the following commands to run the Android application (make sure you have your Android device emulator open): – – – – Looking at index.ios.js and index.android.js you will notice that the root of our…
  • Now when you edit content in your Cosmic JS bucket, you will see that the content automatically updates across Web, iOS and Android applications.

Cosmic JS is a cloud-hosted content platform that offers a flexible and intuitive CMS API. Build websites and applications with more freedom and manage content easier. Get started for Free.
Continue reading “Cosmic JS Blog Stay tuned for feature roll-outs, news and updates as we continue to help you manage content for your websites and applications faster and easier.”

Story of rewriting react-native-opentok and challenges that we have encountered down the road…

  • Finally, we solved all of them :)This article contains useful steps that you can perform in order to debug and fix real-life issues on native sideWhat is OpenTok?The OpenTok platform, developed by TokBox, makes it easy to embed high-quality interactive video, voice, messaging, and screen sharing into web and mobile apps.It…
  • Here are the most annoying issues that we have encountered on each platform respectively while writing clients:Android: Updating native view doesn’t work.We had a native view which we wanted to update after we connect to a session and receive a stream.
  • Our Subscriber view implements SessionDelegate class what means we can set this view as a delegate in session and listen on events i.e. when session receive a stream, session instance invokes method onStreamReceived on pointer to delegate.
  • Enabling zombies in Xcode is very easy.Click the active scheme in the top left and choose Edit Scheme.Select Run on the left.Open the Diagnostics tab at the top.Tick the checkbox labeled Enable Zombie Objects.Tick the checkbox labeled Enable Zombie Objects.Now Xcode’s Console will give you more complex message i.e.[RNOpenTokSubscriberView respondsToSelector:] message…
  • So remember when you reload JS part of application new instance of your native module will be created but if you are using singleton it will be the same instance as before reload.As I wrote at the beginning we solved all of our issues but some of them took a…

At Callstack we have open source meetings each month. At one of the past meetings we came up with idea to re-maintain our old project called react-native-opentok, because it was a bit dusty and…
Continue reading “Story of rewriting react-native-opentok and challenges that we have encountered down the road…”

#ReactNative – Pros and Cons #100DaysOfCode #coding #react #reactjs @reactnewsletter @ReactJSNews

  • When we first heard about React Native, a framework that enables building an app for multiple platforms, we were thrilled.
  • One team, one codebase and the potential to scale an app for iOS and Android using a fracture of resources required in native development is a great promise.
  • A few years ago, Facebook officially announced React Native, a powerful framework with the promise of cross-platform compatibility.
  • The major selling point of React Native is shorter development time.
  • Facebook puts a lot of resources to ensure React Native’s reliability and also to guarantee a constant development of the platform.

React Native: One team, one codebase and potential to scale an app for iOS and Android using a fracture of resources required in native development is a great promise.
Continue reading “#ReactNative – Pros and Cons #100DaysOfCode #coding #react #reactjs @reactnewsletter @ReactJSNews”

Text Input Mask for React Native – CloudBoost

Text Input Mask for React Native.



#reactJS #javascript

  • Text Input Mask for React NativeWhen I first time got a task in the project I was working on to make a masked text input in React Native, I absolutely didn’t expect that it would be so difficult to implement.
  • I just thought “ok, will install some RN module or make it by myself using onChangeText”, yep…After many attempts with methods of TextInput like onChangeText, onKeyPress, selection I finally did it with not good performance for iOS, but not for Android, because onKeyPress method of TextInput is not implemented for Android yet.
  • More over there was no selection property yet in the version of React Native I was working on to change a position of carriage, so I had to write it by myself in Objective-C and Java, imagine how I was wondering when saw it in the next version of RN :)I didn’t find any solution and module that fits my needs to close the task so decided to write my own one, here it is:I’ve just integrated these great native RedMadRobot’s libraries to React Native:Installationnpm install –save link Android it just works.For iOS you have to drag and drop InputMask framework to Embedded Binaries in General tab of Target and check ‘Yes’ in ‘Always Embed Swift Standart Libraries’ of Build Settings.

When I first time got a task in the project I was working on to make a masked text input in React Native, I absolutely didn’t expect that it would be so difficult to implement. I just thought “ok…
Continue reading “Text Input Mask for React Native – CloudBoost”

We had a great time speaking with @naoufal about #ReactNative on the latest episode #JavaScript

  • In this episode, we’re joined by Naoufal Kadhom, a Software Engineer from Netflix who’s also just released a payment library for React Native.
  • In the episode, we’ll be discussing React Native and what it’s like to leverage it for Android and iOS applications.

In this episode, we’re joined by Naoufal Kadhom, a Software Engineer from Netflix who’s also just released a payment library for React Native. In the episode, we’ll be discussing React Native and what it’s like to leverage it for Android and iOS applications.
Continue reading “We had a great time speaking with @naoufal about #ReactNative on the latest episode #JavaScript”

React Native source maps tool

  • A new tool is available to make it easier to upload source maps for React Native projects using Bugsnag.
  • Source maps are required to translate the minified JavaScript errors into meaningful, actionable stack traces.
  • bugsnag-sourcemaps makes it easy to reliably upload source maps across Android and iOS in release and debug builds.
  • Find out more in our React Native docs.

A new tool is available to make it easier to upload source maps for React Native projects using Bugsnag.
Source maps…
Continue reading “React Native source maps tool”