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”

Introducing the React Context API

  • The new React Context API is touted (at least on Twitter and a number of articles) as solving the need to use a state management tool, when I think in reality what it solves is easy dependency injection: Take something that lives at the top of your app and directly…
  • It essentially gives you an easy way to have state live at the top level in your component tree ( in this case) but “inject” it as a prop in a lower level component in the state tree.
  • A Consumer works hand-in-hand with the Context’s Provider, essentially allowing you to reach into your Context, and easily inject the Context’s value into a component, skipping many levels in the component tree.
  • Now that we’ve set up our Context and have created the Provider which wraps our app at the top level, we can now inject its into any of our lower level components.
  • When thinking of how to organize an app which uses React Context, I wanted to avoid having the Consumer code in the same file as the component which it “wraps”… the reason for this is because it makes it difficult to test the component in isolation.

We’ll take a look at the new React Context API, how to use it, what it does, and if it should replace Redux or MobX for your go-to state management option.
Continue reading “Introducing the React Context API”

Sneak Peek: Beyond React 16

Sneak Peek: Beyond #React 16 - React Blog

  • The talk opens with a question: “With vast differences in computing power and network speed, how do we deliver the best user experience for everyone?”
  • On the first demo, Dan says: “We’ve built a generic way to ensure that high-priority updates don’t get blocked by a low-priority update, called time slicing.
  • On the second demo, Dan explains: “We’ve built a generic way for components to suspend rendering while they load async data, which we call suspense.
  • You can pause any state update until the data is ready, and you can add async loading to any component deep in the tree without plumbing all the props and state through your app and hoisting the logic.
  • On a slow network, you can intentionally design which loading states the user should see and how granular or coarse they should be, instead of showing spinners based on how the code is written.

Continue reading “Sneak Peek: Beyond React 16”

