diff --git a/README.md b/README.md index e7149427..4f366035 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,10 @@ Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge. "React Native for Web" is a project to bring React Native's building blocks and touch handling to the Web. [Read more](#why). +Browse the UI Explorer to see React Native [examples running on +Web](https://necolas.github.io/react-native-web/storybook/). Or try it out +online with [React Native for Web: Playground](http://codepen.io/necolas/pen/PZzwBR). + ## Quick start To install in your app: @@ -28,15 +32,71 @@ npm install --save react react-native-web Read the [Client and Server rendering](docs/guides/rendering.md) guide. -You can also bootstrap a standard React Native project structure for web by -using [react-native-web-starter](https://github.com/grabcode/react-native-web-starter). +Alternatively, you can quickly setup a local project +using [create-react-app](https://github.com/facebookincubator/create-react-app) +(which supports `react-native-web` out-of-the-box once installed) and +[react-native-web-starter](https://github.com/grabcode/react-native-web-starter). -## Examples +## Documentation -* React Native [examples running on Web](https://necolas.github.io/react-native-web/storybook/) -* [React Native for Web: Playground](http://codepen.io/necolas/pen/PZzwBR). +Guides: -Sample: +* [Accessibility](docs/guides/accessibility.md) +* [Client and server rendering](docs/guides/rendering.md) +* [Direct manipulation](docs/guides/direct-manipulation.md) +* [Internationalization](docs/guides/internationalization.md) +* [Known issues](docs/guides/known-issues.md) +* [React Native](docs/guides/react-native.md) +* [Style](docs/guides/style.md) + +Exported modules: + +* Components + * [`ActivityIndicator`](docs/components/ActivityIndicator.md) + * [`Image`](docs/components/Image.md) + * [`ListView`](docs/components/ListView.md) + * [`ScrollView`](docs/components/ScrollView.md) + * [`Switch`](docs/components/Switch.md) + * [`Text`](docs/components/Text.md) + * [`TextInput`](docs/components/TextInput.md) + * [`TouchableHighlight`](http://facebook.github.io/react-native/releases/0.22/docs/touchablehighlight.html) (mirrors React Native) + * [`TouchableOpacity`](http://facebook.github.io/react-native/releases/0.22/docs/touchableopacity.html) (mirrors React Native) + * [`TouchableWithoutFeedback`](docs/components/TouchableWithoutFeedback.md) + * [`View`](docs/components/View.md) +* APIs + * [`Animated`](http://facebook.github.io/react-native/releases/0.20/docs/animated.html) (mirrors React Native) + * [`AppRegistry`](docs/apis/AppRegistry.md) + * [`AppState`](docs/apis/AppState.md) + * [`AsyncStorage`](docs/apis/AsyncStorage.md) + * [`Dimensions`](docs/apis/Dimensions.md) + * [`I18nManager`](docs/apis/I18nManager.md) + * [`NativeMethods`](docs/apis/NativeMethods.md) + * [`NetInfo`](docs/apis/NetInfo.md) + * [`PanResponder`](http://facebook.github.io/react-native/releases/0.20/docs/panresponder.html#content) (mirrors React Native) + * [`PixelRatio`](docs/apis/PixelRatio.md) + * [`Platform`](docs/apis/Platform.md) + * [`StyleSheet`](docs/apis/StyleSheet.md) + * [`Vibration`](docs/apis/Vibration.md) + + +## Why? + +There are many different teams at Twitter building web applications with React. +We want to share React components, libraries, and APIs between teams…much like +the OSS community tries to do. At our scale, this involves dealing with +multiple, inter-related problems including: a common way to handle style, +animation, touch, viewport adaptation, accessibility, themes, RTL layout, and +server-rendering. + +This is hard to do with React DOM, as the components are essentially the same +low-level building blocks that the browser provides. However, React Native +avoids, solves, or can solve almost all these problems facing Web teams. +Central to this is React Native's JavaScript style API (not strictly +"CSS-in-JS") which avoids the key [problems with +CSS](https://speakerdeck.com/vjeux/react-css-in-js) by giving up some of the +complexity of CSS. + +## Example code ```js import React from 'react' @@ -75,73 +135,6 @@ AppRegistry.registerComponent('MyApp', () => App) AppRegistry.runApplication('MyApp', { rootTag: document.getElementById('react-root') }) ``` -## Documentation - -Guides: - -* [Accessibility](docs/guides/accessibility.md) -* [Client and server rendering](docs/guides/rendering.md) -* [Direct manipulation](docs/guides/direct-manipulation.md) -* [Known issues](docs/guides/known-issues.md) -* [React Native](docs/guides/react-native.md) -* [Style](docs/guides/style.md) - -Exported modules: - -* Components - * [`ActivityIndicator`](docs/components/ActivityIndicator.md) - * [`Image`](docs/components/Image.md) - * [`ListView`](docs/components/ListView.md) - * [`ScrollView`](docs/components/ScrollView.md) - * [`Switch`](docs/components/Switch.md) - * [`Text`](docs/components/Text.md) - * [`TextInput`](docs/components/TextInput.md) - * [`TouchableHighlight`](http://facebook.github.io/react-native/releases/0.22/docs/touchablehighlight.html) (mirrors React Native) - * [`TouchableOpacity`](http://facebook.github.io/react-native/releases/0.22/docs/touchableopacity.html) (mirrors React Native) - * [`TouchableWithoutFeedback`](docs/components/TouchableWithoutFeedback.md) - * [`View`](docs/components/View.md) -* APIs - * [`Animated`](http://facebook.github.io/react-native/releases/0.20/docs/animated.html) (mirrors React Native) - * [`AppRegistry`](docs/apis/AppRegistry.md) - * [`AppState`](docs/apis/AppState.md) - * [`AsyncStorage`](docs/apis/AsyncStorage.md) - * [`Dimensions`](docs/apis/Dimensions.md) - * [`I18nManager`](docs/apis/I18nManager.md) - * [`NativeMethods`](docs/apis/NativeMethods.md) - * [`NetInfo`](docs/apis/NetInfo.md) - * [`PanResponder`](http://facebook.github.io/react-native/releases/0.20/docs/panresponder.html#content) (mirrors React Native) - * [`PixelRatio`](docs/apis/PixelRatio.md) - * [`Platform`](docs/apis/Platform.md) - * [`StyleSheet`](docs/apis/StyleSheet.md) - * [`Vibration`](docs/apis/Vibration.md) - - -## Why? - -React Native is a comprehensive JavaScript framework for building application -user interfaces. It provides high-level, platform-agnostic components and APIs -– e.g., `Text`, `View`, `Touchable*`, `Animated`, `StyleSheet` - that simplify -working with layout, gestures, animations, and styles. The entire React Native -ecosystem can depend on these shared building blocks. - -In contrast, the React DOM ecosystem is limited by the lack of a higher-level -framework. At Twitter, we want to seamlessly author and share React component -libraries between different Web applications (with increasing interest from -product teams for multi-platform solutions). This goal draws together multiple, -inter-related problems including: styling, animation, gestures, themes, -viewport adaptation, accessibility, diverse build processes, and RTL layouts. - -Almost all these problems are avoided, solved, or can be solved in React -Native. Central to this is React Native's JavaScript style API (not strictly -"CSS-in-JS") which avoids the key [problems with -CSS](https://speakerdeck.com/vjeux/react-css-in-js). By giving up some of the -complexity of CSS it also provides a reliable surface for style composition, -animation, gestures, server-side rendering, RTL layout; and removes the -requirement for CSS-specific build tools. - -Bringing the React Native APIs and components to the Web has the added benefit -of allowing teams to explore code-sharing between Native and Web platforms. - ## Related projects * [react-native-web-starter](https://github.com/grabcode/react-native-web-starter) diff --git a/docs/guides/internationalization.md b/docs/guides/internationalization.md new file mode 100644 index 00000000..b7b511c7 --- /dev/null +++ b/docs/guides/internationalization.md @@ -0,0 +1,34 @@ +# Internationalization + +To support right-to-left languages, application layout can be automatically +flipped from LTR to RTL. The `I18nManager` API can be used to help with more +fine-grained control and testing of RTL layouts. + +React Native for Web provides an experimental feature to support "true left" +and "true right" styles. For example, `left` will be flipped to `right` in RTL +mode, but `left$noI18n` will not. More information is available in the `Text` +and `View` documentation. + +## Working with icons and images + +Icons and images that must match the LTR or RTL layout of the app need to be manually flipped. + +Either use a transform style: + +```js + +``` + +Or replace the source asset: + +```js +import imageSourceLTR from './back.png'; +import imageSourceRTL from './forward.png'; + + +```