How to Draw an Owl with React: A Migration Story

Do you know the four P’s of migrating to React? Learn 'em now:  #reactjs cc: @ReactJS_News

  • A few months ago, I wrote about our adventures building a brand new project using React.
  • Our existing SparkPost app was built many moons ago in the ancient framework known as AngularJS.
  • Shortly after that article was published, I started in on my plan to improve the Angular app.
  • Ultimately we realized that the fastest and safest way to rebuild our entire app in a brand new framework was to do exactly what I’d publicly ridiculed: direct migration, i.e. a parallel rebuild.
  • Step 2: Draw the rest of the [censored] owl.

Sometimes even the best-laid plans need to be re-laid. A walk through on how (and why) we’re migrating our Angular app directly to React.
Continue reading “How to Draw an Owl with React: A Migration Story”

What Makes React Native the Future of Hybrid App Development?

What Makes React Native the Future of Hybrid App Development? (May-2017)

  • 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.
  • All About The Benefits of React Native Useful in Hybrid App Development

    Highly Portable

    Facilitates developer to port almost half of the app code to another platform.

  • Conclusion

    React Native is popularly used for hybrid app development due to its number of benefits.

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

PhotoEditor SDK + React Native – imgly

PhotoEditor SDK + React Native  #ios #photoeditor #photoediting #android #reactjs #reactjs

  • However, react-native-navigation is not required for embedding the PESDK into your React Native application.Launching the PhotoEditor SDK from React NativeTo successfully launch our editor from React Native we needed to do three things:Add the PESDK library to our iOS project.Create a native module that bridges between React Native and the PhotoEditor SDK.Add a method to create a ToolbarController, push a PhotoEditController and present them from the current view controller.Call the method, wherever we want to edit an image in our React Native codeThe first step was rather easy.
  • In the classes implementation we registered our module with React Native by calling RCT_EXPORT_MODULE(PESDK):In order to create a new photo editor view controller we needed to create a new ToolbarController and push a PhotoEditController that loads a sample image.
  • All image fetching, scrolling, etc. is handled by React Native, so we only needed to handle the user’s taps on an image:We used react-native-fs to download a larger resolution image to the local filesystem, pass the path of the local file to our present() call and modify our iOS native module:We then had a nice little app, that shows a grid of images, loads a high-resolution image upon selection and opens the PhotoEditor SDK:The iOS demo app running on a device.Android implementationAs we have seen, opening the PESDK from React Native can easily be done on iOS.
  • To accomplish this we needed to repeat some of the previous steps for Android:Add the PESDK to our Android project.Create a native module that bridges between React Native and the PESDK.Add a method to launch an ImglyIntent using the PhotoEditorBuilder from the current Activity.Installing the SDK is again done by following the instructions for integrating the PESDK and shouldn’t take more than a few minutes.
  • Creating a native module on Android is quite similar to iOS, although a little more setup code is required: We created our PESDKModule that recreates the present(path) method from iOS, a PESDKPackage containing our module and finally added the package to our Application:This time, we prepared the desired settings for our editor, added our image path and passed everything to a PhotoEditorBuilder.

Often our users ask whether it’s possible to use the PhotoEditor SDK for iOS and Android with React Native (the good news right away: Yes, it is possible and fairly easy as well). So, we set out to…
Continue reading “PhotoEditor SDK + React Native – imgly”

Improve Your UX by Dynamically Rendering Images via React

Improve Your UX by Dynamically Rendering Images via React @arwong09  #Reactjs #UX #Startups

  • It’s also how performant it is, how intuitive it is — how much it delights your user.We’ve all been there, discovering a new app or web page for the first time and seeing something like this:With high resolution photos and retina screens, it’s all too often we have to sit and watch images painstakingly render.
  • We accomplish this by using React’s onLoad event; we can make the request to the server for the image files, but not render the image in the DOM until the entire file has been downloaded.the end result: smooth as butterThe end result is an app that loads high resolution images and never keeps the user waiting.
  • The placeholder teases the user and lets them know images are being loaded.
  • Furthermore, we hold off on rendering the images until they have been fully downloaded from the server so our user never has to see images painting from top to bottom in the browser.view live demoShow Me the Code!Rendering the PlaceholderFor our placeholder component (LoadingItem in this example), we simply render the image and apply any animation effects we want:export default function () { return ( ReactCSSTransitionGroup transitionName=”loadingItem” transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={300} img className=”feed__loading-item” src={img} / /ReactCSSTransitionGroup )}In the render of our Feed component, we simply render LoadingItem as long as we still have FeedItems being loaded:export default class Feed extends Component { … render() { return ( div className=”feed” … {this.props.items.length this.state.loadedItems.length LoadingItem / } … /div ) }}Dynamically Rendering Images via `onLoad`Our Feed component works as follows:export default class Feed extends Component { constructor(props) { super(props) this.state = { loadedItems: [] } } onLoad(feedItem) { let updatedItems = this.state.loadedItems updatedItems.push({ name: feedItem.name, imgPath: feedItem.imgPath }) this.setState({ loadedItems: updatedItems }) }render() { return ( div className=”feed” h1 i) = FeedItem imgPath={item.imgPath} name={item.name} key={i} / )} {this.props.items.length this.state.loadedItems.length LoadingItem / } div className=”hidden” {this.props.items.map((item, i) = img src={item.imgPath} onLoad={this.onLoad.bind(this, item)} key={i} / )} /div /div ) }}So what’s happening here?
  • When the state updates, the newly loaded item is rendered into the DOM with the image already fully downloaded.That’s it!View live demoView full source code (star the repo if you found this helpful!)

It’s a competitive world out there right now. As we all know, just having a good idea isn’t enough to make your company the next billion dollar IPO. Execution is just as important, and when it comes…
Continue reading “Improve Your UX by Dynamically Rendering Images via React”

React Native Basics: Geolocation – Hacker Noon

React Native basics: Geolocation  #ReactJS #JavaScript

  • If you want to use a user’s location when the app is in the background you’ll have to do some additional configuration .
  • getCurrentPosition allows us to request a user’s location at any time.
  • The only difference is that the success or error callback will be called whenever the user’s location updates.
  • The success callback will be passed an object that looks like
  • Because of this if the location permission came enabled by default on Android a user will see what it’s requesting (location data) and if your app doesn’t have a good reason to need their location information then they may not download your app.

I’ve been using the Geolocation API in React Native a fair amount lately. It’s an API that I didn’t realize existed in React Native and definitely didn’t realize how easy it was to actually use…
Continue reading “React Native Basics: Geolocation – Hacker Noon”

Getting Started #

Getting Started  #reactnative

  • Click “Apply” to download and install the Android SDK and related build tools.
  • Android Studio installs the most recent Android SDK by default.
  • 1. Download and install Android Studio #
  • react – native init AwesomeProject cd AwesomeProject react – native run – android
  • If you’ve already installed Android Studio before, you can still install HAXM without performing a custom installation.

Welcome to React Native! This page will help you install React Native on
your system, so that you can build apps with it right away. If you already
have React Native installed, you can skip ahead to the
Tutorial.
Continue reading “Getting Started #”