|
|
|
Under the hood: Shipping #friendsday videos (Blog post)
"On our 12th birthday, we celebrated by shipping hundreds of millions of personalized videos to people around the world."
"There are two kickers in this whole story. The first: We wrote the Android and iOS UIs in less than a month. We started in mid-November and quickly realized the code had to be done before Christmas. Why? We wanted to make sure that for those who got a new phone as a present, the code would be in the app they downloaded. This was pretty tricky when we were simultaneously drawing up data structures and APIs on the backend!
The second: This effort utilized React for web and React Native for both iOS and Android. In fact, this was one of the first React Native features in the main Facebook for Android app. React and React Native allowed us to create a complex, feature-rich, responsive editor on three platforms in a very short amount of time. Kudos to the React Native team for helping to enable this product."
|
React.js Conf is one week away!
.... but surely not everyone who receives this email or reads this hypertext document on the world wide web will be able to attend, which is why we will be live streaming through the Facebook Developers YouTube channel!
By that I mean, we will be live streaming if everything goes well; if some technical disaster occurs then don't come chasing me with torches and pitchforks. In the very worst case we will be posting videos of the individual talks shortly after the conference (maybe a few early ones too :P). But everything should work. But if it doesn't, yeah, don't be angry at me please. But it should work.
|
|
Exponent’s winter 2016 contest is done!
"Our first ever contest has come to an end, and it went way better than we expected! We had fun helping people out and especially playing with the entries — in the process we learned a lot about what developers need from Exponent and some of the pain points in using it today."
Check out the winners and some of our lessons learned :)
|
React Amsterdam speakers announced!
"A Full day conference of all things React" - three React Native related talks -- @tadeuzagallo with a "React Native Architecture Overview", @jsierles about React Native Playground, and @kureev & @grabbou jointly talking about "Solving a tooling problem for react-native" (hint: rnpm).
|
|
Progressive image loading in React Native (Blog post)
"An experiment to improve image loading experience on slower connections." - shows you how to write an image component wrapper that displays a lightweight blurred image first (caveat: how you generate this blurred image is up to you), followed by fading in the actual image when it is done loading - similar to what you see on Medium.
|
|
Unit testing React Native with Mocha and Enzyme (Blog post)
Ken Wheeler is many things -- a father, a husband, a developer, a kickboxer, a beer drinker, a programmer, and probably more. But you don't need to know any of that for this article, where he talks about unit testing with React Native.
|
|
Actually Building Things In React Native (Video)
"How Futurice shipped a beautiful iOS app using React Native and what they learned along the way" - a really fantastic, #realtalk (I think this isn't cool anymore, should I say like #talkgoals #formation #slays #hotsauce now? whatever) presentation about Jani Eväkallio's experience building React Native apps, coming from a background of web development.
|
|
Add Crashlytics to your React Native iOS app (Blog post)
"One of the coolest things about React Native is that if you use it together with tools like CodePush or AppHub you can update your app instantly and avoid those painful 1-week app store submissions. That also means that you can push a hotfix on the fly, but the question is: how do you know if your app is crashing?" from Bruno Barbieri of Delivery.com, which seems like a very fancy and expensive domain.
|
Choke (React Native iOS app)
Rap battlers have traditionally been an under-served market when it comes to apps. Think fast -- name five social rap battle apps. See what I mean? Henry Kirkness wants to make it as easy to have a rap battle with a friend as it is to order a human to physically come and pick you up in their car and drive you somewhere, or bring you toilet paper and coffee, or frozen yogurt with your choice of toppings. That's right, he has made an app for you to have a rap battle. And in React Native. Check it and challenge me to a battle - @notbrent.
|
|
React Native’s LayoutAnimation is Awesome (Blog post)
"For n number of layout changes in your view, one line does it all. Set your state, allow your view to re-render, and LayoutAnimation handles all interpolation for you. For large and complex views, this is POWERFUL."
A caveat with Android: this is still experimental on that platform and you will likely run into some bugs, this is because it's not natively supported in the same way on that platform.
|
|
Debugging flux applications for web and React Native (Blog post)
I admit I haven't had a chance to play with this yet, but this sounds awesome:
"A signifiant feature I’ve implemented there is that the monitor can stick an instance or synchronize all other instances according to the actions in the selected one (like in the demo above). So you can monitor states changes simultaneously on all devices and emulators." - essentially actions that are dispatched on one device can be mirrored on another device automatically!
The author, Mihail, is also speaking at React Europe in June!
|
Responsive Design in React Native (Blog post)
"If you need to dynamically calculate the height, width, padding, and font sizes of your components, this could be a helpful template to start from."
Elie Slama's take on how to handle layout and font sizes on various screen sizes. The main limitation with this approach is that it won't update in response to device orientation changes (portrait/landscape).
|
|
Highlights from facebook/react-native
|
|
NavigationExperimental lands in master
"A new API to unify internal navigation. Also addresses a highly-rated community 'pain'
Offers the following improvements:
- Redux-style navigation logic is easy to reason about
- Navigation state can be easily saved and restored through refreshes
- Declarative navigation views can be implemented in native or JS
- Animations and gestures are isolated and now use the Animated library"
While there is no substitute for reading the actual source, while I was doing just that I wrote up some notes to summarize some of the main pieces of NavigationExperimental and shared them in this gist, check them out and the source and the UIExplorer examples, and try to build something with it!
Eric will also be doing a lightning talk about this at React Conf in just over a week, hurray.
|
Added support for auto-resizing text fields
"This diff adds support for auto-resizing multiline text fields. This has been a long-requested feature, with several native solutions having been proposed.
Rather than making this a feature of the native component, this diff simply exposes some extra information in the onChange event that makes it easy to implement this in pure JS code. I think this is preferable, since it's simpler, works cross-platform, and avoids any controversy about what the API should look like, or how the props should be named. It also makes it easier to implement custom min/max-height logic."
|
|
Enable HMR
After a lot of work by @martinbigio and a couple of recent newsletter mentions, this last commit by @skevy makes hot module reloading available to everyone on Android. Update and give it a try, it's glorious!
@skevy recently joined the team at Exponent too, very happy to have him on board :)
|
|
Open source Android date and time pickers
Guess what time it is?! Date and time picker on Android time! Ha ha haaa.... These native date/time picker components are so well done on Android, bravo Google, great to have them bridged into React Native now! Another commit from @mkonicek aka Martin Konicek.
|
Add a cross-platform Picker
But you're like, "hey guy, that's great, I can pick date and times now, but what if I want to pick other things, like tomatoes or the colour of carpet for my living room?" Just use this cross platform Picker component! Thanks @mkonicek. I used a different picture for him on this one, this time I'm in it too, fancy (photo taken back at Reactive Conf in Bratislava).
|
|
Added ability to switch version in documentation website
Rejoice, you can now change the React Native version for the docs! Just click the version number in the top left and then take your pick. "next" refers to what we have called "rc" in the past and "stable" refers to master.
If anyone wants to make this prettier (maye a dropdown?) a pull request is welcome! Everyone thank @bestander for shipping this!
|
Improve style prop display in docs
- Display the description when it exists
- Display the platform
Little changes like this can be done by anyone who is motivated to do so, next time you have a bit of free time why not find some small corner of the docs that you can improve? The nice thing about doing this is that there are now so many users for React Native that you will impact thousands of people's lives and make it just a bit easier. How kind of you! Be like @vjeux ;)
|
|
Highlights from the community
|
|
React Native Community - Public Facebook Group
I recently realized that many people are not actually aware of this group, probably the folks that don't frequent Facebook. In spite of that, the membership has been growing very quickly recently -- it's now at 1,887 people -- and it's very active with at least a few posts a day. Come join in!
|
|
idehub/react-native-billing
At some point, we've all gotta get paid. "React Native Billing is built to provide an easy interface to InApp Billing on Android."
Protip: don't confuse idehub with ide, different people, ide is still ide and idehub is a separate thing, and also neither have anything to do with IDE. I hope I've been clear.
|
|
lelandrichardson/react-native-mock
"Testing React Native components is hard. I'm hoping this makes it easier.
I wrote a React Testing Library that works really well for React 'Web', but didn't really work for React 'Native' without something like this." (lelandrichardson also wrote Enzyme, integration guide with Enzyme here)
|
leimd/react-native-aws-signature
"Library to generate AWS signaure V4 for React Native application because react-native's javascript runtime doesn't support running aws-sdk-js. This is the first part if you want to make any signed calls to AWS."
|
|
skellock/phoenix-react-native-mashup
"A sample chat app using React Native and Phoenix." - Phoenix and React, so hot right now. Oh that reminds me I need to see Zoolander 2. Oh yeah and Deadpool.
This Steve Kellock is pretty cool, and Canadian! 🇨🇦
|
|
aakashns/react-native-dialogs
For those times when you're like oh damn this form field is going to make my screen look ugly and you just want to hide it off in a dialog somewhere, this library has your back by giving you access to some pretty native Android dialogs.
|
tuanpmt/react-native-smartconfig
"A React Native module for ESP8266 Smartconfig" - supports both iOS and Android, I admit I had no idea what this was when I stumbled upon it.. the ESP8266 is a cheap easy way to get "fast way to do configure wifi network for IOT device." Wikipedia says it "is a low-cost Wi-Fi chip with full TCP/IP stack and microcontroller capability." You can build some really neat stuff with it, like this open source light clock on Kickstarter.
Also, apparently Slashdot has no ES8266 references and people are furious about that, which is kind of funny.
Check out @tuanpmt's other projects too, he has done a bunch of work with the ES8266 and also built react-native-mqtt - mqtt is "a machine-to-machine (M2M)/'Internet of Things' connectivity protocol. It was designed as an extremely lightweight publish/subscribe messaging transport"
|
|
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.
|
|
|
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!
|
|
Collect and curate content easily for brilliant newsletters. Try Goodbits for free!
|
|
|