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”

React Native Debugging tips and tricks – codeburst

#reactnative Debugging tips and tricks – codeburst

  • Starting at the beginningThe first step in getting the devtools up and running for your app is to hit Cmd+D(iOS) or Cmd+M(Android) while the simulator is open and click ‘Debug JS Remotely’ like so: – As you can see, this should then trigger the React native debugger tab to open…
  • I don’t know what the keyboard shortcut to do this is in Windows is but I’m sure it’s easily Googleable.
  • One thing to bear in mind as regards keeping this debugger open is that if you have to kill your app for some reason and start it again, they may slow down your app a lot when you relaunch it.
  • But, sometimes the Cmd+D/M shortcut doesn’t work when you’re app is launching.
  • React Native recently introduced a copy keyboard shortcut into the simulator, but it doesn’t work perfectly.

You may be wondering why you should learn debugging tools. The truth is that for a lot of cases they are overkill and there are less overwhelming means of finding out where your program is…
Continue reading “React Native Debugging tips and tricks – codeburst”

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?”

5 Reasons Why I Love React Native – codeburst

“5 Reasons Why I Love #ReactNative” — @AdhithiRavi

  • If you know Javascript, it is easy to learn.I started writing my first React Native app, with zero prior experience in mobile application development.
  • Web developers can leverage their knowledge in Javascript to write React Native apps.
  • Don’t ever waste time recompiling.This is one of my most favorite aspects of developing React Native Apps.
  • Android Date Picker— Underlying Native WidgetiOS Date Picker — Underlying Native WidgetThese are some aspects of React Native that makes the developer’s life much easier and we don’t need to reinvent the wheel here.
  • With React Native build Android, iOS and Windows Apps all in Javascript.5.

React Native is very popular these days, and thousands of apps are already built using React Native. Big names like Facebook, AirBnB, Uber, and many other companies have embraced React Native and are…
Continue reading “5 Reasons Why I Love React Native – codeburst”

5 Reasons Why I Love React Native – codeburst

5 Reasons Why I Love #reactnative – codeburst

  • If you know Javascript, it is easy to learn.I started writing my first React Native app, with zero prior experience in mobile application development.
  • Web developers can leverage their knowledge in Javascript to write React Native apps.
  • Don’t ever waste time recompiling.This is one of my most favorite aspects of developing React Native Apps.
  • Android Date Picker— Underlying Native WidgetiOS Date Picker — Underlying Native WidgetThese are some aspects of React Native that makes the developer’s life much easier and we don’t need to reinvent the wheel here.
  • With React Native build Android, iOS and Windows Apps all in Javascript.5.

React Native is very popular these days, and thousands of apps are already built using React Native. Big names like Facebook, AirBnB, Uber, and many other companies have embraced React Native and are…
Continue reading “5 Reasons Why I Love React Native – codeburst”

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.”

Native After Effects Animations Render (iOS, Android, Web, React Native)

  • Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web!
  • You can forget about building animations by hand, gifs, png sequences or even Facebook Keyframes.
  • Use Lottie to render animations for Android, iOS, Web, and React Native projects.

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web! You can forget about building animations by hand, gifs, png sequences or even Facebook Keyframes. Use Lottie to render animations for Android, iOS, Web, and React Native projects.

Continue reading “Native After Effects Animations Render (iOS, Android, Web, React Native)”

5 Reasons Why You Should Use React Native For Your Next App Idea

5 reasons why you should use React Native for your next app idea  #ReactNative

  • But then I saw that the React team was working on framework called React Native that would work on both iOS & Android (despite the Android version coming out much later)…GAMECHANGER.
  • Neither the React Native code for iOS or Android was available yet but just the fact that a large team like the Facebook Dev group was working on a solution like this got me excited enough to start all my new web projects in React.
  • In the past when other javascript frameworks (Meteor, Ionic etc.) tried to build tools to compete with native development they simply used Cordova to make javascript look like native Swift or Java code when in reality they were super wonky.
  • I just mention Live Reload first because when switching between React Native and Swift and/or Java…or Objective-C, it is the first thing you notice in speed of development.
  • While you certainly won’t just be copying the same code you wrote from the web application and pasting it into the iOS and Android version expecting it to work, there are a lot of reusable modules between platforms.

tldr; I’m a React “fanboy”. A few years ago, I came across two brand new javascript frameworks in Meteor and React. At first glance after comparing the two I di
Continue reading “5 Reasons Why You Should Use React Native For Your Next App Idea”