brentvatne

indeed! this plugin does the trick too: https://www.npmjs.com/package/eslint-plugin-react-native-glo...

re: react-navigation, I am one of the two primary maintainers of this project and I started working on it in January of this year because it was in a pretty rough state. I think it has come a long way in that time even though there is still plenty to do. I would love to hear what simple things have taken hours for you when using it, feel free to reach out on Twitter in DM @notbrent or email brent at expo dot io. Also, the roadmap for our next major version is here: https://github.com/react-navigation/react-navigation/issues/....

I can't speak to the original intentions of the authors, but I suspect it might be related to difficulty of making significant changes to the project due to some strongly held beliefs.

An example: react-native depends on alpha/beta versions of react, and libraries in the react-native ecosystem tend to include a peer dependency on react (eg: react >= 15). React 16.0.0-alpha.12 will not satisfy this range, but 16.0.0 will. It's unclear to me in what way it is useful to exclude pre-release versions, and this causes a lot of confusion for users. I posted about it here: https://github.com/npm/npm/issues/8854 and it was shutdown for ideological reasons, rather than practical considerations. On the other hand, someone submitted a patch to yarn to improve this behaviour and it was quickly accepted: https://github.com/yarnpkg/yarn/pull/3361.

There is some undesirable horizontal scrolling on this page for me (mbp 13") -- fixed by adding `overflow: hidden` to `div role="main"` element.

It integrates with it using the snack-sdk: https://github.com/expo/snack-sdk

repl.it integrates this with their classrooms product to make it into a structured learning tool with assignments and automatic evaluation of solutions. Direct link to the course: https://repl.it/community/classrooms/17650

Sorry about that, the site was down for about 6 minutes around when you visited it.

We use Apollo for the http://expo.io/ client and have found it to be extremely pleasant to use. I love how flexible it is too -- you can use it for weird things like building an ORM layer for SQLite. For example: https://github.com/brentvatne/apollo-sqlite-experiment/blob/... -- the queries here go through a custom NetworkInterface which use a pretty simple graphql resolver (https://github.com/brentvatne/apollo-sqlite-experiment/blob/...) built on graphql-anywhere to pull the data out of the DB.

Here's a fun example of a pretty common UI pattern -- the header transitions into another as you scroll, and the hero image scales / fades depending on scroll position too: https://sketch.expo.io/SyVvB3Hjx -- it uses React Native's native animated driver with ScrollViews :)

Sketch, create-react-native-app and React Native Express are a great combo I think ;)

