Hi all! The torrid pace of development in react-native and the surrounding community has continued this past week and I've done my best to summarize what I remember to be the most interesting developments during that time. If you enjoy it, do me a favour and help someone out in an issue or submit a pull request to the react-native repo!
|
|
|
A TechCrunch article that explains in simple terms what React Native is and why it matters. Share the link with your boss or co-workers to get it on their radar, or your spouse so they can understand why your text editor is suddenly white looking and you have a little iPhone on your screen all of the time these days.
Joe Stanton wrote a similar but more technical article "React Native – When the Mobile Web Isn’t Enough" that is also well worth a perusal.
|
|
|
Free for this week! @tylermcginnis33 walks you through the fundamentals of react-native to create a Github Note Taker app - the price is right, why not try it or pass the link on to a friend?
(Note: I have no affiliation with Egghead and have nothing to gain from you using this, this is not an advertisement)
|
|
Highlights from Issues and Pull Requests
|
|
|
I wrote my own blog posts about native UI components last week (you can them at http://brentvatne.ca), but @sahrens has a lot more experience and is better suited to the job - he adds depth and breadth to the topic in this easy-to-read article - don't miss it! requireNativeComponent also landed as a replacement for createReactIOSNativeComponentClass and @sahrens updated the docs to reflect that here.
|
|
|
@robertjpayne takes the initiative and shows off an example of integrating a simple native component written in Swift into react-native! Check out the surrounding discussion and pitch in if this interests you! Subsequent pull request can be found here.
|
|
|
@vjeux points out a nifty trick that allows you to see your apps XHR requests in the the Network tab of Chrome when developing your app
|
|
|
@colinramsay implemented it and @rt2zz shared the following snippet to ensure we all know how it works:
<Image source={{uri: 'data:image/jpeg;base64,'+ base64ImageString, isStatic: true}} />
With this, you can display base64 encoded images easily! Or if you refactor for es6 interpolation:
<Image source={{uri: `data:image/jpeg;base64,${imageString}`, isStatic: true}} />
|
|
|
A related issue originally led to me creating react-native-status-bar-size, but @soheil pointed out an alternate solution - wrap your views in this:
<View style={{flex: 0, height: require('Dimensions').get('window').height}}>
|
|
|
This merged PR changes the bundle command from:
curl 'http://localhost:8081/Examples/SampleApp/index.ios.bundle?dev=false&minify=true' -o iOS/main.jsbundle
to
react-native bundle --minify
Expect it to land soon!
|
|
|
@tadeuzagallo sure knows his way around react-native - here I built out this unnecessarily complicated bridge module to grab the current opacity of a child element asynchronously (this is how the bridge works), when all I needed to do was grab its opacity out of the StyleSheetRegistry - neat little trick, albeit of limited usefulness generally, but ideal for this situation. If you're into this kind of information, also check out this discussion where I explain how you can get the layout properties for a given element by ref. Also, check out @tadeuzagallo's GithubPulse OSX app - it's a great way to keep your Github commit streaks going! I've been on a 33 day tear since I started using it.
|
|
|
@sahrens says in this issue "An engineer here at Facebook actually hacked up a prototype a while back - shouldn't be hugely difficult for someone to make it happen if you want to give it a go :)" - nobody has stepped up and volunteered to lead the charge yet, if you're willing then please chime in! I'd love to see this happen.
|
|
Highlights from react-native-community
|
|
|
iBeacon support for React Native. The API is very similar to the CoreLocation Objective-C one with the only major difference that regions are plain JavaScript objects.
|
|
|
CMMotionManager wrapper for react-native, exposing Accelerometer, Gyroscope, and Magnetometer.
|
|
|
A ListView with a sidebar to directly jump to sections - for example you could have the alphabet on the right side and sort items in the ListView alphabetically, then jump to a certain letter by just tapping it.
|
|
|
A new "Metrics" section has been added to the community repo - the ab library helps you run UI experiments and the complementary google-analytics library helps you to report on the results of those experiments.
|
|
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!
|
|
|
|