|
|
|
Community Interview #5 - Ken Wheeler
Ken Wheeler (twitter) (github) works at Formidable / Walmart Labs who you might know for spectacle, slick, mcfly (thanks a lot for perpetuating the Back to the Future references Ken, really), or as the winner of our Reactive Conference contest. According to github-awards.com, his worldwide ranking on Github for JavaScript is 61 out of about 600,000 developers, and 22 in the United States -- based off of number of stars on his repositories. He is also the creator of a young human female.
|
A new home for React Native feature prioritization
An example of a "product pain": Github Issues - incredibly difficult to prioritize and sort through issues.
As of writing this, the React Native repo has 807 open issues and I challenge you to find the top 5 most important things for the core team to work on by sorting through those. It's tough, really tough.
So on ProductPains you should post feature requests like "Get Android to feature parity with iOS" or "Offload some animations from JS thread for better perf" and just use the issues for bug reports.
|
|
Running by Gyroscope (Blog post)
If you're a regular reader of this newsletter you may remember Anand from a conversation I had with him several months ago, where he spoke about his experience building a then-private app using React Native.
Well the app is public now and I think it's one of the best React Native apps out there! If you're a runner, check the app out. If you're not a runner, consider becoming one because it's great fun. If you're not a runner and not interested in considering becoming a runner, then at the very least read this blog post or scrolling through and looking at the pretty pictures.
|
|
From Hackathon to React Native (Presentation video)
"Christopher Chedeau walks through the challenges involved in bringing the React JavaScript UI library to iOS. Some of these are technical, but there are also interesting people management challenges since, from an iOS developer perspective, React Native is a very bad looking proposition."
If you're tired of seeing amateurs such as myself give presentations, check out @vjeux's talk from QCon NYC some months ago.
|
React Native Radio by DevChat.tv (Podcast)
A new podcast! About React Native! And there are 7 episodes already! I've listened to a couple of episodes already and I'm very impressed. And hey, now that you're a runner, you should know that podcasts are a great way to pass time while you're out getting fit.
|
|
How to create Twitter exploding hearts (Blog post)
Regardless of where you stand on the Twitter star vs. heart debate, you might be curious about how to implement the heart animation. In this blog post, @browniefed teaches you that. It's pretty. Click through to see the animation at least.
|
|
Highlights from facebook/react-native
|
|
Replaced RCTSparseArray with NSDictionary
I asked @nicklockwood about this commit and he said: "we only added RCTSparseArray to make it clear these were mapped by NSNumber instead of string. Generics are better though."
Note that there might be breaking changes in your iOS native modules, if you use _bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, RCTSparseArray *viewRegistry) to act on your native view -- you will want to update that to the new signature with generics.
|
Implements `blurOnSubmit`
By default when you submit a TextInput it will be blurred (focus will be taken away, keyboard hidden), but if you want to do something like validate an error without hiding the keyboard, or automatically focus, you'll probably want to set blurOnSubmit to false, otherwise the keyboard will potentially slide in and out and make for an awkward experience.
Also check out this other PR from @dsibiki where he implements onKeyPress for TextInput
|
|
Add setPageWithoutAnimation to ViewPager
The most interesting thing here is that this diff is a simple example of how you can call functions directly on your underlying Android Views without going through props. This is the equivalent to React Native iOS's _bridge.uiManager addUIBlock pattern.
|
|
Initial checkin for Image within Text nodes
"This adds the basic support for embedding an image in a TextView" - support for this was recently added to iOS and now it's available for Android too! Expect to see more from @dmmiller in future newsletters! Please @dmmiller add a profile picture so I don't have to use this weird blocky thing 😅
|
|
'Update app properties in runtime' UIExplorer demo
Besides being a really cool example because there is a nested RCTRootView, this also shows how you can update your app properties (the props passed into the top level component) without reloading the entire root view, neat!
|
Custom fonts support added to Android
"It will first try to load typefaces inside the assets/fonts folder and if it doesn't find the right Typeface in that folder will fall back on the best matching system Typeface The supported custom fonts extensions are .ttf and .otf. For each font family the bold, italic and bold_italic variants are supported. Given a "family" font family the files in the assets/fonts folder need to be family.ttf(.otf) family_bold.ttf(.otf) family_italic.ttf(.otf) and family_bold_italic.ttf(.otf)" - awesome work @pasqualeanatriello
|
|
Implement android maxLength prop
In order to implement a maximum length on TextInput and not experience a slight flicker (blog post coming soon on why this is the case), you need to use the maxLength prop so this restriction can be applied on the native side. Thanks @nucleartux!
|
|
Prevent destroying activity on runtime changes
You probably noticed that when you rotate your Android device it appears to restart the app if orientation lock is not enabled. This commit fixes that and some other changes. I like this @satya164 guy.
|
Use elevation to implement shadows on Android
Shadows are essential to material design and an important missing piece from React Native Android right now. This pull request uses the elevation property of Android views implement shadows. This isn't cross-platform because there is no elevation property on iOS, so it's not ideal in the long-run, but it's certainly a welcome addition! Well played @corbt!
|
|
Enable minWidth /maxWidth /minHeight / maxHeight for iOS
I've heard more than a few requests for this feature so it's great to see it land. I imagine it must not have been implemented in css-layout until recently. Let's get it on Android now! Brought to you by @rocman, who has taught his infant son to drive so he can keep coding. I must be doing life wrong because this seems to be a trend with developers.
|
Open sourced RCTPasteboard
"RCTPasteboard is a very basic API for writing strings to the pasteboard. Useful for implementing 'copy to clipboard' functionality."
Related PSA: recently I've seen the occasional rant on Facebook/Twitter about Facebook for iOS looking into your clipboard and asking if you want to share something that you had copied there. This is not FB being creepy, this is a public API and also used by apps like Instapaper. So no need for FUD around this one. As an exercise, dear reader, I encourage you to submit a PR to implement this in RCTPasteboard -- it's pretty easy. This message was not brought to you by Facebook
|
|
UIRefreshControl added to ScrollView
Adds a onRefreshStart prop - a function that is provided with a endRefreshing function as its only argument, to be called once you are done performing whatever refreshing work you need to do.
|
|
Highlights from the community
|
|
benoitvallon/react-native-nw-react-calculator
This has to be the most starred React Native app on Github so it's probably not news to any of you, but I haven't mentioned it here before so I feel obliged. It's cross-platform natively on iOS/Android through React Native, on the desktop using the DOM "the tool formerly known as node-webkit" (NW.js) and same for the browser minus the NW.js bit.
|
|
taskrabbit/react-native-parsed-text
It's very common to need to highlight certain expressions from plaintext, such as @mentions and #hashtags, then make your app take some action when they are pressed. This component brought to you by the @taskrabbit team is one way you might approach the problem.
|
fraserxu/soundredux-native
This is an Android client for SoundCloud build in React Native "in an effort to try react-native along with redux." Great job @fraserxu!
|
|
oblador/react-native-progress
Some good looking progress indicators made by a good looking guy. Not yet available on Android because they depend on ReactNativeART.
|
auth0/react-native-lock-ios
"Auth0 is an authentication broker that supports social identity providers as well as enterprise identity providers such as Active Directory, LDAP, Google Apps and Salesforce."
I've tried Auth0 in the past and it seems like the easiest way to quickly drop authentication into your app -- and hey it's free up to 7,000 active users. It even supports passwordless login via sms, email, or touch id. Neato
|
|
tinycreative/react-native-dropbox-chooser
"The Chooser is the fastest way to get files from Dropbox into your iOS app. It's a small framework that enables your app to access files from Dropbox without having to worry about the complexities of implementing a file browser, OAuth, or managing uploads and storage."
|
FaridSafi/react-native-gifted-messenger
Nice looking chat interface built in React Native. I'm not convinced by the API - a bit more imperative than I like: I'd rather pass in some list of messages and have the component do the right thing than call appendMessages , but that's a style preference and it's a new project and maybe @FaridSafi has some plans for it :)
|
|
ptmt/npm-native
A second mention for @ptmt in the newsletter! This tool makes it possible for you to easily install a native iOS dependencies with npm-native --install path_to_lib.xcodeproj and uninstall with npm-native --uninstall path_to_lib.xcodeproj
|
|
luggg/react-native-android-snackbar
"Snackbar provides a lightweight feedback to users about an operation, such as saving a form or deleting a message. They are similar to Toasts, but are a bit more prominent and customizable." - nice one @pedro!
|
|
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!
|
Goodbits.io
"Newsletters should take minutes, not hours. Goodbits helps you quickly build email campaigns." That's their thing. True story, I once wore a Goodbits tshirt while cycling across the Golden Gate bridge. If you've read this far, you should probably at least try out Goodbits, because clearly you have time on your hands.
|
|
|
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!
|
|
|