Viewport-aware components for React Native apps – Netcetera Tech Blog

  • Viewport-aware components for React Native appsOpen-source basis for lazy loading, video autoplay, view tracking etc. provided by Skele ComponentsTL;DR: We built a few handy utils that make React Native components aware of their position in the scrollable view.
  • Wrap your scrollable view with Viewport.Trackerimport { Viewport } from ‘@skele/components’render() { – return ( – Viewport.Tracker – ScrollView scrollEventThrottle={16} – { this.props.children } – /ScrollView – /Viewport.Tracker – ) – }Besides the ScrollView, you can also use FlatList or SectionList.
  • Make its child components Viewport.Awareimport { Image } from ‘react-native’ – import { Viewport } from ‘@skele/components’const ViewportAwareImage = Viewport.Aware(Image)render() { – return ( – ViewportAwareImage – source={{ uri: }} – onViewportEnter={() = console.log(‘Entered!’)}
  • (Optional) Replace hidden children WithPlaceholdersimport { Viewport } from ‘@skele/components’const Placeholder = () = – View style={{ height: 50, backgroundColor: ‘darkgrey’ }} / – const VAImgWithPlaceholder = – Viewport.Aware( – Placeholder) – )render() { – return ( – VAImgWithPlaceholder – source={{ uri: }} – style={{ height: 50 } – //…
  • import { Viewport } from ‘@skele/components’const ViewportAwareVideo = { – return ( – ViewportAwareVideo – ref={r = this.

We built a few handy utils that make React Native components aware of their position in the scrollable view. Check them out on Snack, GitHub or npm.
Continue reading “Viewport-aware components for React Native apps – Netcetera Tech Blog”

Excited to host #ReactJS testing workshop by @NikkitaFTW at #ReactJSgirls on 10 April 🎉🎉🎉

Excited to host #ReactJS testing workshop by @NikkitaFTW at #ReactJSgirls on 10 April 🎉🎉🎉

  • • What we’ll do – – We’re excited to host Sara’s first workshop at ReactJS Girls!
  • Testing React Workshop – – – – In this workshop I will be going through unit testing in Javascript, how you can make it fun and meaningful for your app.
  • ** – – – – Sara Vieira (@NikkitaFTW) – – – – Front-End Developer at @YLDio, open sorcerer, maker of useless modules, Blogger, Drummer and horror movie fan girl – – – – — – – – – Thank you our sponsors for making this happen: – – – -…
  • The team is committed the open source community aiming to create a long-standing engineering culture and delivery capability in each piece of work.
  • YLD is looking for React / Node / Devops engineers to join the team: out Tech Talks YLD Youtube channel for more React / Node / Product talks; join the conversation on Twitter @YLDio (https://twitter.com/YLDio) and on LinkedIn us on Twitter @ReactJSgirls for more What to bring – – Bring…

• What we’ll doWe’re excited to host Sara’s first workshop at ReactJS Girls! Testing React WorkshopIn this workshop I will be going through unit testing in Javascript, how you can make it fun and mean
Continue reading “Excited to host #ReactJS testing workshop by @NikkitaFTW at #ReactJSgirls on 10 April 🎉🎉🎉”

Sneak Peek: Beyond React 16

  • The talk opens with a question: “With vast differences in computing power and network speed, how do we deliver the best user experience for everyone?”
  • On the first demo, Dan says: “We’ve built a generic way to ensure that high-priority updates don’t get blocked by a low-priority update, called time slicing.
  • On the second demo, Dan explains: “We’ve built a generic way for components to suspend rendering while they load async data, which we call suspense.
  • You can pause any state update until the data is ready, and you can add async loading to any component deep in the tree without plumbing all the props and state through your app and hoisting the logic.
  • On a slow network, you can intentionally design which loading states the user should see and how granular or coarse they should be, instead of showing spinners based on how the code is written.

Continue reading “Sneak Peek: Beyond React 16”

Give React Native a(nother) try + ReactNative Navigation

  • React Native is no different from other – – tools in this regard, so I want to present a few reasons why you might want to give – – React Native a(nother) try now, just over two and a half years since its initial release.
  • # Native Navigation with React Navigation – – – – You start using React Native.
  • You can either use a library that wraps the native navigation APIs for the platform or a re-implementation of those APIs using the same React Native primitives (View, Text, Animated, etc) that you use throughout your app.
  • React Navigation (https://reactnavigation.org/) is a “JavaScript-based” navigation solution and React Native Navigation is a “native” navigation library.
  • I lead the React Navigation along with the creator of the project, Eric Vicenti.

Brent Vatne (expo.io, ReactNative) and Eric Vicenti (ReactNative @Facebook) are in town delivering training…# Reasons to give React Native a(nother) tryWhen a highly hyped new tool is released, many
Continue reading “Give React Native a(nother) try + ReactNative Navigation”

React Native · A framework for building native apps using React

  • React Native combines smoothly with components written in Objective-C, Java, or Swift.
  • It’s simple to drop down to native code if you need to optimize a few aspects of your application.
  • It’s also easy to build part of your app in React Native, and part of your app using native code directly – that’s how the Facebook app works.

Continue reading “React Native · A framework for building native apps using React”

Sneak Peek: Beyond React 16

  • The talk opens with a question: “With vast differences in computing power and network speed, how do we deliver the best user experience for everyone?”
  • If my device is fast enough, it feels almost like it’s synchronous; if my device is slow, the app still feels responsive.
  • Notice that only the final state was displayed; the rendered screen is always consistent and we don’t see visual artifacts of slow rendering causing a janky user experience.”
  • On the second demo, Dan explains: “We’ve built a generic way for components to suspend rendering while they load async data.
  • On a slow network, you can intentionally design which loading states the user should see and how granular or coarse they should be, instead of showing spinners based on how the code is written.

Continue reading “Sneak Peek: Beyond React 16”

What Makes React Native the Future of Hybrid App Development?

What Makes #reactnative the #future of Hybrid App Development?  #appdevelopment #hybrid

  • Presently, numbers of mobile app developers have started using React Native to develop mobile apps.
  • When a mobile app developer starts developing apps using specific platform and programming language such as Java for Android or Swift/Objective-C for iOS, the application is known as a native.
  • React Native is an efficient tool from Facebook to benefits developing a hybrid app for Android and iOS.
  • Furthermore, they can also use their code written in any platform which becomes highly beneficial for mobile app developers to focus on other things rather than writing the same code each time when developing a new app.
  • Reusability of code, highly portable, focused UI, compatibility for third party app integration as well as enhance the efficiency of developers has made react native popular for Hybrid app development.

React Native is popularly used for hybrid app development due to its number of benefits. Check out why it is good for your next hybrid app development project.
Continue reading “What Makes React Native the Future of Hybrid App Development?”