|
|
|
React Native 0.16 released!
The rc suffix has been dropped and a couple of nice fixes, including "Added PullToRefreshViewAndroid" and "Android view shadow" have been cherry picked in.
|
|
React.js Conf 2016 Diversity Scholarship and Talk Proposal deadlines are TODAY, Sunday December 13 at 23:59 PST!
Re: Diversity Scholarship - "I am thrilled to announced that we will be organizing another diversity scholarship program for the upcoming React.js Conf! The tech industry is suffering from a lack of diversity, but it's important to us that we have a thriving community that is made up of people with a variety of experiences and viewpoints.
When we ran this program last year, we had over 200 people apply for only 10 tickets. There were so many people that we wanted to bring in but we couldn't. The results were still awesome, and we had bright individuals from around the world attending who would have otherwise been unable to. These attendees took part in discussions at the conference and brought perspectives that we might not have otherwise seen there.
This year we're excited to bring back the scholarship, but we've set aside 40 tickets because we really believe that it's important to do our best to make sure we have an even more diverse audience." - @zpao
|
React.js Conf 2016 Contest
Our first contest was a lot of fun, but we've upped the stakes this time -- we have two tickets up for grabs for React.js Conf.
"React.js Conf tickets will be very hard to get" said @sebmarkbage on Twitter. In the JavaScript Developer Survey Results also linked below, React came out on top in response to the question "What frameworks do you use?". After speakers / diversity tickets, organizers etc, there are fewer than 300 spaces at the conference. In a single block of SOMA there are probably at least 300 React users that would want to attend.
So here we have it: an opportunity to scratch an itch and work on a small hobby project with React Native, draw some attention to it (we will share all apps for voting), while at the same time increasing your odds of getting a ticket to the conference! Additional prizes include a recursive signed portrait of a yet-to-be-named React/React Native team member holding the portrait of @vjeux from our previous contest and an Exponent hoodie for the most viewed app.
|
|
Exponent - Android preview released!
Full disclosure: I work at Exponent.
We're really proud of what we've put together in this app but it's just the start. I can't think of a better way to spend five minutes than downloading this app, if you own an Android phone. You will see things that you did not think were possible.
"On the developer side, we are making it so that people can write just JavaScript -- and not worry about Xcode or Android Studio [or App Stores] -- and then have a React Native experience they can use and share much more quickly.
On the user side, we are trying to create an ecosystem of instant mobile apps that you can use just by tapping on them. For example, if you open up Exponent on Android, you can see a few examples there. If you tap on Floaty Plane, it downloads the game over the Internet and you can start playing it immediately. And if you tap on the Pomodoro timer, it will download that from the Internet and you can start using that, but you don't have to have either one "installed" or downloaded in advance before you use it. And if the developers of either of those change the software, you get the new version the next time you load it. "
With all of these "instant mobile apps" you can also add the icon to the home screen, just swipe down your notification drawer and click on the pin icon in the Exponent notification bar.
|
"How TextInput works" an article in React Native for curious people
"React Native is powerful, so much so that it is can seem magical to the untrained eye. Call me boring if you like, but I do not like it when things are magical. I want to understand how and why they work, to be able to predict what happens when I do x and to be able to change that behaviour if I desire.
React Native for curious people is an ever-growing series of articles about React Native that are the antithesis of tutorials; we do not attempt to explain how to accomplish any specific task, but rather aim to teach how React Native does what it does. The slight-of-hand behind the magic, if you will."
These articles will only be available through the Exponent app on iOS or Android, because we make heavy use of inline-examples powered by React Native to demonstrate the concepts that we are explaining. You'll see it on the featured list as soon as you open the Exponent app, or you can click through here to check out the source on Github.
If you're reading this on your phone and already have Exponent, just click here to go directly to the articles.
|
|
Evolving Complex Systems Incrementally (Presentation video)
jscodeshift parses your JavaScript source files into an AST which you can then manipulate similar to how one manipulates the DOM, and then print the source out again. This is useful for making API changes throughout your codebase that would be difficult and error-prone using just regular expressions.
I learned about jscodeshift watching this talk by @cpojer earlier in the week and I was an immediate convert. The next day I wrote my first "codemod" using @fkling's incredible AST explorer. This codemod converts require calls to import , check it out here -- click the transform toggle at the top to enable it if you don't see 4 panes.
|
On the road to Calypso by Matías Ventura (Blog post)
"About eighteen months ago my team at Automattic set upon building an extravagant experiment for the WordPress.com interface. It was to become the most important, demanding, and rewarding project I’ve worked on at Automattic. Two weeks ago, we were finally able to unveil it to the world, and open sourced the project."
|
|
Ionic Framework vs React Native (Blog post)
A nice comparison of building the same app in Ionic and React Native. One factual inaccuracy -- the Ionic app did not include Crosswalk, which would have made the file size larger and improved performance / smoothed out browser inconsistency on 4.x devices. Overall worth the read though!
|
TrackPacer - A Nerdy Overview (Blog post)
"Trackpacer is a digital rabbit, a pacing system for track and cross country athletes. 400 meters of LEDs laid along the inside of a track, and controlled from an iOS app that allows you to set distance, pace, and color of multiple "pacers" simultaneously."
|
|
Highlights from facebook/react-native
|
|
Animated.multiply and Animated.add to combine animated values
"The .interpolate() API of Animated values is quite effective to accomplish transformations based on a single animated value, but currently there is a class of animations that is impossible: animations being driven by more than one value."
var scale = Animated.add(panY, offset).interpolate({
inputRange: [...],
outputRange: [...],
});
add: "Creates a new Animated value composed from two Animated values added together"
multiply: "Creates a new Animated value composed from two Animated values multiplied together"
|
Improve Text perf
"Most apps create tons of text components but they are actually quite heavy because of the the Touchable mixin which requires binding tons of functions for every instance created.
This diff makes the binding lazy, so that the main handlers are only bound if there is a valid touch action configured (e.g. onPress), and the Touchable mixin functions are only bound the first time the node is actually touched and becomes the responder.
ScanLab testing shows 5-10% win on render time and memory for various products."
|
|
Use lazy getters to reduce `require('react-native')` overhead
"This diff switches the properties of the ReactNative object to lazy getter functions, which defers the require until the module is actually requested.
This doesn't prevent unused modules from being included in the JS bundle, but it will prevent them from being initialized unless/until they are used."
|
Add Clipboard module for iOS and Android
Pasteboard for iOS becomes Clipboard, and support for it has been added to Android.
import Clipboard from 'react-native'
Clipboard.get(content => {
console.log(content);
});
Clipboard.set('new contents);
|
|
Add loadingIndicatorSrc to Image on Android
"Similarly to source , this property represents the resource used to render the loading indicator for the image, displayed until image is ready to be displayed, typically after when it got downloaded from network."
|
|
Initial FlatUIImplemenatation
"This patch adds an alternative UIImplementation based on an idea of creating UI hierarchy off-the-main-thread (everything but Views), flattening ReactShadowNode hierarchy and displaying it within a single View when possible. While NativeViewHierarchyOptimizer allows removing layout-only RCTViews, this allows removing RCTView, RCTText and RCTImage.
This is an initial bare-bones implementation that doesn't really draw anything, only lays out the shadow nodes. Followup diffs will add missing features."
|
|
Moved React Native Android unit tests to open source
@bestander is on a roll -- this commit opened the door to collaborators outside of FB running the "shipit" command, meaning that there are now a handful more people who can land PR's, which should hopefully improve the time to merge!
|
|
Highlights from the community
|
|
Eat or Not
Curious how long you need to spend doing certain activities to burn a given amount of calories? This React Native app helps you with that calculation. Neat idea and solid execution!
|
Accio - On-demand Delivery
"Accio delivers anything you want, from anywhere you want, to anyone in Victoria [BC, Canada]. On-demand." Special shout out to these folks who are just a short ferry ride away from my home of Vancouver! Give this app a download and swipe around it -- they're off to a very solid start!
|
|
TAGGR
"TAGGR will change the way you shop, forever..." - well they're certainly ambitious! Check out this React Native app.
|
Mobabuild
"Mobabuild is your new League of Legends companion! You can browse builds and guides with your mobile device." another new React Native app.
|
|
exponentjs/fluxpybird
@nikki93 built a game he calls "Floaty Plane", which you will immediately recognize as being inspired by "Flappy Bird", but there's a twist: each tick of the game loop is an action dispatched through Redux, and consequently he was able to easily implement rewinding. So when your plane crashes, just hold down on the screen and all of your actions will be rewinded until you release the touch.
To make it even more interesting, @nikki93 also built a repl that you can connect to and change game configuration variables and dispatch actions.
Try it out here on Exponent if you have the app installed, or click through to see the repo.
|
exponentjs/react-native-loading-container
"A container component that takes care of loading/catching timeouts/retrying"
Check out the example that's included in the repo -- it demonstrates integrating LoadingContainer into your app by making a basic /r/reactnative client. Or try it on Exponent here, if you have Exponent installed on your phone.
|
|
niftylettuce/frisbee
An "API wrapper for ES6's fetch method. Easily make HTTP requests to your API."
|
|
Friends of the newsletter
|
|
Appetize.io
I love these folks. They make rnplay.org possible and in doing so support the React Native community in a big way. They are also allowing us to use their simulators within the React Native docs! I am not paid to advertise for them, I'm happy to advocate for products that I believe in (see: this newsletter about React Native) - so check them out if you have any need for an in-browser simulator for iOS or Android! Go and upload an app, the first 100 minutes of simulator use are free!
|
Exponent
With Exponent you can create a new React Native project in one click and deploy it with a second click, making it available to anyone else who has the Exponent app (available on the App Store and Play Store). On Android, each of the apps opens in a new activity in the multi-tasker and can be saved to the home screen, like any other app. Over the next few months we will be rolling out other exciting features like dead-simple push notifications and support for popular native modules. Did I mention Exponent enough yet in this issue? No? Exponent. Exponent.
|
|
|
That's it for now! Ping me on Twitter @notbrent if you have anything that you would like me to share next week.
If you're reading
this on the web, you can subscribe to
get this delivered weekly to your email here!
|
|
|