Issue #21

Logo for React Native Newsletter

Top News

We're doing a contest! You should participate!
We're doing a contest! You should participate!

What would you do with your very own signed portrait of ninja rockstar astronaut A-list-hacker-celeb and all-around french person Christopher Chedeau aka vjeux? I'd probably frame it and put it next to my desk to improve DX. But this question, much like its lesser known cousin "what would you do if you won the lottery?", is one that most people don't waste time pondering because it seems like a distant unachievable daydream.

Well I'm here to tell you that you can be one of the few, perhaps even the only person in the world to own this limited edition React Native memorabilia. Hand signed by vjeux himself, then wiped free to clear off any skin cells lest you try to clone him in order to augment your development team, and shipped to your doorstep.

But wait, there's more! We're also giving out a ticket to Reactive 2015 conference in Slovakia at the beginning of November!

Click through to see more details about the contest, (hint: it involves making a React Native app)

exponentjs/rex
exponentjs/rex

"REX is a tool that takes your JavaScript source files and serves a bundle that you deploy to clients"

To quote @ide, beamed to us from his beachfront private jet mansion (seriously it's a bit excessive man):

"1. REX is a standalone packager for people building infrastructure for React Native. Come help out if that's your thing.
2. We need help building tools to keep it up-to-date with upstream.
3. The idea is we'll sync commits from the React Native repo and augment it in ways that avoid merge conflicts.
4. It's on npm now so you can install it if you think you could use it."

Making Tucci: What Is It? And Why? (Blog post by @clayallsopp)
Making Tucci: What Is It? And Why? (Blog post by @clayallsopp)

"I made an app — it’s called Tucci, and I worked on it with Tiffany. Download it here, it’s a freebie."

"Tucci finds openings at restaurants that usually don’t have reservations on short notice — you know, the fancy places that you usually have to call a few months in advance. Tiffany found out about a website called HackerTable, which surfaces last-minute availabilities from OpenTable, and we immediately thought there should be an app that does the same thing."

React-Native VideoPlayer Component for Android with ffmpeg library - $600 Fixed Price
React-Native VideoPlayer Component for Android with ffmpeg library - $600 Fixed Price

If you're a developer with Android experience and want to try your hand at writing a React Native module, this could be a good way to do it while also getting paid a little bit. I've heard getting video playback working well across various Android devices can be tricky, so I wouldn't expect this to be to be an easy task, but if you're in it for the educational value and to publish some OSS this could be worthwhile for you!

And if you do finish it and are interested in including it in the react-native-video library, I'd be happy to add you as an owner!

Relay 101: Building A Hacker News Client (Blog post by @clayallsopp)
Relay 101: Building A Hacker News Client (Blog post by @clayallsopp)

A walkthrough building a HackerNews client using Relay/GraphQL using Clay's own GraphQLHub as the backend! This guy is smart and he shares, I like this guy.

React Versus
React Versus

This is a neat site that shows a side-by-side comparison of absolute and relative growth of a handful of JavaScript libraries, including React. It's neat to see React's consistent growth over time and React Native's explosive growth during key months.

Dan Abramov to join Facebook
Dan Abramov to join Facebook

“Also looking forward to joining @fbOpenSource to work on React Native tooling in November.”

........... this makes me happy.

Highlights from facebook/react-native

Support hex values in outputRange by @dralletje
Support hex values in outputRange by @dralletje
var interpolation = Interpolation.create({
  inputRange: [0, 1],
  outputRange: ['rgba(100, 120, 140, .5)', '#87FC70'],
});

In addition to this PR, @dralletje has made some other very welcome contributions recently, including Clear timeouts on unmount TouchableMixin and Add websocket JS tests and call onclose on failure - pretty good for a guy with chopstick canines.

Add "peek and pop" (3d touch) capabilities to RN
Add "peek and pop" (3d touch) capabilities to RN

ITT I post a working but incomplete solution for integrating React Native with the iPhone 6s / iOS9 peek / pop feature. Check it out and take my code and make it into a more complete library if you like! It's all yours!

Performance guide up in documentation
Performance guide up in documentation

Lookie what I wrote! A new guide in the docs! This is a first iteration, feedback and PR's are always welcome! Thanks @ide for proofreading & correcting it for me!

Enable es6 module syntax by default
Enable es6 module syntax by default

Read more about this in the Babel docs. Feel free to use it on your projects but on core (facebook/react-native) please continue to use require.

Pause JS DisplayLink if nothing to process
Pause JS DisplayLink if nothing to process

Everyone needs to rest sometimes (don't I know it), even your iPhone. So hey, if nothing is happening on the JS side lets give that DisplayLink a break. It'll save you battery.

Highlights from the community

ajwhite/MagicMirror
ajwhite/MagicMirror

Sometimes I look at myself in the mirror and I think that something is missing from my reflection. Thanks to @ajwhite I discovered that it was a React Native app being overlayed on my face. Check out this repo for some details on how you too can repurpose some ancient two year old tablet (lol two year old things are so old right?) into something that you can use to keep an eye on your stocks while you brush your teeth. Your dentist will thank you!

Sarcasm aside this is one of my favourite React Native projects so far, fantastic job @ajwhite!

chymtt/ReactNativeDropdownAndroid
chymtt/ReactNativeDropdownAndroid

If you need a Spinner in your Android app, and by Spinner I of course mean a dropdown, or as some people say a select menu, check this component out! High-five to anyone who explains to me why Android engineers decided to overload the term "Spinner" by using it for dropdowns.

jacobrosenthal/react-native-ble
jacobrosenthal/react-native-ble

"Central role BLE for react native noble api surface" - BLE stands for Bluetooth Low Energy.

nucleartux/react-native-circle-view
nucleartux/react-native-circle-view

"Circle progress bar for react native android using circle-view" - another Android native module, woo.

brentvatne/react-native-linear-gradient
brentvatne/react-native-linear-gradient

@nickhudkins went ahead and implemented the Android version of this library so your gradients can now be cross-platform! He works at Chalk + Chisel, the folks that made Discovery VR -- I'm not sure what they're feeding their engineers for breakfast there but I want some of it.

peachmeco/react-native-device-specs
peachmeco/react-native-device-specs

"RNDeviceSpecs detects the specifications of the device it is running on. Requiring or importing the module will give you an object with properties that describe the user's device."

BBB/react-native-card.io
BBB/react-native-card.io

Remember the first time you used your camera to enter your credit card information instead of manually entering it? Nobody forgets that. Well now you can do that with React Native in your own app. Check it out!

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!

Goodbits

Collect and curate content easily for brilliant newsletters. Try Goodbits for free!