Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
2d230bee787eda2cccd2b8906e8cd23a4cd0bfa2
react-native/docgen/core/metadata-blog.js
T
Hector Ramos 692d3f72fb Move to Docusaurus.
2017-08-31 10:38:26 -07:00

272 lines
120 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/**
* @generated
* @providesModule MetadataBlog
*/
module.exports = {
"files": [
{
"path": "2017/07/28/react-native-monthly-2.html",
"content": "\nThe React Native monthly meeting continues! On this session, we were joined by [Infinite Red](https://infinite.red/), great minds behind [Chain React, the React Native Conference](https://infinite.red/ChainReactConf). As most of the people here were presenting talks at Chain React, we pushed the meeting to a week later. Talks from the conference have been [posted online](https://www.youtube.com/playlist?list=PLFHvL21g9bk3RxJ1Ut5nR_uTZFVOxu522) and I encourage you to check them out. So, let's see what our teams are up to.\n\n## Teams\n\nOn this second meeting, we had 9 teams join us:\n\n- [Airbnb](https://github.com/airbnb)\n- [Callstack](https://github.com/callstack-io)\n- [Expo](https://github.com/expo)\n- [Facebook](https://github.com/facebook)\n- [GeekyAnts](https://github.com/GeekyAnts)\n- [Infinite Red](https://github.com/infinitered)\n- [Microsoft](https://github.com/microsoft)\n- [Shoutem](https://github.com/shoutem)\n- [Wix](https://github.com/wix)\n\n## Notes\n\nHere are the notes from each team:\n\n### Airbnb\n\n- Check out the [Airbnb repository](https://github.com/airbnb) for React Native related projects.\n\n### Callstack\n\n- [Mike Grabowski](https://github.com/grabbou) has been managing React Native's monthly releases as always, including a few betas that were pushed out. In particular, working on getting a v0.43.5 build published to npm since it unblocks Windows users!\n- Slow but consistent work is happening on [Haul](https://github.com/callstack-io/haul). There is a pull request that adds HMR, and other improvements have shipped. Recently got a few industry leaders to adopt it. Possibly planning to start a full-time paid work in that area.\n- [Michał Pierzchała](https://twitter.com/thymikee) from the [Jest](https://github.com/facebook/jest) team has joined us at Callstack this month. He will help maintain [Haul](https://github.com/callstack-io/haul) and possibly work on [Metro Bundler](https://github.com/facebook/metro-bundler) and [Jest](https://github.com/facebook/jest).\n- [Satyajit Sahoo](https://twitter.com/satya164) is now with us, yay!\n- Got a bunch of cool stuff coming up from our OSS department. In particular, working on bringing Material Palette API to React Native. Planning to finally release our native iOS kit which is aimed to provide 1:1 look & feel of native components.\n\n### Expo\n\n- Recently launched [Native Directory](https://native.directory) to help with discoverability and evaluation of libraries in React Native ecosystem. The problem: lots of libraries, hard to test, need to manually apply heuristics and not immediately obvious which ones are just the best ones that you should use. It's also hard to know if something is compatible with CRNA/Expo. So Native Directory tries to solve these problems. Check it out and [add your library](https://github.com/react-community/native-directory) to it. The list of libraries is in [here](https://github.com/react-community/native-directory/blob/master/react-native-libraries.json). This is just our first pass of it, and we want this to be owned and run by the community, not just Expo folks. So please pitch in if you think this is valuable and want to make it better!\n- Added initial support for installing npm packages in [Snack](https://snack.expo.io/) with Expo SDK 19. Let us know if you run into any issues with it, we are still working through some bugs. Along with Native Directory, this should make it easy to test libraries that have only JS dependencies, or dependencies included in [Expo SDK](https://github.com/expo/expo-sdk). Try it out:\n - [react-native-modal](https://snack.expo.io/ByBCD_2r-)\n - [react-native-animatable](https://snack.expo.io/SJfJguhrW)\n - [react-native-calendars](https://snack.expo.io/HkoXUdhr-)\n- [Released Expo SDK19](https://blog.expo.io/expo-sdk-v19-0-0-is-now-available-821a62b58d3d) with a bunch of improvements across the board, and we're now using the [updated Android JSC](https://github.com/SoftwareMansion/jsc-android-buildscripts).\n- Working on a guide in docs with [Alexander Kotliarskyi](https://github.com/frantic) with a list of tips on how to improve the user experience of your app. Please join in and add to the list or help write some of it!\n - Issue: [#14979](https://github.com/facebook/react-native/issues/14979)\n - Initial pull request: [#14993](https://github.com/facebook/react-native/pull/14993)\n- Continuing to work on: audio/video, camera, gestures (with Software Mansion, `react-native-gesture-handler`), GL camera integration and hoping to land some of these for the first time in SDK20 (August), and significant improvements to others by then as well. We're just getting started on building infrastructure into the Expo client for background work (geolocation, audio, handling notifications, etc.).\n- [Adam Miskiewicz](https://twitter.com/skevy) has made some nice progress on imitating the transitions from [UINavigationController](https://developer.apple.com/documentation/uikit/uinavigationcontroller) in [react-navigation](https://github.com/react-community/react-navigation). Check out an earlier version of it in [his tweet](https://twitter.com/skevy/status/884932473070735361) - release coming with it soon. Also check out `MaskedViewIOS` which he [upstreamed](https://github.com/facebook/react-native/commit/8ea6cea39a3db6171dd74838a6eea4631cf42bba). If you have the skills and desire to implement `MaskedView` for Android that would be awesome!\n\n### Facebook\n\n- Facebook is internally exploring being able to embed native [ComponentKit](http://componentkit.org/) and [Litho](https://fblitho.com/) components inside of React Native.\n- Contributions to React Native are very welcome! If you are wondering how you can contribute, the [\"How to Contribute\" guide](http://facebook.github.io/react-native/docs/contributing.html) describes our development process and lays out the steps to send your first pull request. There are other ways to contribute that do not require writing code, such as by triaging issues or updating the docs.\n - At the time of writing, React Native has **635** [open issues](https://github.com/facebook/react-native/issues) and **249** [open pull requests](https://github.com/facebook/react-native/pulls). This is overwhelming for our maintainers, and when things get fixed internally, it is difficult to ensure the relevant tasks are updated.\n - We are unsure what the best approach is to handle this while keeping the community satisfied. Some (but not all!) options include closing stale issues, giving significantly more people permissions to manage issues, and automatically closing issues that do not follow the issue template. We wrote a [\"What to Expect from Maintainers\"](http://facebook.github.io/react-native/docs/maintainers.html) guide to set expectations and avoid surprises. If you have ideas on how we can make this experience better for maintainers as well as ensuring people opening issues and pull requests feel heard and valued, please let us know!\n\n### GeekyAnts\n\n- We demoed the Designer Tool which works with React Native files on Chain React. Many attendees signed up for the waiting list. \n- We are also looking at other cross-platform solutions like [Google Flutter](https://flutter.io/) (a major comparison coming along), [Kotlin Native](https://github.com/JetBrains/kotlin-native), and [Apache Weex](https://weex.incubator.apache.org/) to understand the architectural differences and what we can learn from them to improve the overall performance of React Native.\n- Switched to [react-navigation](https://github.com/react-community/react-navigation) for most of our apps, which has improved the overall performance.\n- Also, announced [NativeBase Market](https://market.nativebase.io/) - A marketplace for React Native components and apps (for and by the developers).\n\n### Infinite Red\n\n- We want to introduce the [Reactotron](https://github.com/infinitered/reactotron). Check out the [introductory video](https://www.youtube.com/watch?v=tPBRfxswDjA). We'll be adding more features very soon!\n- Organised Chain React Conference. It was awesome, thanks all for coming! [The videos are now online!](https://www.youtube.com/playlist?list=PLFHvL21g9bk3RxJ1Ut5nR_uTZFVOxu522)\n\n### Microsoft\n\n- [CodePush](https://github.com/Microsoft/code-push) has now been integrated into [Mobile Center](https://mobile.azure.com/). Existing users will have no change in their workflow.\n - Some people have reported an issue with duplicate apps - they already had an app on Mobile Center. We are working on resolving them, but if you have two apps, let us know, and we can merge them for you.\n- Mobile Center now supports Push Notifications for CodePush. We also showed how a combination of Notifications and CodePush could be used for A/B testing apps - something unique to the ReactNative architecture.\n- [VSCode](https://github.com/Microsoft/vscode) has a known debugging issue with ReactNative - the next release of the extension in a couple of days will be fixing the issue.\n- Since there are many other teams also working on React Native inside Microsoft, we will work on getting better representation from all the groups for the next meeting. \n\n### Shoutem\n\n- Finished the process of making the React Native development easier on [Shoutem](https://shoutem.github.io/). You can use all the standard `react-native` commands when developing apps on Shoutem.\n- We did a lot of work trying to figure out how to best approach the profiling on React Native. A big chunk of [documentation](https://facebook.github.io/react-native/docs/performance.html) is outdated, and we'll do our best to create a pull request on the official docs or at least write some of our conclusions in a blog post.\n- Switching our navigation solution to [react-navigation](https://github.com/react-community/react-navigation), so we might have some feedback soon.\n- We released [a new HTML component](https://github.com/shoutem/ui/tree/develop/html) in our toolkit which transforms the raw HTML to the React Native components tree.\n\n### Wix\n\n- We started working on a pull request to [Metro Bundler](https://github.com/facebook/metro-bundler) with [react-native-repackager](https://github.com/wix/react-native-repackager) capabilities. We updated react-native-repackager to support RN 44 (which we use in production). We are using it for our mocking infrastructure for [detox](https://github.com/wix/detox).\n- We have been covering the Wix app in detox tests for the last three weeks. It's an amazing learning experience of how to reduce manual QA in an app of this scale (over 40 engineers). We have resolved several issues with detox as a result, a new version was just published. I am happy to report that we are living up to the \"zero flakiness policy\" and the tests are passing consistently so far.\n- Detox for Android is moving forward nicely. We are getting significant help from the community. We are expecting an initial version in about two weeks.\n- [DetoxInstruments](https://github.com/wix/detoxinstruments), our performance testing tool, is getting a little bigger than we originally intended. We are now planning to turn it into a standalone tool that will not be tightly coupled to detox. It will allow investigating the performance of iOS apps in general. It will also be integrated with detox so we can run automated tests on performance metrics.\n\n## Next session\n\nThe next session is scheduled for August 16, 2017. As this was only our second meeting, we'd like to know how do these notes benefit the React Native community. Feel free to ping me [on Twitter](https://twitter.com/TomislavTenodi) if you have any suggestion on how we should improve the output of the meeting.\n",
"publishedAt": "2017-07-28",
"excerpt": "The React Native monthly meeting continues! On this session, we were joined by Infinite Red, great minds behind Chain React, the React Native Conference. As most of the people here were presenting talks at Chain React, we pushed the meeting to a week later. Talks from the conference have been posted online and I encourage you to check them out. So, let's see what our teams are up to.",
"title": "React Native Monthly #2",
"author": "Tomislav Tenodi",
"authorTitle": "Product Manager at Shoutem",
"authorURL": "https://github.com/tenodi",
"authorImage": "https://pbs.twimg.com/profile_images/877237660225609729/bKFDwfAq.jpg",
"authorTwitter": "TomislavTenodi",
"category": "engineering"
},
{
"path": "2017/06/21/react-native-monthly-1.html",
"content": "\nAt [Shoutem](https://shoutem.github.io/), we've been fortunate enough to work with React Native from its very beginnings. We decided we wanted to be part of the amazing community from day one. Soon enough, we realized it's almost impossible to keep up with the pace the community was growing and improving. That's why we decided to organize a monthly meeting where all major React Native contributors can briefly present what their efforts and plans are.\n\n## Monthly meetings\n\nWe had our first session of the monthly meeting on June 14, 2017. The mission for React Native Monthly is simple and straightforward: **improve the React Native community**. Presenting teams' efforts eases collaboration between teams done offline.\n\n## Teams\n\nOn the first meeting, we had 8 teams join us:\n\n- [Airbnb](https://github.com/airbnb)\n- [Callstack](https://github.com/callstack-io)\n- [Expo](https://github.com/expo)\n- [Facebook](https://github.com/facebook)\n- [GeekyAnts](https://github.com/GeekyAnts)\n- [Microsoft](https://github.com/microsoft)\n- [Shoutem](https://github.com/shoutem)\n- [Wix](https://github.com/wix)\n\nWe hope to have more core contributors join the upcoming sessions!\n\n## Notes\n\nAs teams' plans might be of interest to a broader audience, we'll be sharing them here, on the React Native blog. So, here they are:\n\n### Airbnb\n\n- Plans to add some A11y (accessibility) APIs to `View` and the `AccessibilityInfo` native module.\n- Will be investigating adding some APIs to native modules on Android to allow for specifying threads for them to run on.\n- Have been investigating potential initialization performance improvements.\n- Have been investigating some more sophisticated bundling strategies to use on top of \"unbundle\".\n\n### Callstack\n\n- Looking into improving the release process by using [Detox](https://github.com/wix/detox) for E2E testing. Pull request should land soon.\n- Blob pull request they have been working on has been merged, subsequent pull requests coming up.\n- Increasing [Haul](https://github.com/callstack-io/haul) adoption across internal projects to see how it performs compared to [Metro Bundler](http://github.com/facebook/metro-bundler). Working on better multi-threaded performance with the Webpack team.\n- Internally, they have implemented a better infrastructure to manage open source projects. Plans to be getting more stuff out in upcoming weeks.\n- The React Native Europe conference is coming along, nothing interesting yet, but y'all invited!\n- Stepped back from [react-navigation](https://github.com/react-community/react-navigation) for a while to investigate alternatives (especially native navigations).\n\n### Expo\n\n- Working on making it possible to install npm modules in [Snack](https://snack.expo.io/), will be useful for libraries to add examples to documentation.\n- Working with [Krzysztof](https://github.com/kmagiera) and other people at [Software Mansion](https://github.com/softwaremansion) on a JSC update on Android and a gesture handling library.\n- [Adam Miskiewicz](https://github.com/skevy) is transitioning his focus towards [react-navigation](https://github.com/react-community/react-navigation).\n- [Create React Native App](https://github.com/react-community/create-react-native-app) is in the [Getting Started guide](https://facebook.github.io/react-native/docs/getting-started.html) in the docs. Expo wants to encourage library authors to explain clearly whether their lib works with CRNA or not, and if so, explain how to set it up.\n\n### Facebook\n\n- React Native's packager is now [Metro Bundler](https://github.com/facebook/metro-bundler), in an independent repo. The Metro Bundler team in London is excited to address the needs of the community, improve modularity for additional use-cases beyond React Native, and increase responsiveness on issues and PRs.\n- In the coming months, the React Native team will work on refining the APIs of primitive components. Expect improvements in layout quirks, accessibility, and flow typing.\n- The React Native team also plans on improving core modularity this year, by refactoring to fully support 3rd party platforms such as Windows and macOS.\n\n### GeekyAnts\n\n- The team is working on a UI/UX design app (codename: Builder) which directly works with `.js` files. Right now, it supports only React Native. It’s similar to Adobe XD and Sketch.\n- The team is working hard so that you can load up an existing React Native app in the editor, make changes (visually, as a designer) and save the changes directly to the JS file.\n- Folks are trying to bridge the gap between Designers and Developers and bring them on the same repo.\n- Also, [NativeBase](https://github.com/GeekyAnts/NativeBase) recently reached 5,000 GitHub stars.\n\n### Microsoft\n\n- [CodePush](https://github.com/Microsoft/code-push) has now been integrated into [Mobile Center](https://mobile.azure.com/). This is the first step in providing a much more integrated experience with distribution, analytics and other services. See their announcement [here](https://microsoft.github.io/code-push/articles/CodePushOnMobileCenter.html).\n- [VSCode](https://github.com/Microsoft/vscode) has a bug with debugging, they are working on fixing that right now and will have a new build.\n- Investigating [Detox](https://github.com/wix/detox) for Integration testing, looking at JSC Context to get variables alongside crash reports.\n\n### Shoutem\n\n- Making it easier to work on Shoutem apps with tools from the React Native community. You will be able to use all the React Native commands to run the apps created on [Shoutem](https://shoutem.github.io/).\n- Investigating profiling tools for React Native. They had a lot of problems setting it up and they will write some of the insights they discovered along the way.\n- Shoutem is working on making it easier to integrate React Native with existing native apps. They will document the concept that they developed internally in the company, in order to get the feedback from the community.\n\n### Wix\n\n- Working internally to adopt [Detox](https://github.com/wix/detox) to move significant parts of the Wix app to \"zero manual QA\". As a result, Detox is being used heavily in a production setting by dozens of developers and maturing rapidly.\n- Working to add support to the [Metro Bundler](https://github.com/facebook/metro-bundler) for overriding any file extension during the build. Instead of just \"ios\" and \"android\", it would support any custom extension like \"e2e\" or \"detox\". Plans to use this for E2E mocking. There's already a library out called [react-native-repackager](https://github.com/wix/react-native-repackager), now working on a PR.\n- Investigating automation of performance tests. This is a new repo called [DetoxInstruments](https://github.com/wix/DetoxInstruments). You can take a look, it's being developed open source.\n- Working with a contributor from KPN on Detox for Android and supporting real devices.\n- Thinking about \"Detox as a platform\" to allow building other tools that need to automate the simulator/device. An example is [Storybook](https://github.com/storybooks/react-native-storybook) for React Native or Ram's idea for integration testing.\n\n## Next session\n\nMeetings will be held every four weeks. The next session is scheduled for July 12, 2017. As we just started with this meeting, we'd like to know how do these notes benefit the React Native community. Feel free to ping me [on Twitter](https://twitter.com/TomislavTenodi) if you have any suggestion on what we should cover in the following sessions, or how we should improve the output of the meeting.\n",
"publishedAt": "2017-06-21",
"excerpt": "At Shoutem, we've been fortunate enough to work with React Native from its very beginnings. We decided we wanted to be part of the amazing community from day one. Soon enough, we realized it's almost impossible to keep up with the pace the community was growing and improving. That's why we decided to organize a monthly meeting where all major React Native contributors can briefly present what their efforts and plans are.",
"title": "React Native Monthly #1",
"author": "Tomislav Tenodi",
"authorTitle": "Product Manager at Shoutem",
"authorURL": "https://github.com/tenodi",
"authorImage": "https://pbs.twimg.com/profile_images/877237660225609729/bKFDwfAq.jpg",
"authorTwitter": "TomislavTenodi",
"category": "engineering"
},
{
"path": "2017/03/13/introducing-create-react-native-app.html",
"content": "\nToday we’re announcing [Create React Native App](https://github.com/react-community/create-react-native-app): a new tool that makes it significantly easier to get started with a React Native project! It’s heavily inspired by the design of [Create React App](https://github.com/facebookincubator/create-react-app) and is the product of a collaboration between [Facebook](https://code.facebook.com) and [Expo](https://expo.io) (formerly Exponent).\n\nMany developers struggle with installing and configuring React Native’s current native build dependencies, especially for Android. With Create React Native App, there’s no need to use Xcode or Android Studio, and you can develop for your iOS device using Linux or Windows. This is accomplished using the Expo app, which loads and runs CRNA projects written in pure JavaScript without compiling any native code.\n\nTry creating a new project (replace with suitable yarn commands if you have it installed):\n\n```\n$ npm i -g create-react-native-app\n$ create-react-native-app my-project\n$ cd my-project\n$ npm start\n```\n\nThis will start the React Native packager and print a QR code. Open it in the [Expo app](https://expo.io) to load your JavaScript. Calls to `console.log` are forwarded to your terminal. You can make use of any standard React Native APIs as well as the [Expo SDK](https://docs.expo.io/versions/latest/sdk/index.html).\n\n## What about native code?\n\nMany React Native projects have Java or Objective-C/Swift dependencies that need to be compiled. The Expo app does include APIs for camera, video, contacts, and more, and bundles popular libraries like [Airbnb’s react-native-maps](https://docs.expo.io/versions/v14.0.0/sdk/map-view.html), or [Facebook authentication](https://docs.expo.io/versions/latest/sdk/facebook.html). However if you need a native code dependency that Expo doesn’t bundle then you’ll probably need to have your own build configuration for it. Just like Create React App, “ejecting” is supported by CRNA.\n\nYou can run `npm run eject` to get a project very similar to what `react-native init` would generate. At that point you’ll need Xcode and/or Android Studio just as you would if you started with `react-native init` , adding libraries with `react-native link` will work, and you’ll have full control over the native code compilation process.\n\n## Questions? Feedback?\n\nCreate React Native App is now stable enough for general use, which means we’re very eager to hear about your experience using it! You can find me [on Twitter](https://twitter.com/dika10sune) or open an issue on [the GitHub repository](https://github.com/react-community/create-react-native-app). Pull requests are very welcome!\n",
"publishedAt": "2017-03-13",
"excerpt": "Today we’re announcing Create React Native App: a new tool that makes it significantly easier to get started with a React Native project! It’s heavily inspired by the design of Create React App and is the product of a collaboration between Facebook and Expo (formerly Exponent).",
"title": "Introducing Create React Native App",
"author": "Adam Perry",
"authorTitle": "Software Engineer at Expo",
"authorURL": "https://github.com/dikaiosune",
"authorImage": "https://avatars2.githubusercontent.com/u/6812281",
"authorTwitter": "dika10sune",
"category": "engineering",
"youtubeVideoId": "9baaVjGdBqs"
},
{
"path": "2017/03/13/idx-the-existential-function.html",
"content": "\nAt Facebook, we often need to access deeply nested values in data structures fetched with GraphQL. On the way to accessing these deeply nested values, it is common for one or more intermediate fields to be nullable. These intermediate fields may be null for a variety of reasons, from failed privacy checks to the mere fact that null happens to be the most flexible way to represent non-fatal errors.\n\nUnfortunately, accessing these deeply nested values is currently tedious and verbose.\n\n```javascript\nprops.user &&\nprops.user.friends &&\nprops.user.friends[0] &&\nprops.user.friends[0].friends\n```\n\nThere is [an ECMAScript proposal to introduce the existential operator](https://github.com/claudepache/es-optional-chaining) which will make this much more convenient. But until a time when that proposal is finalized, we want a solution that improves our quality of life, maintains existing language semantics, and encourages type safety with Flow.\n\nWe came up with an existential _function_ we call `idx`.\n\n```javascript\nidx(props, _ => _.user.friends[0].friends)\n```\n\nThe invocation in this code snippet behaves similarly to the boolean expression in the code snippet above, except with significantly less repetition. The `idx` function takes exactly two arguments:\n\n- Any value, typically an object or array into which you want to access a nested value.\n- A function that receives the first argument and accesses a nested value on it.\n\nIn theory, the `idx` function will try-catch errors that are the result of accessing properties on null or undefined. If such an error is caught, it will return either null or undefined. (And you can see how this might be implemented in [idx.js](https://github.com/facebookincubator/idx/blob/master/packages/idx/src/idx.js).)\n\nIn practice, try-catching every nested property access is slow, and differentiating between specific kinds of TypeErrors is fragile. To deal with these shortcomings, we created a Babel plugin that transforms the above `idx` invocation into the following expression:\n\n```javascript\nprops.user == null ? props.user :\nprops.user.friends == null ? props.user.friends :\nprops.user.friends[0] == null ? props.user.friends[0] :\nprops.user.friends[0].friends\n```\n\nFinally, we added a custom Flow type declaration for `idx` that allows the traversal in the second argument to be properly type-checked while permitting nested access on nullable properties.\n\nThe function, Babel plugin, and Flow declaration are now [available on GitHub](https://github.com/facebookincubator/idx). They are used by installing the **idx** and **babel-plugin-idx** npm packages, and adding “idx” to the list of plugins in your `.babelrc` file.\n",
"publishedAt": "2017-03-13",
"excerpt": "At Facebook, we often need to access deeply nested values in data structures fetched with GraphQL. On the way to accessing these deeply nested values, it is common for one or more intermediate fields to be nullable. These intermediate fields may be null for a variety of reasons, from failed privacy checks to the mere fact that null happens to be the most flexible way to represent non-fatal errors.",
"title": "idx: The Existential Function",
"author": "Timothy Yung",
"authorTitle": "Engineering Manager at Facebook",
"authorURL": "https://github.com/yungsters",
"authorImage": "https://pbs.twimg.com/profile_images/1592444107/image.jpg",
"authorTwitter": "yungsters",
"category": "engineering"
},
{
"path": "2017/03/13/better-list-views.html",
"content": "\nMany of you have started playing with some of our new List components already after our [teaser announcement in the community group](https://www.facebook.com/groups/react.native.community/permalink/921378591331053), but we are officially announcing them today! No more `ListView`s or `DataSource`s, stale rows, ignored bugs, or excessive memory consumption - with the latest React Native March 2017 release candidate (`0.43-rc.1`) you can pick from the new suite of components what best fits your use-case, with great perf and feature sets out of the box:\n\n### [`<FlatList>`](https://facebook.github.io/react-native/releases/next/docs/flatlist.html) ###\n\nThis is the workhorse component for simple, performant lists. Provide an array of data and a `renderItem` function and you're good to go:\n\n```\n<FlatList\n data={[{title: 'Title Text', key: 'item1'}, ...]}\n renderItem={({item}) => <ListItem title={item.title} />}\n/>\n```\n\n### [`<SectionList>`](https://facebook.github.io/react-native/releases/next/docs/sectionlist.html) ###\n\nIf you want to render a set of data broken into logical sections, maybe with section headers (e.g. in an alphabetical address book), and potentially with heterogeneous data and rendering (such as a profile view with some buttons followed by a composer, then a photo grid, then a friend grid, and finally a list of stories), this is the way to go.\n\n```\n<SectionList\n renderItem={({item}) => <ListItem title={item.title} />}\n renderSectionHeader={({section}) => <H1 title={section.key} />}\n sections={[ // homogenous rendering between sections\n {data: [...], key: ...},\n {data: [...], key: ...},\n {data: [...], key: ...},\n ]}\n/>\n\n<SectionList\n sections={[ // heterogeneous rendering between sections\n {data: [...], key: ..., renderItem: ...},\n {data: [...], key: ..., renderItem: ...},\n {data: [...], key: ..., renderItem: ...},\n ]}\n/>\n```\n\n### [`<VirtualizedList>`](https://facebook.github.io/react-native/releases/next/docs/virtualizedlist.html) ##\n\nThe implementation behind the scenes with a more flexible API. Especially handy if your data is not in a plain array (e.g. an immutable list).\n\n## Features ##\n\nLists are used in many contexts, so we packed the new components full of features to handle the majority of use cases out of the box:\n\n* Scroll loading (`onEndReached`).\n* Pull to refresh (`onRefresh` / `refreshing`).\n* [Configurable](https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Lists/ViewabilityHelper.js) viewability (VPV) callbacks (`onViewableItemsChanged` / `viewabilityConfig`).\n* Horizontal mode (`horizontal`).\n* Intelligent item and section separators.\n* Multi-column support (`numColumns`)\n* `scrollToEnd`, `scrollToIndex`, and `scrollToItem`\n* Better Flow typing.\n\n### Some Caveats ###\n\n- The internal state of item subtrees is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.\n\n- These components are based on `PureComponent` which means that they will not re-render if `props` remains shallow-equal. Make sure that everything your `renderItem` function depends on directly is passed as a prop that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state. For example:\n\n ```javascript\n <FlatList\n data={this.state.data}\n renderItem={({item}) => <MyItem\n item={item}\n onPress={() => this.setState((oldState) => ({\n selected: { // New instance breaks `===`\n ...oldState.selected, // copy old data\n [item.key]: !oldState.selected[item.key], // toggle\n }}))\n }\n selected={\n !!this.state.selected[item.key] // renderItem depends on state\n }\n />}\n selected={ // Can be any prop that doesn't collide with existing props\n this.state.selected // A change to selected should re-render FlatList\n }\n />\n ```\n\n- In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.\n\n- By default, these new lists look for a `key` prop on each item and use that for the React key. Alternatively, you can provide a custom `keyExtractor` prop.\n\n## Performance ##\n\nBesides simplifying the API, the new list components also have significant performance enhancements, the main one being nearly constant memory usage for any number of rows. This is done by 'virtualizing' elements that are outside of the render window by completely unmounting them from the component hierarchy and reclaiming the JS memory from the react components, along with the native memory from the shadow tree and the UI views. This has a catch which is that internal component state will not be preserved, so **make sure you track any important state outside of the components themselves, e.g. in Relay or Redux or Flux store.**\n\nLimiting the render window also reduces the amount of work that needs to be done by React and the native platform, e.g from view traversals. Even if you are rendering the last of a million elements, with these new lists there is no need to iterate through all those elements in order to render. You can even jump to the middle with `scrollToIndex` without excessive rendering.\n\nWe've also made some improvements with scheduling which should help with application responsiveness. Items at the edge of the render window are rendered infrequently and at a lower priority after any active gestures or animations or other interactions have completed.\n\n## Advanced Usage ##\n\nUnlike `ListView`, all items in the render window are re-rendered any time any props change. Often this is fine because the windowing reduces the number of items to a constant number, but if your items are on the complex side, you should make sure to follow React best practices for performance and use `React.PureComponent` and/or `shouldComponentUpdate` as appropriate within your components to limit re-renders of the recursive subtree.\n\nIf you can calculate the height of your rows without rendering them, you can improve the user experience by providing the `getItemLayout` prop. This makes it much smoother to scroll to specific items with e.g. `scrollToIndex`, and will improve the scroll indicator UI because the height of the content can be determined without rendering it.\n\nIf you have an alternative data type, like an immutable list, `<VirtualizedList>` is the way to go. It takes a `getItem` prop that lets you return the item data for any given index and has looser flow typing.\n\nThere are also a bunch of parameters you can tweak if you have an unusual use case. For example, you can use `windowSize` to trade off memory usage vs. user experience, `maxToRenderPerBatch` to adjust fill rate vs. responsiveness, `onEndReachedThreshold` to control when scroll loading happens, and more.\n\n## Future Work ##\n\n* Migration of existing surfaces (ultimately deprecation of `ListView`).\n* More features as we see/hear the need (let us know!).\n* Sticky section header support.\n* More performance optimizations.\n* Support functional item components with state.\n",
"publishedAt": "2017-03-13",
"excerpt": "Many of you have started playing with some of our new List components already after our teaser announcement in the community group, but we are officially announcing them today! No more ListViews or DataSources, stale rows, ignored bugs, or excessive memory consumption - with the latest React Native March 2017 release candidate (0.43-rc.1) you can pick from the new suite of components what best fits your use-case, with great perf and feature sets out of the box:",
"title": "Better List Views in React Native",
"author": "Spencer Ahrens",
"authorTitle": "Software Engineer at Facebook",
"authorURL": "https://github.com/sahrens",
"authorImage": "https://avatars1.githubusercontent.com/u/1509831",
"authorTwitter": "sahrens2012",
"category": "engineering"
},
{
"path": "2017/02/14/using-native-driver-for-animated.html",
"content": "\nFor the past year, we've been working on improving performance of animations that use the Animated library. Animations are very important to create a beautiful user experience but can also be hard to do right. We want to make it easy for developers to create performant animations without having to worry about some of their code causing it to lag.\n\n## What is this?\n\nThe Animated API was designed with a very important constraint in mind, it is serializable. This means we can send everything about the animation to native before it has even started and allows native code to perform the animation on the UI thread without having to go through the bridge on every frame. It is very useful because once the animation has started, the JS thread can be blocked and the animation will still run smoothly. In practice this can happen a lot because user code runs on the JS thread and React renders can also lock JS for a long time.\n\n## A bit of history...\n\nThis project started about a year ago, when Expo built the li.st app on Android. [Krzysztof Magiera](https://twitter.com/kzzzf) was contracted to build the initial implementation on Android. It ended up working well and li.st was the first app to ship with native driven animations using Animated. A few months later, [Brandon Withrow](https://github.com/buba447) built the initial implementation on iOS. After that, [Ryan Gomba](https://twitter.com/ryangomba) and myself worked on adding missing features like support for `Animated.event` as well as squash bugs we found when using it in production apps. This was truly a community effort and I would like to thanks everyone that was involved as well as Expo for sponsoring a large part of the development. It is now used by `Touchable` components in React Native as well as for navigation animations in the newly released [React Navigation](https://github.com/react-community/react-navigation) library.\n\n## How does it work?\n\nFirst, let's check out how animations currently work using Animated with the JS driver. When using Animated, you declare a graph of nodes that represent the animations that you want to perform, and then use a driver to update an Animated value using a predefined curve. You may also update an Animated value by connecting it to an event of a `View` using `Animated.event`.\n\n![](/react-native/blog/img/animated-diagram.png)\n\nHere's a breakdown of the steps for an animation and where it happens:\n\n- JS: The animation driver uses `requestAnimationFrame` to execute on every frame and update the value it drives using the new value it calculates based on the animation curve.\n- JS: Intermediate values are calculated and passed to a props node that is attached to a `View`.\n- JS: The `View` is updated using `setNativeProps`.\n- JS to Native bridge.\n- Native: The `UIView` or `android.View` is updated.\n\nAs you can see, most of the work happens on the JS thread. If it is blocked the animation will skip frames. It also needs to go through the JS to Native bridge on every frame to update native views.\n\nWhat the native driver does is move all of these steps to native. Since Animated produces a graph of animated nodes, it can be serialized and sent to native only once when the animation starts, eliminating the need to callback into the JS thread; the native code can take care of updating the views directly on the UI thread on every frame.\n\nHere's an example of how we can serialize an animated value and an interpolation node (not the exact implementation, just an example).\n\nCreate the native value node, this is the value that will be animated:\n```\nNativeAnimatedModule.createNode({\n id: 1,\n type: 'value',\n initialValue: 0,\n});\n```\n\nCreate the native interpolation node, this tells the native driver how to interpolate a value:\n```\nNativeAnimatedModule.createNode({\n id: 2,\n type: 'interpolation',\n inputRange: [0, 10],\n outputRange: [10, 0],\n extrapolate: 'clamp',\n});\n```\n\nCreate the native props node, this tells the native driver which prop on the view it is attached to:\n```\nNativeAnimatedModule.createNode({\n id: 3,\n type: 'props',\n properties: ['style.opacity'],\n});\n```\n\nConnect nodes together:\n```\nNativeAnimatedModule.connectNodes(1, 2);\nNativeAnimatedModule.connectNodes(2, 3);\n```\n\nConnect the props node to a view:\n```\nNativeAnimatedModule.connectToView(3, ReactNative.findNodeHandle(viewRef));\n```\n\nWith that, the native animated module has all the info it needs to update the native views directly without having to go to JS to calculate any value.\n\nAll there is left to do is actually start the animation by specifying what type of animation curve we want and what animated value to update. Timing animations can also be simplified by calculating every frame of the animation in advance in JS to make the native implementation smaller.\n```\nNativeAnimatedModule.startAnimation({\n type: 'timing',\n frames: [0, 0.1, 0.2, 0.4, 0.65, ...],\n animatedValueId: 1,\n});\n```\n\nAnd now here's the breakdown of what happens when the animation runs:\n\n- Native: The native animation driver uses `CADisplayLink` or `android.view.Choreographer` to execute on every frame and update the value it drives using the new value it calculates based on the animation curve.\n- Native: Intermediate values are calculated and passed to a props node that is attached to a native view.\n- Native: The `UIView` or `android.View` is updated.\n\nAs you can see, no more JS thread and no more bridge which means faster animations! 🎉🎉\n\n## How do I use this in my app?\n\nFor normal animations the answer is simple, just add `useNativeDriver: true` to the animation config when starting it.\n\nBefore:\n```\nAnimated.timing(this.state.animatedValue, {\n toValue: 1,\n duration: 500,\n}).start();\n```\nAfter:\n```\nAnimated.timing(this.state.animatedValue, {\n toValue: 1,\n duration: 500,\n useNativeDriver: true, // <-- Add this\n}).start();\n```\n\nAnimated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.\n\nIt also works with `Animated.event`, this is very useful if you have an animation that must follow the scroll position because without the native driver it will always run a frame behind of the gesture because of the async nature of React Native.\n\nBefore:\n```\n<ScrollView\n scrollEventThrottle={16}\n onScroll={Animated.event(\n [{ nativeEvent: { contentOffset: { y: this.state.animatedValue } } }]\n )}\n>\n {content}\n</ScrollView>\n```\nAfter:\n```\n<Animated.ScrollView // <-- Use the Animated ScrollView wrapper\n scrollEventThrottle={1} // <-- Use 1 here to make sure no events are ever missed\n onScroll={Animated.event(\n [{ nativeEvent: { contentOffset: { y: this.state.animatedValue } } }],\n { useNativeDriver: true } // <-- Add this\n )}\n>\n {content}\n</Animated.ScrollView>\n```\n\n## Caveats\n\nNot everything you can do with Animated is currently supported in Native Animated. The main limitation is that you can only animate non-layout properties, things like `transform` and `opacity` will work but flexbox and position properties won't. Another one is with `Animated.event`, it will only work with direct events and not bubbling events. This means it does not work with `PanResponder` but does work with things like `ScrollView#onScroll`.\n\nNative Animated has also been part of React Native for quite a while but has never been documented because it was considered experimental. Because of that make sure you are using a recent version (0.40+) of React Native if you want to use this feature.\n\n## Resources\n\nFor more information about animated I recommend watching [this talk](https://www.youtube.com/watch?v=xtqUJVqpKNo) by [Christopher Chedeau](https://twitter.com/Vjeux).\n\nIf you want a deep dive into animations and how offloading them to native can improve user experience there is also [this talk](https://www.youtube.com/watch?v=qgSMjYWqBk4) by [Krzysztof Magiera](https://twitter.com/kzzzf).\n",
"publishedAt": "2017-02-14",
"excerpt": "For the past year, we've been working on improving performance of animations that use the Animated library. Animations are very important to create a beautiful user experience but can also be hard to do right. We want to make it easy for developers to create performant animations without having to worry about some of their code causing it to lag.",
"title": "Using Native Driver for Animated",
"author": "Janic Duplessis",
"authorTitle": "Software Engineer at App & Flow",
"authorURL": "https://twitter.com/janicduplessis",
"authorImage": "https://secure.gravatar.com/avatar/8d6b6c0f5b228b0a8566a69de448b9dd?s=128",
"authorTwitter": "janicduplessis",
"category": "engineering"
},
{
"path": "2017/01/07/monthly-release-cadence.html",
"content": "\nShortly after React Native was introduced, we started releasing every two weeks to help the community adopt new features, while keeping versions stable for production use. At Facebook we had to stabilize the codebase every two weeks for the release of our production iOS apps, so we decided to release the open source versions at the same pace. Now, many of the Facebook apps ship once per week, especially on Android. Because we ship from master weekly, we need to keep it quite stable. So the bi-weekly release cadence doesn't even benefit internal contributors anymore.\n\nWe frequently hear feedback from the community that the release rate is hard to keep up with. Tools like [Expo](https://expo.io/) had to skip every other release in order to manage the rapid change in version. So it seems clear that the bi-weekly releases did not serve the community well.\n\n### Now releasing monthly\n\nWe're happy to announce the new monthly release cadence, and the December 2016 release, `v0.40`, which has been stabilizing for all last month and is ready to adopt. (Just make sure to [update headers in your native modules on iOS](https://github.com/facebook/react-native/releases/tag/v0.40.0)).\n\nAlthough it may vary a few days to avoid weekends or handle unforeseen issues, you can now expect a given release to be available on the first day of the month, and released on the last.\n\n### Use the current month for the best support\n\nThe January release candidate is ready to try, and you can [see what's new here](https://github.com/facebook/react-native/releases/tag/v0.41.0-rc.0).\n\nTo see what changes are coming and provide better feedback to React Native contributors, always use the current month's release candidate when possible. By the time each version is released at the end of the month, the changes it contains will have been shipped in production Facebook apps for over two weeks.\n\nYou can easily upgrade your app with the new [react-native-git-upgrade](http://facebook.github.io/react-native/blog/2016/12/05/easier-upgrades.html) command:\n\n```\nnpm install -g react-native-git-upgrade\nreact-native-git-upgrade 0.41.0-rc.0\n```\n\nWe hope this simpler approach will make it easier for the community to keep track of changes in React Native, and to adopt new versions as quickly as possible!\n\n(Thanks go to [Martin Konicek](https://github.com/mkonicek) for coming up with this plan and [Mike Grabowski](https://github.com/grabbou) for making it happen)\n",
"publishedAt": "2017-01-07",
"excerpt": "Shortly after React Native was introduced, we started releasing every two weeks to help the community adopt new features, while keeping versions stable for production use. At Facebook we had to stabilize the codebase every two weeks for the release of our production iOS apps, so we decided to release the open source versions at the same pace. Now, many of the Facebook apps ship once per week, especially on Android. Because we ship from master weekly, we need to keep it quite stable. So the bi-weekly release cadence doesn't even benefit internal contributors anymore.",
"title": "A Monthly Release Cadence: Releasing December and January RC",
"author": "Eric Vicenti",
"authorTitle": "Engineer at Facebook",
"authorURL": "https://twitter.com/EricVicenti",
"authorImage": "https://secure.gravatar.com/avatar/077ad5372b65567fe952a99f3b627048?s=128",
"authorTwitter": "EricVicenti",
"category": "announcements"
},
{
"path": "2016/12/05/easier-upgrades.html",
"content": "\nUpgrading to new versions of React Native has been difficult. You might have seen something like this before:\n\n![](/react-native/blog/img/git-upgrade-conflict.png)\n\nNone of those options is ideal. By overwriting the file we lose our local changes. By not overwriting we don't get the latest updates.\n\nToday I am proud to introduce a new tool that helps solve this problem. The tool is called `react-native-git-upgrade` and uses Git behind the scenes to resolve conflicts automatically whenever possible.\n\n## Usage\n\n> **Requirement**: Git has to be available in the `PATH`. Your project doesn't have to be managed by Git.\n\nInstall `react-native-git-upgrade` globally:\n\n```shell\n$ npm install -g react-native-git-upgrade\n```\nor, using [Yarn](https://yarnpkg.com/):\n\n```shell\n$ yarn global add react-native-git-upgrade\n```\n\nThen, run it inside your project directory:\n\n```shell\n$ cd MyProject\n$ react-native-git-upgrade 0.38.0\n```\n\n> Note: Do **not** run 'npm install' to install a new version of `react-native`. The tool needs to be able to compare the old and new project template to work correctly. Simply run it inside your app folder as shown above, while still on the old version.\n\nExample output:\n\n![](/react-native/blog/img/git-upgrade-output.png)\n\nYou can also run `react-native-git-upgrade` with no arguments to upgrade to the latest version of React Native.\n\nWe try to preserve your changes in iOS and Android build files, so you don't need to run `react-native link` after an upgrade.\n\nWe have designed the implementation to be as little intrusive as possible. It is entirely based on a local Git repository created on-the-fly in a temporary directory. It won't interfere with your project repository (no matter what VCS you use: Git, SVN, Mercurial, ... or none). Your sources are restored in case of unexpected errors.\n\n## How does it work?\n\nThe key step is generating a Git patch. The patch contains all the changes made in the React Native templates between the version your app is using and the new version.\n\nTo obtain this patch, we need to generate an app from the templates embedded in the `react-native` package inside your `node_modules` directory (these are the same templates the `react-native init` commands uses). Then, after the native apps have been generated from the templates in both the current version and the new version, Git is able to produce a patch that is adapted to your project (i.e. containing your app name):\n\n```\n[...]\n\ndiff --git a/ios/MyAwesomeApp/Info.plist b/ios/MyAwesomeApp/Info.plist\nindex e98ebb0..2fb6a11 100644\n--- a/ios/MyAwesomeApp/Info.plist\n+++ b/ios/MyAwesomeApp/Info.plist\n@@ -45,7 +45,7 @@\n \t\t<dict>\n \t\t\t<key>localhost</key>\n \t\t\t<dict>\n-\t\t\t\t<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>\n+\t\t\t\t<key>NSExceptionAllowsInsecureHTTPLoads</key>\n \t\t\t\t<true/>\n \t\t\t</dict>\n \t\t</dict>\n[...]\n```\n\nAll we need now is to apply this patch to your source files. While the old `react-native upgrade` process would have prompted you for any small difference, Git is able to merge most of the changes automatically using its 3-way merge algorithm and eventually leave us with familiar conflict delimiters:\n\n```\n\t\t13B07F951A680F5B00A75B9A /* Release */ = {\n\t\t\tisa = XCBuildConfiguration;\n\t\t\tbuildSettings = {\n\t\t\t\tASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;\n<<<<<<< ours\n\t\t\t\tCODE_SIGN_IDENTITY = \"iPhone Developer\";\n\t\t\t\tFRAMEWORK_SEARCH_PATHS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"$(PROJECT_DIR)/HockeySDK.embeddedframework\",\n\t\t\t\t\t\"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework\",\n\t\t\t\t);\n=======\n\t\t\t\tCURRENT_PROJECT_VERSION = 1;\n>>>>>>> theirs\n\t\t\t\tHEADER_SEARCH_PATHS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,\n\t\t\t\t\t\"$(SRCROOT)/../node_modules/react-native/React/**\",\n\t\t\t\t\t\"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**\",\n\t\t\t\t);\n```\n\nThese conflicts are generally easy to reason about. The delimiter **ours** stands for \"your team\" whereas **theirs** could be seen as \"the React Native team\".\n\n## Why introduce a new global package?\n\nReact Native comes with a global CLI (the [react-native-cli](https://www.npmjs.com/package/react-native-cli) package) which delegates commands to the local CLI embedded in the `node_modules/react-native/local-cli` directory.\n\nAs we mentioned above, the process has to be started from your current React Native version. If we had embedded the implementation in the local-cli, you wouldn't be able to enjoy this feature when using old versions of React Native. For example, you wouldn't be able to upgrade from 0.29.2 to 0.38.0 if this new upgrade code was only released in 0.38.0.\n\nUpgrading based on Git is a big improvement in developer experience and it is important to make it available to everyone. By using a separate package [react-native-git-upgrade](https://www.npmjs.com/package/react-native-git-upgrade) installed globally you can use this new code today no matter what version of React Native your project is using.\n\nOne more reason is the recent [Yeoman wipeout](https://twitter.com/martinkonicek/status/800730190141857793) by Martin Konicek. We didn't want to get these Yeoman dependencies back into the `react-native` package to be able to evaluate the old template in order to create the patch.\n\n## Try it out and provide feedback\n\nAs a conclusion, I would say, enjoy the feature and feel free [to suggest improvements, report issues](https://github.com/facebook/react-native/issues) and especially [send pull requests](https://github.com/facebook/react-native/pulls). Each environment is a bit different and each React Native project is different, and we need your feedback to make this work well for everyone.\n\n### Thank you!\n\nI would like to thank the awesome companies [Zenika](http://www.zenika.com) and [M6 Web](http://www.groupem6.fr/le-groupe_en/activites/diversifications/m6-web.html) without whom none of this would have been possible!\n",
"publishedAt": "2016-12-05",
"excerpt": "Upgrading to new versions of React Native has been difficult. You might have seen something like this before:",
"title": "Easier Upgrades Thanks to Git",
"author": "Nicolas Cuillery",
"authorTitle": "JavaScript consultant and trainer at Zenika",
"authorURL": "https://twitter.com/ncuillery",
"authorImage": "https://fr.gravatar.com/userimage/78328995/184460def705a160fd8edadc04f60eaf.jpg?size=128",
"authorTwitter": "ncuillery",
"category": "announcements"
},
{
"path": "2016/11/08/introducing-button-yarn-and-a-public-roadmap.html",
"content": "\nWe have heard from many people that there is so much work happening with React Native, it can be tough to keep track of what's going on. To help communicate what work is in progress, we are now publishing a [roadmap for React Native](https://github.com/facebook/react-native/wiki/Roadmap). At a high level, this work can be broken down into three priorities:\n\n- **Core Libraries**. Adding more functionality to the most useful components and APIs.\n- **Stability**. Improve the underlying infrastructure to reduce bugs and improve code quality.\n- **Developer Experience**. Help React Native developers move faster\n\nIf you have suggestions for features that you think would be valuable on the roadmap, check out [Canny](https://react-native.canny.io/feature-requests), where you can suggest new features and discuss existing proposals.\n\n## What's new in React Native\n\n[Version 0.37 of React Native](https://github.com/facebook/react-native/releases/tag/v0.37.0), released today, introduces a new core component to make it really easy to add a touchable Button to any app. We're also introducing support for the new [Yarn](https://yarnpkg.com/) package manager, which should speed up the whole process of updating your app's dependencies.\n\n## Introducing Button\n\nToday we're introducing a basic `<Button />` component that looks great on every platform. This addresses one of the most common pieces of feedback we get: React Native is one of the only mobile development toolkits without a button ready to use out of the box.\n\n![Simple Button on Android, iOS](/react-native/blog/img/button-android-ios.png)\n\n```\n<Button\n onPress={onPressMe}\n title=\"Press Me\"\n accessibilityLabel=\"Learn more about this Simple Button\"\n/>\n```\n\nExperienced React Native developers know how to make a button: use TouchableOpacity for the default look on iOS, TouchableNativeFeedback for the ripple effect on Android, then apply a few styles. Custom buttons aren't particularly hard to build or install, but we aim to make React Native radically easy to learn. With the addition of a basic button into core, newcomers will be able to develop something awesome in their first day, rather than spending that time formatting a Button and learning about Touchable nuances.\n\nButton is meant to work great and look native on every platform, so it won't support all the bells and whistles that custom buttons do. It is a great starting point, but is not meant to replace all your existing buttons. To learn more, check out the [new Button documentation](http://facebook.github.io/react-native/docs/button.html), complete with a runnable example!\n\n\n## Speed up `react-native init` using Yarn\n\nYou can now use [Yarn](https://yarnpkg.com/), the new package manager for JavaScript, to speed up `react-native init` significantly. To see the speedup please [install yarn](https://yarnpkg.com/en/docs/install) and upgrade your `react-native-cli` to 1.2.0:\n\n```\n$ npm install -g react-native-cli\n```\n\nYou should now see “Using yarn” when setting up new apps:\n\n![Using yarn](/react-native/blog/img/yarn-rncli.png)\n\nIn simple local testing `react-native init` finished in **about 1 minute on a good network** (vs around 3 minutes when using npm 3.10.8). Installing yarn is optional but highly recommended.\n\n## Thank you!\n\nWe'd like to thank everyone who contributed to this release. The full [release notes](https://github.com/facebook/react-native/releases/tag/v0.37.0) are now available on GitHub. With over two dozen bug fixes and new features, React Native just keeps getting better thanks to you.\n",
"publishedAt": "2016-11-08",
"excerpt": "We have heard from many people that there is so much work happening with React Native, it can be tough to keep track of what's going on. To help communicate what work is in progress, we are now publishing a roadmap for React Native. At a high level, this work can be broken down into three priorities:",
"title": "Introducing Button, Faster Installs with Yarn, and a Public Roadmap",
"author": "Héctor Ramos",
"authorTitle": "Developer Advocate at Facebook",
"authorURL": "https://twitter.com/hectorramos",
"authorImage": "https://s.gravatar.com/avatar/f2223874e66e884c99087e452501f2da?s=128",
"authorTwitter": "hectorramos",
"category": "announcements"
},
{
"path": "2016/10/25/0-36-headless-js-the-keyboard-api-and-more.html",
"content": "\nToday we are releasing [React Native 0.36](https://github.com/facebook/react-native/releases/tag/v0.36.0). Read on to learn more about what's new.\n\n## Headless JS\n\nHeadless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music. It is only available on Android, for now.\n\nTo get started, define your async task in a dedicated file (e.g. `SomeTaskName.js`):\n\n```javascript\nmodule.exports = async (taskData) => {\n // Perform your task here.\n}\n```\n\nNext, register your task in on `AppRegistry`:\n\n```javascript\nAppRegistry.registerHeadlessTask('SomeTaskName', () => require('SomeTaskName'));\n```\n\nUsing Headless JS does require some native Java code to be written in order to allow you to start up the service when needed. Take a look at our new [Headless JS docs](/react-native/docs/headless-js-android.html) to learn more!\n\n## The Keyboard API\n\nWorking with the on-screen keyboard is now easier with [`Keyboard`](/react-native/docs/keyboard.html). You can now listen for native keyboard events and react to them. For example, to dismiss the active keyboard, simply call `Keyboard.dismiss()`:\n\n```js\nimport { Keyboard } from 'react-native'\n\n// Hide that keyboard!\nKeyboard.dismiss()\n```\n\n## Animated Division\n\nCombining two animated values via addition, multiplication, and modulo are already supported by React Native. With version 0.36, combining two [animated values via division](/react-native/docs/animated.html#divide) is now possible. There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):\n\n```\nconst a = Animated.Value(1);\nconst b = Animated.divide(1, a);\n\nAnimated.spring(a, {\n toValue: 2,\n}).start();\n```\n\n`b` will then follow `a`'s spring animation and produce the value of `1 / a`.\n\nThe basic usage is like this:\n\n```\n<Animated.View style={{transform: [{scale: a}]}}>\n <Animated.Image style={{transform: [{scale: b}]}} />\n<Animated.View>\n```\n\nIn this example, the inner image won't get stretched at all because the parent's scaling gets cancelled out. If you'd like to learn more, check out the [Animations guide](/react-native/docs/animations.html).\n\n## Dark Status Bars\n\nA new `barStyle` value has been added to `StatusBar`: `dark-content`. With this addition, you can now use [`barStyle`](/react-native/docs/statusbar.html#barstyle) on both iOS and Android. The behavior will now be the following:\n\n- `default`: Use the platform default (light on iOS, dark on Android).\n- `light-content`: Use a light status bar with black text and icons.\n- `dark-content`: Use a dark status bar with white text and icons.\n\n## ...and more\n\nThe above is just a sample of what has changed in 0.36. Check out the [release notes on GitHub](https://github.com/facebook/react-native/releases/tag/v0.36.0) to see the full list of new features, bug fixes, and breaking changes.\n\nYou can upgrade to 0.36 by running the following commands in a terminal:\n\n```bash\n$ npm install --save react-native@0.36\n$ react-native upgrade\n```\n",
"publishedAt": "2016-10-25",
"excerpt": "Today we are releasing React Native 0.36. Read on to learn more about what's new.",
"title": "0.36: Headless JS, the Keyboard API, & more",
"author": "Héctor Ramos",
"authorTitle": "Developer Advocate at Facebook",
"authorURL": "https://twitter.com/hectorramos",
"authorImage": "https://s.gravatar.com/avatar/f2223874e66e884c99087e452501f2da?s=128",
"authorTwitter": "hectorramos",
"category": "announcements"
},
{
"path": "2016/09/08/exponent-talks-unraveling-navigation.html",
"content": "\n[Adam Miskiewicz](https://twitter.com/skevy) from [Expo](https://expo.io/) talks about mobile navigation and the [`ex-navigation`](https://github.com/exponent/ex-navigation) React Native library at Expo's office hours last week.\n",
"publishedAt": "2016-09-08",
"excerpt": "Adam Miskiewicz from Expo talks about mobile navigation and the ex-navigation React Native library at Expo's office hours last week.",
"title": "Expo Talks: Adam on Unraveling Navigation",
"author": "Héctor Ramos",
"authorTitle": "Developer Advocate at Facebook",
"authorURL": "https://twitter.com/hectorramos",
"authorImage": "https://s.gravatar.com/avatar/f2223874e66e884c99087e452501f2da?s=128",
"authorTwitter": "hectorramos",
"youtubeVideoId": "oeSjTxVkMhc",
"category": "videos"
},
{
"path": "2016/08/19/right-to-left-support-for-react-native-apps.html",
"content": "After launching an app to the app stores, internationalization is the next step to further your audience reach. Over 20 countries and numerous people around the world use Right-to-Left (RTL) languages. Thus, making your app support RTL for them is necessary.\n\nWe're glad to announce that React Native has been improved to support RTL layouts. This is now available in the [react-native](https://github.com/facebook/react-native) master branch today, and will be available in the next RC: [`v0.33.0-rc`](https://github.com/facebook/react-native/releases).\n\nThis involved changing [css-layout](https://github.com/facebook/css-layout), the core layout engine used by RN, and RN core implementation, as well as specific OSS JS components to support RTL.\n\nTo battle test the RTL support in production, the latest version of the **Facebook Ads Manager** app (the first cross-platform 100% RN app) is now available in Arabic and Hebrew with RTL layouts for both [iOS](https://itunes.apple.com/app/id964397083) and [Android](https://play.google.com/store/apps/details?id=com.facebook.adsmanager). Here is how it looks like in those RTL languages:\n\n<p align=\"center\">\n <img src=\"/react-native/blog/img/rtl-ama-ios-arabic.png\" width=\"280\" style=\"margin:10px\">\n <img src=\"/react-native/blog/img/rtl-ama-android-hebrew.png\" width=\"280\" style=\"margin:10px\">\n</p>\n\n## Overview Changes in RN for RTL support\n[css-layout](https://github.com/facebook/css-layout) already has a concept of `start` and `end` for the layout. In the Left-to-Right (LTR) layout, `start` means `left`, and `end` means `right`. But in RTL, `start` means `right`, and `end` means `left`. This means we can make RN depend on the `start` and `end` calculation to compute the correct layout, which includes `position`, `padding`, and `margin`.\n\nIn addition, [css-layout](https://github.com/facebook/css-layout) already makes each component's direction inherits from its parent. This means, we simply need to set the direction of the root component to RTL, and the entire app will flip.\n\nThe diagram below describes the changes at high level:\n\n![](/react-native/blog/img/rtl-rn-core-updates.png)\n\nThese include:\n\n* [css-layout RTL support for absolute positioning](https://github.com/facebook/css-layout/commit/46c842c71a1232c3c78c4215275d104a389a9a0f)\n* mapping `left` and `right` to `start` and `end` in RN core implementation for shadow nodes\n* and exposing a [bridged utility module](https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js) to help control the RTL layout\n\nWith this update, when you allow RTL layout for your app:\n\n* every component layout will flip horizontally\n* some gestures and animations will automatically have RTL layout, if you are using RTL-ready OSS components\n* minimal additional effort may be needed to make your app fully RTL-ready\n\n## Making an App RTL-ready\n\n1. To support RTL, you should first add the RTL language bundles to your app.\n * See the general guides from [iOS](https://developer.apple.com/library/ios/documentation/MacOSX/Conceptual/BPInternational/LocalizingYourApp/LocalizingYourApp.html#//apple_ref/doc/uid/10000171i-CH5-SW1) and [Android](https://developer.android.com/training/basics/supporting-devices/languages.html).\n\n2. Allow RTL layout for your app by calling the `allowRTL()` function at the beginning of native code. We provided this utility to only apply to an RTL layout when your app is ready. Here is an example:\n\n iOS:\n ```objc\n // in AppDelegate.m\n \t[[RCTI18nUtil sharedInstance] allowRTL:YES];\n ```\n\n Android:\n ```java\n // in MainActivity.java\n \tI18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();\n \tsharedI18nUtilInstance.setAllowRTL(context, true);\n ```\n\n3. For Android, you need add `android:supportsRtl=\"true\"` to the [`<application>`](http://developer.android.com/guide/topics/manifest/application-element.html) element in `AndroidManifest.xml` file.\n\nNow, when you recompile your app and change the device language to an RTL language (e.g. Arabic or Hebrew), your app layout should change to RTL automatically.\n\n## Writing RTL-ready Components\n\nIn general, most components are already RTL-ready, for example:\n\n* Left-to-Right Layout\n\n <p align=\"left\">\n <img src=\"/react-native/blog/img/rtl-demo-listitem-ltr.png\" width=\"300\">\n </p>\n\n* Right-to-Left Layout\n\n <p align=\"left\">\n <img src=\"/react-native/blog/img/rtl-demo-listitem-rtl.png\" width=\"300\">\n </p>\n\nHowever, there are several cases to be aware of, for which you will need the [`I18nManager`](https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js). In [`I18nManager`](https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js), there is a constant `isRTL` to tell if layout of app is RTL or not, so that you can make the necessary changes according to the layout.\n\n#### Icons with Directional Meaning\nIf your component has icons or images, they will be displayed the same way in LTR and RTL layout, because RN will not flip your source image. Therefore, you should flip them according to the layout style.\n\n* Left-to-Right Layout\n\n <p align=\"left\">\n <img src=\"/react-native/blog/img/rtl-demo-icon-ltr.png\" width=\"300\">\n </p>\n\n* Right-to-Left Layout\n\n <p align=\"left\">\n <img src=\"/react-native/blog/img/rtl-demo-icon-rtl.png\" width=\"300\">\n </p>\n\nHere are two ways to flip the icon according to the direction:\n\n* Adding a `transform` style to the image component:\n ```js\n <Image\n source={...}\n style={{transform: [{scaleX: I18nManager.isRTL ? -1 : 1}]}}\n />\n ```\n\n* Or, changing the image source according to the direction:\n ```js\n let imageSource = require('./back.png');\n if (I18nManager.isRTL) {\n \timageSource = require('./forward.png');\n }\n return (\n <Image source={imageSource} />\n );\n ```\n\n#### Gestures and Animations\n\nIn iOS and Android development, when you change to RTL layout, the gestures and animations are the opposite of LTR layout. Currently, in RN, gestures and animations are not supported on RN core code level, but on components level. The good news is, some of these components already support RTL today, such as [`SwipeableRow`](https://github.com/facebook/react-native/blob/38a6eec0db85a5204e85a9a92b4dee2db9641671/Libraries/Experimental/SwipeableRow/SwipeableRow.js) and [`NavigationExperimental`](https://github.com/facebook/react-native/tree/master/Libraries/NavigationExperimental). However, other components with gestures will need to support RTL manually.\n\nA good example to illustrate gesture RTL support is [`SwipeableRow`](https://github.com/facebook/react-native/blob/38a6eec0db85a5204e85a9a92b4dee2db9641671/Libraries/Experimental/SwipeableRow/SwipeableRow.js).\n\n<p align=\"center\">\n <img src=\"/react-native/blog/img/rtl-demo-swipe-ltr.png\" width=\"280\" style=\"margin:10px\">\n <img src=\"/react-native/blog/img/rtl-demo-swipe-rtl.png\" width=\"280\" style=\"margin:10px\">\n</p>\n\n\n##### Gestures Example\n```js\n// SwipeableRow.js\n_isSwipingExcessivelyRightFromClosedPosition(gestureState: Object): boolean {\n // ...\n const gestureStateDx = IS_RTL ? -gestureState.dx : gestureState.dx;\n return (\n this._isSwipingRightFromClosed(gestureState) &&\n gestureStateDx > RIGHT_SWIPE_THRESHOLD\n );\n},\n```\n\n##### Animation Example\n```js\n// SwipeableRow.js\n_animateBounceBack(duration: number): void {\n // ...\n const swipeBounceBackDistance = IS_RTL ?\n -RIGHT_SWIPE_BOUNCE_BACK_DISTANCE :\n RIGHT_SWIPE_BOUNCE_BACK_DISTANCE;\n this._animateTo(\n -swipeBounceBackDistance,\n duration,\n this._animateToClosedPositionDuringBounce,\n );\n},\n```\n\n\n## Maintaining Your RTL-ready App\n\nEven after the initial RTL-compatible app release, you will likely need to iterate on new features. To improve development efficiency, [`I18nManager`](https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js) provides the `forceRTL()` function for faster RTL testing without changing the test device language. You might want to provide a simple switch for this in your app. Here's an example from the RTL example in the RNTester:\n\n<p align=\"center\">\n <img src=\"/react-native/blog/img/rtl-demo-forcertl.png\" width=\"300\">\n</p>\n\n```js\n<RNTesterBlock title={'Quickly Test RTL Layout'}>\n <View style={styles.flexDirectionRow}>\n <Text style={styles.switchRowTextView}>\n forceRTL\n </Text>\n <View style={styles.switchRowSwitchView}>\n <Switch\n onValueChange={this._onDirectionChange}\n style={styles.rightAlignStyle}\n value={this.state.isRTL} />\n </View>\n </View>\n</RNTesterBlock>\n\n_onDirectionChange = () => {\n I18nManager.forceRTL(!this.state.isRTL);\n this.setState({isRTL: !this.state.isRTL});\n Alert.alert('Reload this page',\n 'Please reload this page to change the UI direction! ' +\n 'All examples in this app will be affected. ' +\n 'Check them out to see what they look like in RTL layout.'\n );\n};\n```\n\nWhen working on a new feature, you can easily toggle this button and reload the app to see RTL layout. The benefit is you won't need to change the language setting to test, however some text alignment won't change, as explained in the next section. Therefore, it's always a good idea to test your app in the RTL language before launching.\n\n## Limitations and Future Plan\n\nThe RTL support should cover most of the UX in your app; however, there are some limitations for now:\n\n* Text alignment behaviors differ in iOS and Android\n * In iOS, the default text alignment depends on the active language bundle, they are consistently on one side. In Android, the default text alignment depends on the language of the text content, i.e. English will be left-aligned and Arabic will be right-aligned.\n * In theory, this should be made consistent across platform, but some people may prefer one behavior to another when using an app. More user experience research may be needed to find out the best practice for text alignment.\n\n\n* There is no \"true\" left/right\n\n As discussed before, we map the `left`/`right` styles from the JS side to `start`/`end`, all `left` in code for RTL layout becomes \"right\" on screen, and `right` in code becomes \"left\" on screen. This is convenient because you don't need to change your product code too much, but it means there is no way to specify \"true left\" or \"true right\" in the code. In the future, allowing a component to control its direction regardless of the language may be necessary.\n\n* Make RTL support for gestures and animations more developer friendly\n\n Currently, there is still some programming effort required to make gestures and animations RTL compatible.\n In the future, it would be ideal to find a way to make gestures and animations RTL support more developer friendly.\n\n## Try it Out!\nCheck out the [`RTLExample`](https://github.com/facebook/react-native/blob/master/RNTester/js/RTLExample.js) in the `RNTester` to understand more about RTL support, and let us know how it works for you!\n\nFinally, thank you for reading! We hope that the RTL support for React Native helps you grow your apps for international audience!\n",
"publishedAt": "2016-08-19",
"excerpt": "After launching an app to the app stores, internationalization is the next step to further your audience reach. Over 20 countries and numerous people around the world use Right-to-Left (RTL) languages. Thus, making your app support RTL for them is necessary.",
"title": "Right-to-Left Layout Support For React Native Apps",
"author": "Mengjue (Mandy) Wang",
"authorTitle": "Software Engineer Intern at Facebook",
"authorURL": "https://github.com/MengjueW",
"authorImage": "https://avatars0.githubusercontent.com/u/13987140?v=3&s=128",
"category": "engineering"
},
{
"path": "2016/08/12/react-native-meetup-san-francisco.html",
"content": "\nLast week I had the opportunity to attend the [React Native Meetup](http://www.meetup.com/React-Native-San-Francisco/photos/27168649/#452793854) at Zynga’s San Francisco office. With around 200 people in attendance, it served as a great place to meet other developers near me that are also interested in React Native.\n\nI was particularly interested in learning more about how React and React Native are used at companies like Zynga, Netflix, and Airbnb. The agenda for the night would be as follows:\n\n* Rapid Prototyping in React\n* Designing APIs for React Native\n* Bridging the Gap: Using React Native in Existing Codebases\n\nBut first, the event started off with a quick introduction and a brief recap of recent news:\n\n* Did you know that React Native is now the [top Java repository on GitHub](https://twitter.com/jamespearce/status/759637111880359937)?\n* [rnpm](https://github.com/rnpm/rnpm) is now part of React Native core! You can now use `react-native link` in place of `rnpm link` to [install libraries with native dependencies](https://facebook.github.io/react-native/docs/linking-libraries-ios.html).\n* The React Native Meetup community is growing fast! There are now over 4,800 developers across a variety of React Native meetup groups all over the globe.\n\nIf [one of these meetups](http://www.meetup.com/find/?allMeetups=false&keywords=react+native&radius=Infinity&userFreeform=San+Francisco%2C+CA&mcId=z94105&mcName=San+Francisco%2C+CA&sort=recommended&eventFilter=mysugg) is held near you, I highly recommend attending!\n\n## Rapid Prototyping in React at Zynga\n\nThe first round of news was followed by a quick introduction by Zynga, our hosts for the evening. Abhishek Chadha talked about how they use React to quickly prototype new experiences on mobile, demoing a quick prototype of a Draw Something-like app. They use a similar approach as React Native, providing access to native APIs via a bridge. This was demonstrated when Abhishek used the device's camera to snap a photo of the audience and then drew a hat on someone's head.\n\n## Designing APIs for React Native at Netflix\n\nUp next, the first featured talk of the evening. [Clarence Leung](https://twitter.com/clarler), Senior Software Engineer at Netflix, presented his talk on Designing APIs for React Native. First he noted the two main types of libraries one may work on: components such as tab bars and date pickers, and libraries that provide access to native services such as the camera roll or in-app payments. There are two ways one may approach when building a library for use in React Native:\n\n* Provide platform-specific components\n* A cross-platform library with a similar API for both iOS and Android\n\nEach approach has its own considerations, and it’s up to you to determine what works best for your needs.\n\n**Approach #1**\n\nAs an example of platform-specific components, Clarence talked about the DatePickerIOS and DatePickerAndroid from core React Native. On iOS, date pickers are rendered as part of the UI and can be easily embedded in an existing view, while date pickers on Android are presented modally. It makes sense to provide separate components in this case.\n\n**Approach #2**\n\nPhoto pickers, on the other hand, are treated similarly on iOS and Android. There are some slight differences — Android does not group photos into folders like iOS does with Selfies, for example — but those are easily handled using `if` statements and the `Platform` component.\n\nRegardless of which approach you settle on, it’s a good idea to minimize the API surface and build app-specific libraries. For example, iOS’s In-App Purchase framework supports one-time, consumable purchases, as well as renewable subscriptions. If your app will only need to support consumable purchases, you may get away with dropping support for subscriptions in your cross-platform library.\n\n![](/react-native/blog/img/rnmsf-august-2016-netflix.jpg)\n\nThere was a brief Q&A session at the end of Clarence’s talk. One of the interesting tid bits that came out of it was that around 80% of the React Native code written for these libraries at Netflix is shared across both iOS and Android.\n\n## Bridging the Gap, Using React Native in Existing Codebases\n\nThe final talk of the night was by [Leland Richardson](https://twitter.com/intelligibabble) from Airbnb. The talk was focused on the use of React Native in existing codebases. I already know how easy it is to write a new app from scratch using React Native, so I was very interested to hear about Airbnb’s experience adopting React Native in their existing native apps.\n\nLeland started off by talking about greenfield apps versus brownfield apps. Greenfield means to start a project without the need to consider any prior work. This is in contrast to brownfield projects where you need to take into account the existing project’s requirements, development processes, and all of the teams various needs.\n\nWhen you’re working on a greenfield app, the React Native CLI sets up a single repository for both iOS and Android and everything just works. The first challenge against using React Native at Airbnb was the fact that the iOS and Android app each had their own repository. Multi-repo companies have some hurdles to get past before they can adopt React Native.\n\nTo get around this, Airbnb first set up a new repo for the React Native codebase. They used their continuous integration servers to mirror the iOS and Android repos into this new repo. After tests are run and the bundle is built, the build artifacts are synced back to the iOS and Android repos. This allows the mobile engineers to work on native code without altering their development enviroment. Mobile engineers don't need to install npm, run the packager, or remember to build the JavaScript bundle. The engineers writing actual React Native code do not have to worry about syncing their code across iOS and Android, as they work on the React Native repository directly.\n\nThis does come with some drawbacks, mainly they could not ship atomic updates. Changes that require a combination of native and JavaScript code would require three separate pull requests, all of which had to be carefully landed. In order to avoid conflicts, CI will fail to land changes back to the iOS and Android repos if master has changed since the build started. This would cause long delays during high commit frequency days (such as when new releases are cut).\n\nAirbnb has since moved to a mono repo approach. Fortunately this was already under consideration, and once the iOS and Android teams became comfortable with using React Native they were happy to accelerate the move towards the mono repo.\n\nThis has solved most of the issues they had with the split repo approach. Leland did note that this does cause a higher strain on the version control servers, which may be an issue for smaller companies.\n\n![](/react-native/blog/img/rnmsf-august-2016-airbnb.jpg)\n\n### The Navigation Problem\n\nThe second half of Leland's talk focused on a topic that is dear to me: the Navigation problem in React Native. He talked about the abundance of navigation libraries in React Native, both first party and third party. NavigationExperimental was mentioned as something that seemed promising, but ended up not being well suited for their use case.\n\nIn fact, none of the existing navigation libraries seem to work well for brownfield apps. A brownfield app requires that the navigation state be fully owned by the native app. For example, if a user’s session expires while a React Native view is being presented, the native app should be able to take over and present a login screen as needed.\n\nAirbnb also wanted to avoid replacing native navigation bars with JavaScript versions as part of a transition, as the effect could be jarring. Initially they limited themselves to modally presented views, but this obviously presented a problem when it came to adopting React Native more widely within their apps.\n\nThey decided that they needed their own library. The library is called `airbnb-navigation`. The library has not yet being open sourced as it is strongly tied to Airbnb’s codebase, but it is something they’d like to release by the end of the year.\n\nI won’t go into much detail into the library’s API, but here are some of the key takeaways:\n\n* One must preregister scenes ahead of time\n* Each scene is displayed within its own `RCTRootView`. They are presented natively on each platform (e.g. `UINavigationController`s are used on iOS).\n* The main `ScrollView` in a scene should be wrapped in a `ScrollScene` component. Doing so allows you to take advantage of native behaviors such as tapping on the status bar to scroll to the top on iOS.\n* Transitions between scenes are handled natively, no need to worry about performance.\n* The Android back button is automatically supported.\n* They can take advantage of View Controller based navigation bar styling via a Navigator.Config UI-less component.\n\nThere’s also some considerations to keep in mind:\n\n* The navigation bar is not easily customized in JavaScript, as it is a native component. This is intentional, as using native navigation bars is a hard requirement for this type of library.\n* ScreenProps must be serialized/de-serialized whenever they're sent through the bridge, so care must be taken if sending too much data here.\n* Navigation state is owned by the native app (also a hard requirement for the library), so things like Redux cannot manipulate navigation state.\n\nLeland's talk was also followed by a Q&A session. Overall, Airbnb is satisfied with React Native. They’re interested in using Code Push to fix any issues without going through the App Store, and their engineers love Live Reload, as they don't have to wait for the native app to be rebuilt after every minor change.\n\n## Closing Remarks\n\nThe event ended with some additional React Native news:\n\n* Deco announced their [React Native Showcase](https://www.decosoftware.com/showcase), and invited everyone to add their app to the list.\n* The recent [documentation overhaul](https://facebook.github.io/react-native/blog/2016/07/06/toward-better-documentation.html) got a shoutout!\n* Devin Abbott, one of the creators of Deco IDE, will be teaching an introductory [React Native course](https://www.decosoftware.com/course).\n\n![](/react-native/blog/img/rnmsf-august-2016-docs.jpg)\n\nMeetups provide a good opportunity to meet and learn from other developers in the community. I'm looking forward to attending more React Native meetups in the future. If you make it up to one of these, please look out for me and let me know how we can make React Native work better for you!\n",
"publishedAt": "2016-08-12",
"excerpt": "Last week I had the opportunity to attend the React Native Meetup at Zynga’s San Francisco office. With around 200 people in attendance, it served as a great place to meet other developers near me that are also interested in React Native.",
"title": "San Francisco Meetup Recap",
"author": "Héctor Ramos",
"authorTitle": "Developer Advocate at Facebook",
"authorURL": "https://twitter.com/hectorramos",
"authorImage": "https://s.gravatar.com/avatar/f2223874e66e884c99087e452501f2da?s=128",
"authorTwitter": "hectorramos",
"hero": "/react-native/blog/img/rnmsf-august-2016-hero.jpg",
"category": "events"
},
{
"path": "2016/07/06/toward-better-documentation.html",
"content": "\nPart of having a great developer experience is having great documentation. A lot goes into creating good docs - the ideal documentation is concise, helpful, accurate, complete, and delightful. Recently we've been working hard to make the docs better based on your feedback, and we wanted to share some of the improvements we've made.\n\n## Inline Examples\n\nWhen you learn a new library, a new programming language, or a new framework, there's a beautiful moment when you first write a bit of code, try it out, see if it works... and it *does* work. You created something real. We wanted to put that visceral experience right into our docs. Like this:\n\n```ReactNativeWebPlayer\nimport React, { Component } from 'react';\nimport { AppRegistry, Text, View } from 'react-native';\n\nclass ScratchPad extends Component {\n render() {\n return (\n <View style={{flex: 1}}>\n <Text style={{fontSize: 30, flex: 1, textAlign: 'center'}}>\n Isn't this cool?\n </Text>\n <Text style={{fontSize: 100, flex: 1, textAlign: 'center'}}>\n 👍\n </Text>\n </View>\n );\n }\n}\n\nAppRegistry.registerComponent('ScratchPad', () => ScratchPad);\n```\n\nWe think these inline examples, using the [`react-native-web-player`](https://github.com/dabbott/react-native-web-player) module with help from [Devin Abbott](https://twitter.com/devinaabbott), are a great way to learn the basics of React Native, and we have updated our [tutorial for new React Native developers](/react-native/docs/tutorial.html) to use these wherever possible. Check it out - if you have ever been curious to see what would happen if you modified just one little bit of sample code, this is a really nice way to poke around. Also, if you're building developer tools and you want to show a live React Native sample on your own site, [`react-native-web-player`](https://github.com/dabbott/react-native-web-player) can make that straightforward.\n\nThe core simulation engine is provided by [Nicolas Gallagher](https://twitter.com/necolas)'s [`react-native-web`](https://github.com/necolas/react-native-web) project, which provides a way to display React Native components like `Text` and `View` on the web. Check out [`react-native-web`](https://github.com/necolas/react-native-web) if you're interested in building mobile and web experiences that share a large chunk of the codebase.\n\n## Better Guides\n\nIn some parts of React Native, there are multiple ways to do things, and we've heard feedback that we could provide better guidance.\n\nWe have a new [guide to Navigation](/react-native/docs/navigator-comparison.html) that compares the different approaches and advises on what you should use - `Navigator`, `NavigatorIOS`, `NavigationExperimental`. In the medium term, we're working towards improving and consolidating those interfaces. In the short term, we hope that a better guide will make your life easier.\n\nWe also have a new [guide to handling touches](/react-native/docs/handling-touches.html) that explains some of the basics of making button-like interfaces, and a brief summary of the different ways to handle touch events.\n\nAnother area we worked on is Flexbox. This includes tutorials on how to [handle layout with Flexbox](/react-native/docs/flexbox.html) and how to control [the size of components](/react-native/docs/height-and-width.html). It also includes an unsexy but hopefully-useful [list of all the props that control layout in React Native](/react-native/docs/layout-props.html).\n\n## Getting Started\n\nWhen you start getting a React Native development environment set up on your machine, you do have to do a bunch of installing and configuring things. It's hard to make installation a really fun and exciting experience, but we can at least make it as quick and painless as possible.\n\nWe built a [new Getting Started workflow](/react-native/releases/next/docs/getting-started.html) that lets you select your development operating system and your mobile operating system up front, to provide one concise place with all the setup instructions. We also went through the installation process to make sure everything worked and to make sure that every decision point had a clear recommendation. After testing it out on our innocent coworkers, we're pretty sure this is an improvement.\n\nWe also worked on the [guide to integrating React Native into an existing app](/react-native/docs/integration-with-existing-apps.html). Many of the largest apps that use React Native, like the Facebook app itself, actually build part of the app in React Native, and part of it using regular development tools. We hope this guide makes it easier for more people to build apps this way.\n\n## We Need Your Help\n\nYour feedback lets us know what we should prioritize. I know some people will read this blog post and think \"Better docs? Pffft. The documentation for X is still garbage!\". That's great - we need that energy. The best way to give us feedback depends on the sort of feedback.\n\nIf you find a mistake in the documentation, like inaccurate descriptions or code that doesn't actually work, [file an issue](https://github.com/facebook/react-native/issues). Tag it with \"Documentation\", so that it's easier to route it to the right people.\n\nIf there isn't a specific mistake, but something in the documentation is fundamentally confusing, it's not a great fit for a GitHub issue. Instead, post on [Canny](https://react-native.canny.io/feature-requests) about the area of the docs that could use help. This helps us prioritize when we are doing more general work like guide-writing.\n\nThanks for reading this far, and thanks for using React Native!\n",
"publishedAt": "2016-07-06",
"excerpt": "Part of having a great developer experience is having great documentation. A lot goes into creating good docs - the ideal documentation is concise, helpful, accurate, complete, and delightful. Recently we've been working hard to make the docs better based on your feedback, and we wanted to share some of the improvements we've made.",
"title": "Toward Better Documentation",
"author": "Kevin Lacker",
"authorTitle": "Engineering Manager at Facebook",
"authorURL": "https://twitter.com/lacker",
"authorImage": "http://www.gravatar.com/avatar/9b790592be15d4f55a5ed7abb5103304?s=128",
"authorTwitter": "lacker",
"category": "announcements"
},
{
"path": "2016/04/13/react-native-a-year-in-review.html",
"content": "\nIt's been one year since we open-sourced React Native. What started as an idea with a handful of engineers is now a framework being used by product teams across Facebook and beyond. Today at F8 we announced that Microsoft is bringing [React Native to the Windows ecosystem](http://microsoft.github.io/code-push/articles/ReactNativeWindows.html), giving developers the potential to build React Native on Windows PC, Phone, and Xbox. It will also provide open source tools and services such as a React Native extension for Visual Studio Code and CodePush to help developers create React Native apps on the Windows platform. In addition, [Samsung](https://www.tizen.org/blogs) is building React Native for its hybrid platform, which will empower developers to build apps for millions of SmartTVs and mobile and wearable devices. We also released the [Facebook SDK for React Native](https://github.com/facebook/react-native-fbsdk), which makes it easier for developers to incorporate Facebook social features like Login, Sharing, App Analytics, and Graph APIs into their apps. In one year, React Native has changed the way developers build on every major platform.\n\nIt's been an epic ride — but we are only getting started. Here is a look back at how React Native has grown and evolved since we open-sourced it a year ago, some challenges we faced along the way, and what we expect as we look ahead to the future.\n\n<footer>\n <a href=\"https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/\" class=\"btn\">Read more</a>\n</footer>\n\n> This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/).\n",
"publishedAt": "2016-04-13",
"excerpt": "It's been one year since we open-sourced React Native. What started as an idea with a handful of engineers is now a framework being used by product teams across Facebook and beyond. Today at F8 we announced that Microsoft is bringing React Native to the Windows ecosystem, giving developers the potential to build React Native on Windows PC, Phone, and Xbox. It will also provide open source tools and services such as a React Native extension for Visual Studio Code and CodePush to help developers create React Native apps on the Windows platform. In addition, Samsung is building React Native for its hybrid platform, which will empower developers to build apps for millions of SmartTVs and mobile and wearable devices. We also released the Facebook SDK for React Native, which makes it easier for developers to incorporate Facebook social features like Login, Sharing, App Analytics, and Graph APIs into their apps. In one year, React Native has changed the way developers build on every major platform.",
"title": "React Native: A year in review",
"author": "Martin Konicek",
"authorTitle": "Software Engineer at Facebook",
"authorURL": "https://github.com/mkonicek",
"authorImage": "https://avatars1.githubusercontent.com/u/346214?v=3&s=460",
"authorTwitter": "martinkonicek",
"hero": "/react-native/blog/img/big-hero.jpg",
"category": "announcements"
},
{
"path": "2016/03/28/dive-into-react-native-performance.html",
"content": "\nReact Native allows you to build iOS and Android apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across multiple platforms. You can ship faster and focus on details that really matter, making your app look and feel fantastic. Optimizing performance is a big part of this. Here is the story of how we made React Native app startup twice as fast.\n\n## Why the hurry?\n\nWith an app that runs faster, content loads quickly, which means people get more time to interact with it, and smooth animations make the app enjoyable to use. In emerging markets, where [2011 class phones](https://code.facebook.com/posts/952628711437136/classes-performance-and-network-segmentation-on-android/) on [2G networks](https://newsroom.fb.com/news/2015/10/news-feed-fyi-building-for-all-connectivity/) are the majority, a focus on performance can make the difference between an app that is usable and one that isn't.\n\nSince releasing React Native on [iOS](https://facebook.github.io/react/blog/2015/03/26/introducing-react-native.html) and on [Android](https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/), we have been improving list view scrolling performance, memory efficiency, UI responsiveness, and app startup time. Startup sets the first impression of an app and stresses all parts of the framework, so it is the most rewarding and challenging problem to tackle.\n\n<footer>\n <a href=\"https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/\" class=\"btn\">Read more</a>\n</footer>\n\n> This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/).\n",
"publishedAt": "2016-03-28",
"excerpt": "React Native allows you to build iOS and Android apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across multiple platforms. You can ship faster and focus on details that really matter, making your app look and feel fantastic. Optimizing performance is a big part of this. Here is the story of how we made React Native app startup twice as fast.",
"title": "Dive into React Native Performance",
"author": "Pieter De Baets",
"authorTitle": "Software Engineer at Facebook",
"authorURL": "https://github.com/javache",
"authorImage": "https://avatars1.githubusercontent.com/u/5676?v=3&s=460",
"authorTwitter": "javache",
"category": "engineering"
},
{
"path": "2016/03/24/introducing-hot-reloading.html",
"content": "\nReact Native's goal is to give you the best possible developer experience. A big part of it is the time it takes between you save a file and be able to see the changes. Our goal is to get this feedback loop to be under 1 second, even as your app grows.\n\nWe got close to this ideal via three main features:\n\n* Use JavaScript as the language doesn't have a long compilation cycle time.\n* Implement a tool called Packager that transforms es6/flow/jsx files into normal JavaScript that the VM can understand. It was designed as a server that keeps intermediate state in memory to enable fast incremental changes and uses multiple cores.\n* Build a feature called Live Reload that reloads the app on save.\n\nAt this point, the bottleneck for developers is no longer the time it takes to reload the app but losing the state of your app. A common scenario is to work on a feature that is multiple screens away from the launch screen. Every time you reload, you've got to click on the same path again and again to get back to your feature, making the cycle multiple-seconds long.\n\n\n## Hot Reloading\n\nThe idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. This way, you don't lose any of your state which is especially useful if you are tweaking the UI.\n\nA video is worth a thousand words. Check out the difference between Live Reload (current) and Hot Reload (new).\n\n<iframe width=\"100%\" height=\"315\" src=\"https://www.youtube.com/embed/2uQzVi-KFuc\" frameborder=\"0\" allowfullscreen></iframe>\n\nIf you look closely, you can notice that it is possible to recover from a red box and you can also start importing modules that were not previously there without having to do a full reload.\n\n**Word of warning:** because JavaScript is a very stateful language, hot reloading cannot be perfectly implemented. In practice, we found out that the current setup is working well for a large amount of usual use cases and a full reload is always available in case something gets messed up.\n\nHot reloading is available as of 0.22, you can enable it:\n\n* Open the developer menu\n* Tap on \"Enable Hot Reloading\"\n\n\n## Implementation in a nutshell\n\nNow that we've seen why we want it and how to use it, the fun part begins: how it actually works.\n\nHot Reloading is built on top of a feature [Hot Module Replacement](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html), or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.\n\nIn a nutshell, the HMR update contains the new code of the JS modules that changed. When the runtime receives them, it replaces the old modules' code with the new one:\n\n![](/react-native/blog/img/hmr-architecture.png)\n\n\nThe HMR update contains a bit more than just the module's code we want to change because replacing it, it's not enough for the runtime to pick up the changes. The problem is that the module system may have already cached the *exports* of the module we want to update. For instance, say you have an app composed of these two modules:\n\n```\n// log.js\nfunction log(message) {\n const time = require('./time');\n console.log(`[${time()}] ${message}`);\n}\n\nmodule.exports = log;\n```\n\n```\n// time.js\nfunction time() {\n return new Date().getTime();\n}\n\nmodule.exports = time;\n```\n\nThe module `log`, prints out the provided message including the current date provided by the module `time`.\n\nWhen the app is bundled, React Native registers each module on the module system using the `__d` function. For this app, among many `__d` definitions, there will one for `log`:\n\n```\n__d('log', function() {\n ... // module's code\n});\n```\n\nThis invocation wraps each module's code into an anonymous function which we generally refer to as the factory function. The module system runtime keeps track of each module's factory function, whether it has already been executed, and the result of such execution (exports). When a module is required, the module system either provides the already cached exports or executes the module's factory function for the first time and saves the result.\n\nSo say you start your app and require `log`. At this point, neither `log` nor `time`'s factory functions have been executed so no exports have been cached. Then, the user modifies `time` to return the date in `MM/DD`:\n\n```\n// time.js\nfunction bar() {\n var date = new Date();\n return `${date.getMonth() + 1}/${date.getDate()}`;\n}\n\nmodule.exports = bar;\n```\n\nThe Packager will send time's new code to the runtime (step 1), and when `log` gets eventually required the exported function gets executed it will do so with `time`'s changes (step 2):\n\n![](/react-native/blog/img/hmr-step.png)\n\n\nNow say the code of `log` requires `time` as a top level require:\n\n```\nconst time = require('./time'); // top level require\n\n// log.js\nfunction log(message) {\n console.log(`[${time()}] ${message}`);\n}\n\nmodule.exports = log;\n```\n\nWhen `log` is required, the runtime will cache its exports and `time`'s one. (step 1). Then, when `time` is modified, the HMR process cannot simply finish after replacing `time`'s code. If it did, when `log` gets executed, it would do so with a cached copy of `time` (old code).\n\nFor `log` to pick up `time` changes, we'll need to clear its cached exports because one of the modules it depends on was hot swapped (step 3). Finally, when `log` gets required again, its factory function will get executed requiring `time` and getting its new code.\n\n![](/react-native/blog/img/hmr-log.png)\n\n\n## HMR API\n\nHMR in React Native extends the module system by introducing the `hot` object. This API is based on [Webpack](https://webpack.github.io/docs/hot-module-replacement.html)'s one. The `hot` object exposes a function called `accept` which allows you to define a callback that will be executed when the module needs to be hot swapped. For instance, if we would change `time`'s code as follows, every time we save time, we'll see “time changed” in the console:\n\n```\n// time.js\nfunction time() {\n ... // new code\n}\n\nmodule.hot.accept(() => {\n console.log('time changed');\n});\n\nmodule.exports = time;\n```\n\nNote that only in rare cases you would need to use this API manually. Hot Reloading should work out of the box for the most common use cases.\n\n## HMR Runtime\n\nAs we've seen before, sometimes it's not enough only accepting the HMR update because a module that uses the one being hot swapped may have been already executed and its imports cached. For instance, suppose the dependency tree for the movies app example had a top-level `MovieRouter` that depended on the `MovieSearch` and `MovieScreen` views, which depended on the `log` and `time` modules from the previous examples:\n\n\n![](/react-native/blog/img/hmr-diamond.png)\n\n\nIf the user accesses the movies' search view but not the other one, all the modules except for `MovieScreen` would have cached exports. If a change is made to module `time`, the runtime will have to clear the exports of `log` for it to pick up `time`'s changes. The process wouldn't finish there: the runtime will repeat this process recursively up until all the parents have been accepted. So, it'll grab the modules that depend on `log` and try to accept them. For `MovieScreen` it can bail, as it hasn't been required yet. For `MovieSearch`, it will have to clear its exports and process its parents recursively. Finally, it will do the same thing for `MovieRouter` and finish there as no modules depends on it.\n\nIn order to walk the dependency tree, the runtime receives the inverse dependency tree from the Packager on the HMR update. For this example the runtime will receive a JSON object like this one:\n\n```\n{\n modules: [\n {\n name: 'time',\n code: /* time's new code */\n }\n ],\n inverseDependencies: {\n MovieRouter: [],\n MovieScreen: ['MovieRouter'],\n MovieSearch: ['MovieRouter'],\n log: ['MovieScreen', 'MovieSearch'],\n time: ['log'],\n }\n}\n```\n\n## React Components\n\nReact components are a bit harder to get to work with Hot Reloading. The problem is that we can't simply replace the old code with the new one as we'd loose the component's state. For React web applications, [Dan Abramov](https://twitter.com/dan_abramov) implemented a babel [transform](http://gaearon.github.io/react-hot-loader/) that uses Webpack's HMR API to solve this issue. In a nutshell, his solution works by creating a proxy for every single React component on *transform time*. The proxies hold the component's state and delegate the lifecycle methods to the actual components, which are the ones we hot reload:\n\n![](/react-native/blog/img/hmr-proxy.png)\n\nBesides creating the proxy component, the transform also defines the `accept` function with a piece of code to force React to re-render the component. This way, we can hot reload rendering code without losing any of the app's state.\n\nThe default [transformer](https://github.com/facebook/react-native/blob/master/packager/transformer.js#L92-L95) that comes with React Native uses the `babel-preset-react-native`, which is [configured](https://github.com/facebook/react-native/blob/master/babel-preset/configs/hmr.js#L24-L31) to use `react-transform` the same way you'd use it on a React web project that uses Webpack.\n\n## Redux Stores\n\nTo enable Hot Reloading on [Redux](http://redux.js.org/) stores you will just need to use the HMR API similarly to what you'd do on a web project that uses Webpack:\n\n```\n// configureStore.js\nimport { createStore, applyMiddleware, compose } from 'redux';\nimport thunk from 'redux-thunk';\nimport reducer from '../reducers';\n\nexport default function configureStore(initialState) {\n const store = createStore(\n reducer,\n initialState,\n applyMiddleware(thunk),\n );\n\n if (module.hot) {\n module.hot.accept(() => {\n const nextRootReducer = require('../reducers/index').default;\n store.replaceReducer(nextRootReducer);\n });\n }\n\n return store;\n};\n```\n\nWhen you change a reducer, the code to accept that reducer will be sent to the client. Then the client will realize that the reducer doesn't know how to accept itself, so it will look for all the modules that refer it and try to accept them. Eventually, the flow will get to the single store, the `configureStore` module, which will accept the HMR update.\n\n## Conclusion\n\nIf you are interested in helping making hot reloading better, I encourage you to read [Dan Abramov's post around the future of hot reloading](https://medium.com/@dan_abramov/hot-reloading-in-react-1140438583bf#.jmivpvmz4) and to contribute. For example, Johny Days is going to [make it work with multiple connected clients](https://github.com/facebook/react-native/pull/6179). We're relying on you all to maintain and improve this feature.\n\nWith React Native, we have the opportunity to rethink the way we build apps in order to make it a great developer experience. Hot reloading is only one piece of the puzzle, what other crazy hacks can we do to make it better?\n",
"publishedAt": "2016-03-24",
"excerpt": "React Native's goal is to give you the best possible developer experience. A big part of it is the time it takes between you save a file and be able to see the changes. Our goal is to get this feedback loop to be under 1 second, even as your app grows.",
"title": "Introducing Hot Reloading",
"author": "Martín Bigio",
"authorTitle": "Software Engineer at Instagram",
"authorURL": "https://twitter.com/martinbigio",
"authorImage": "https://avatars3.githubusercontent.com/u/535661?v=3&s=128",
"authorTwitter": "martinbigio",
"category": "engineering"
},
{
"path": "2015/11/23/making-react-native-apps-accessible.html",
"content": "\nWith the recent launch of React on web and React Native on mobile, we've provided a new front-end framework for developers to build products. One key aspect of building a robust product is ensuring that anyone can use it, including people who have vision loss or other disabilities. The Accessibility API for React and React Native enables you to make any React-powered experience usable by someone who may use assistive technology, like a screen reader for the blind and visually impaired.\n\nFor this post, we're going to focus on React Native apps. We've designed the React Accessibility API to look and feel similar to the iOS and Android APIs. If you've developed accessible applications for the web, iOS, or Android before, you should feel comfortable with the framework and nomenclature of the React AX API. For instance, you can make a UI element _accessible_ (therefore exposed to assistive technology) and use _accessibilityLabel_ to provide a string description for the element:\n\n```\n<View accessible={true} accessibilityLabel=”This is simple view”>\n```\n\nLet's walk through a slightly more involved application of the React AX API by looking at one of Facebook's own React-powered products: the **Ads Manager app**.\n\n<footer>\n <a href=\"https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/\" class=\"btn\">Read more</a>\n</footer>\n\n> This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/).\n",
"publishedAt": "2015-11-23",
"excerpt": "With the recent launch of React on web and React Native on mobile, we've provided a new front-end framework for developers to build products. One key aspect of building a robust product is ensuring that anyone can use it, including people who have vision loss or other disabilities. The Accessibility API for React and React Native enables you to make any React-powered experience usable by someone who may use assistive technology, like a screen reader for the blind and visually impaired.",
"title": "Making React Native apps accessible",
"author": "Georgiy Kassabli",
"authorTitle": "Software Engineer at Facebook",
"authorURL": "https://www.facebook.com/georgiy.kassabli",
"authorImage": "https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-1/c0.0.160.160/p160x160/1978838_795592927136196_1205041943_n.jpg?_nc_log=1&oh=d7a500fdece1250955a4d27b0a80fee2&oe=59E8165A",
"hero": "/react-native/blog/img/blue-hero.jpg",
"category": "engineering"
},
{
"path": "2015/09/14/react-native-for-android.html",
"content": "\nEarlier this year, we introduced [React Native for iOS](https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/). React Native brings what developers are used to from React on the web — declarative self-contained UI components and fast development cycles — to the mobile platform, while retaining the speed, fidelity, and feel of native applications. Today, we're happy to release React Native for Android.\n\nAt Facebook we've been using React Native in production for over a year now. Almost exactly a year ago, our team set out to develop the [Ads Manager app](https://www.facebook.com/business/news/ads-manager-app). Our goal was to create a new app to let the millions of people who advertise on Facebook manage their accounts and create new ads on the go. It ended up being not only Facebook's first fully React Native app but also the first cross-platform one. In this post, we'd like to share with you how we built this app, how React Native enabled us to move faster, and the lessons we learned.\n\n<footer>\n <a href=\"https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/\" class=\"btn\">Read more</a>\n</footer>\n\n> This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/).\n",
"publishedAt": "2015-09-14",
"excerpt": "Earlier this year, we introduced React Native for iOS. React Native brings what developers are used to from React on the web — declarative self-contained UI components and fast development cycles — to the mobile platform, while retaining the speed, fidelity, and feel of native applications. Today, we're happy to release React Native for Android.",
"title": "React Native for Android: How we built the first cross-platform React Native app",
"author": "Daniel Witte",
"authorTitle": "Software Engineer at Facebook",
"authorURL": "https://www.facebook.com/drwitte",
"authorImage": "https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-1/c54.54.681.681/s160x160/20622_10100459314481893_1435252658_n.jpg?_nc_log=1&oh=7afdb6aaa02f320c4dd4749733140133&oe=59D77C28",
"hero": "/react-native/blog/img/blue-hero.jpg",
"category": "announcements"
},
{
"path": "2015/03/26/react-native-bringing-modern-web-techniques-to-mobile.html",
"content": "\nWe introduced [React](https://code.facebook.com/projects/176988925806765/react/) to the world two years ago, and since then it's seen impressive growth, both inside and outside of Facebook. Today, even though no one is forced to use it, new web projects at Facebook are commonly built using React in one form or another, and it's being broadly adopted across the industry. Engineers are choosing to use React every day because it enables them to spend more time focusing on their products and less time fighting with their framework. It wasn't until we'd been building with React for a while, though, that we started to understand what makes it so powerful.\n\nReact forces us to break our applications down into discrete components, each representing a single view. These components make it easier to iterate on our products, since we don't need to keep the entire system in our head in order to make changes to one part of it. More important, though, React wraps the DOM's mutative, imperative API with a declarative one, which raises the level of abstraction and simplifies the programming model. What we've found is that when we build with React, our code is a lot more predictable. This predictability makes it so we can iterate more quickly with confidence, and our applications are a lot more reliable as a result. Additionally, it's not only easier to scale our applications when they're built with React, but we've found it's also easier to scale the size of our teams themselves.\n\nTogether with the rapid iteration cycle of the web, we've been able to build some awesome products with React, including many components of Facebook.com. Additionally, we've built amazing frameworks in JavaScript on top of React, like [Relay](https://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html), which allows us to greatly simplify our data fetching at scale. Of course, web is only part of the story. Facebook also has widely used Android and iOS apps, which are built on top of disjointed, proprietary technology stacks. Having to build our apps on top of multiple platforms has bifurcated our engineering organization, but that's only one of the things that makes native mobile application development hard.\n\n<footer>\n <a href=\"https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/\" class=\"btn\">Read more</a>\n</footer>\n\n> This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/).\n",
"publishedAt": "2015-03-26",
"excerpt": "We introduced React to the world two years ago, and since then it's seen impressive growth, both inside and outside of Facebook. Today, even though no one is forced to use it, new web projects at Facebook are commonly built using React in one form or another, and it's being broadly adopted across the industry. Engineers are choosing to use React every day because it enables them to spend more time focusing on their products and less time fighting with their framework. It wasn't until we'd been building with React for a while, though, that we started to understand what makes it so powerful.",
"title": "React Native: Bringing modern web techniques to mobile",
"author": "Tom Occhino",
"authorTitle": "Engineering Manager at Facebook",
"authorURL": "https://github.com/tomocchino",
"authorImage": "https://avatars0.githubusercontent.com/u/13947?v=3&s=460",
"authorTwitter": "tomocchino",
"hero": "/react-native/blog/img/dark-hero.png",
"category": "announcements"
}
]
};
Reference in New Issue View Git Blame Copy Permalink