(for people who aren't aware of it, React Native Express is a fantastic site for getting your bearings with React Native: http://www.reactnativeexpress.com/)

I'm confused what the point of your comment is. If you can do it natively you can do it with React Native. "The jump" for any app from not including Rollout-style invocations to including them is the same if it's a React Native app or a normal native app, and these can all be determined by static analysis by Apple during the review process.

Hi there!

- This guide from Microsoft explains how to use typescript: http://www.reactnative.tools/tutorials/2016/09/20/reactnativ...

- This is a bit old but could help with Mocha setup: https://formidable.com/blog/2016/02/08/unit-testing-react-na...

Hope that helps!

Hello!

The examples use a navigation library that is implemented entirely in JavaScript and it does not currently aim for 100% accuracy for platform gestures and animations. Pure JS navigation is a work in progress with React Native but, in my eyes, it's the ideal end-state (see a post I wrote here for more info: https://blog.expo.io/good-practices-why-you-should-use-javas...), but to get there we need some more powerful low level primitives such as a better gesture API.

If you prefer to trade-off customizability for platform-specific animations, you can use NavigatorIOS with Expo/CRNA - https://facebook.github.io/react-native/docs/navigatorios.ht.... If you eject, you can use a library like react-native-navigation (https://github.com/wix/react-native-navigation) which bridges the native navigation APIs, or an upcoming library from Airbnb which they use in their app.

Also, I'm curious which examples stood out to you. The "Growler Prowler" app intentionally pushes a screen on top without sharing a navbar, even though this is possible, because this works better for the detail screen. See the beautiful PocketCasts app (https://www.shiftyjelly.com/pocketcasts/) for the design inspiration there.

Hope that helps!

> taking a queue

s/queue/cue

this is correct

this is indeed the project mentioned in the roadmap!

react-navigation has very different goals, and it's still in beta, things like transitions are likely to change significantly before 1.0 release.

The main difference in the goals is that react-navigation is intended to be entirely cross-platform, including iOS, Android, ReactVR, and web. It's implemented entirely in JavaScript which has a huge upside because you can ship updates to it OTA and you can submit patches without needing to know ObjC/Java and the platform's respective navigation APIs. It will be an important library to push forward development of more powerful general purpose native APIs, for example the native driver for Animated was built with the intention of making it possible to run navigation transitions on the UI thread. Similarly, this will be an important use case for a better gesture API (https://twitter.com/notbrent/status/824683858037649408). I wrote more about why we should try to use JavaScript as much as possible with React Native here: https://blog.getexponent.com/good-practices-why-you-should-u...

OTOH, if what you need is a navigation library that is 100% faithful to the platform's built-in APIs, and you need that right now, then you will probably want to use something like react-native-navigation (Airbnb is working on open sourcing a similar library that they use in their app).

yup! the documentation uses react-navigation: https://github.com/react-community/react-navigation/blob/mas...

This is the best way to get started learning React Native, really amazing work Devin!

Do they have a ViewPager? A DrawerLayout? Swipable rows in lists (eg: to delete an item)?

Also v2 is not the best thing to point to because it's very new and I don't think many people are using it compared with v1. And closed issues don't necessarily mean fixed, eg: https://github.com/driftyco/ionic/issues/9052 -- I believe all WebView based apps suffer from the problem described in this issue.

The browser has a bunch of behaviors that get in the way. The Ionic team could speak better to what is preventing them from implementing these gestures, or you could browse their issues to get an idea too: https://github.com/driftyco/ionic/issues?utf8=%E2%9C%93&q=ge...

Agreed, they've done a really great job and pushed it to the limits. Unfortunately they do not have support for even simple gestures, so the parent comment still applies -- afaict it's not possible with WebViews currently.

I think 60fps is not "extreme performance" but rather expected performance for a mobile app. Only one part of this article was about performance, anyhow.

Deco is great! We'd love to get Exponent and Deco playing well together, we've discussed it with their team but haven't had the time yet -- it'll happen one day.

There are a few of ways to do this right now:

- Fork the Exponent client and add your native API.

- Try to get a patch into upstream.

- If it's not urgent, ask us if we plan to implement it and if it seems like a common enough use case we would add it to our roadmap.

- Go into the Exponent source and copy whatever native code you need into a new React Native project.

We're also working on a way to "eject" from Exponent similar to the create-react-app eject command but easier to reverse and to keep receiving updates to Exponent, because it's not an "all-in" kind of eject, you can read more about that here: https://blog.getexponent.com/answered-on-slack-ejecting-from... (caveat: this feature is still in early development)

For unit tests, we prefer Jest. We don't have a preference for acceptance testing, you could use Appium or similar tools for that.

To add on to Jesse's answer, Charlie Cheever (co-founder of Exponent with James Ide) wrote a blog post about this recently: "Exponent is Free" - https://blog.getexponent.com/exponent-is-free-as-in-and-as-i...

Hi all! Thanks for the post! Here are some links to help you check out Exponent and get any idea what it can do -- all you need to do is download the Exponent client from the app / play store and you can open any of these:

- Pocketgear - a pokedex app: https://getexponent.com/@rncommunity/pocketgear

- A fun little app I've been working on for a few days for an upcoming talk: https://getexponent.com/@community/growler-prowler

- An IP Subnet Calculator: https://getexponent.com/@levic92/ipcalc

- The navigation/routing library that we recommend to be used with Exponent: https://getexponent.com/@community/ex-navigation-example

- A work-in-progress showcase of animations that you can do with React Native / Exponent: https://getexponent.com/@community/animations-showcase

- Shared element transitions are possible too: https://getexponent.com/@janic/shared-elements

- A showcase of some of the components that you can use with Exponent: https://getexponent.com/@notbrent/native-component-list (tap out the ^ icon in the top right)

- "Floaty Plane" - a simple game: http://getexponent.com/@exponent/floatyplane

- An experiment to re-create basic Wunderlist UI: https://getexponent.com/@mastermo/wunderlist

- A pre-launch version of "React Native Playground" in Exponent: https://getexponent.com/@rnplay/rnplay (just sign in as a guest and go to the Explore tab)

- An image gallery example: https://getexponent.com/@community/image-gallery-example

- A Pomodoro app UI: https://getexponent.com/@exponent/pomodoro

- A tab view component demo: http://exp.host/@rncommunity/react-native-tab-view-demos

The largest app on our platform right now is li.st for Android: https://play.google.com/store/apps/details?id=st.li.listapp&...

Hi there! I work on Exponent.

We intentionally chose to not let users drop down to native -- the idea of having an interpreted language that sits on top of a native runtime on multiple platforms is not a new one, and it allows for so many benefits that you lose out on if developers can add arbitrary compiled code with direct access to system APIs.

Additionally, there is a significant value-add of using Exponent in terms of upgrades. As great as React Native is, it also moves extremely fast and it can be difficult to keep up with new releases -- a change in React Native might cause several of your native dependencies to break, and you'll need to fork those libraries and fix them if the maintainer isn't keeping on the same schedule as you. Updates with Exponent are as simple as updating JavaScript, which has much less churn and breaking changes than the native side (the React API itself is very mature, the APIs for specific native components may change).

Another nice advantage of this is that you can work on an iOS app from Windows and Linux, because you don't need to compile your app with Xcode (we handle builds for you when you want to ship to the app store, before that you can just use the Exponent client).

We ship with a bunch of APIs out of the box and are constantly improving them and adding more. We have analytics tools like Amplitude and Segment built in, Maps, Facebook login (working on Google Login), and more: https://docs.getexponent.com/versions/latest/index.html

React Native is still very early, though, and Exponent is just a small team of seven, so we understand that we can't possibly expose every API that developers working with the platform might want. So, we are working on a way for developers to be able to still take advantage of the Exponent toolchain and layer on native code. I've written up our approach in more detail here: https://blog.getexponent.com/answered-on-slack-ejecting-from...

- No clear roadmap

Indeed this would be nice to have!

- No guarantees from Facebook about longevity

As more products within Facebook (eg: Instagram) and companies outside of Facebook are depending on this (Airbnb, Netflix, Alibaba, Microsoft, Baidu, Uber), there is a bigger community of folks who share the burden of keeping it going.

- Legal concerns

This is the same license as React. Given the breadth of companies depending on React (all of those mentioned above, plus thousands more), I suspect that their legal departments considered it to be acceptable. If you don't, that's certainly fine!

- JavaScript problems

JavaScript does have plenty of problems, but it's also what enables a lot of the nice things about React Native (x-platform, ota updates, resource sharing -- as the author identified).

- Alternate frameworks: Xamarin, Appcelerator

I'd like to see the author write a similar assessment of these tools! It's worth noting that the author seemed to be unaware of the existence of React Native for UWP, maybe that would alter his assessment.

import React from 'react'; import ReactDOM from 'react-dom';

function App(props) { return <div>Hello {props.name}</div>; }

ReactDOM.render( <App name="nichochar" />, document.getElementById('root') );

Or the alternative component API that has componentWillMount, componentDidMount, componentWillReceiveProps, shouldComponentUpdate, componentDidUpdate, componentWillUnmount, and render.

That's pretty much all there is