void') %}
A pointer down event occured on the screen. The responder is notified of all start events, even if the pointer target is not this view (i.e., additional pointers are being used). Therefore, this callback may be called multiple times while the view is the responder.
@@ -153,7 +153,7 @@ A pointer up event occured on the screen. The responder is notified of all end e
{% endcall %}
{% call macro.prop('onResponderRelease', '?(event: ResponderEvent) => void') %}
-As soon as there are no more pointers that *started* inside descendants of the responder, this callback is called on the responder and the interaction lock is released. This is the point at which you should provide visual feedback for users that the interaction is over.
+As soon as there are no more pointers that _started_ inside descendants of the responder, this callback is called on the responder and the interaction lock is released. This is the point at which you should provide visual feedback for users that the interaction is over.
{% endcall %}
### ResponderEvent
diff --git a/packages/react-native-web-docs/src/pages/docs/concepts/localization.md b/packages/react-native-web-docs/src/pages/docs/concepts/localization.md
index 547024d034..f42ab3e153 100644
--- a/packages/react-native-web-docs/src/pages/docs/concepts/localization.md
+++ b/packages/react-native-web-docs/src/pages/docs/concepts/localization.md
@@ -15,7 +15,6 @@ A guide to producing localized layout for different locales.
{{ site.name }} provides simple mechanisms to automatically flip layouts to match the writing direction of the app or a specific component tree.
-
## Localization styles
The non-standard [direction-independent style properties and values]({{ '/docs/styling/#non-standard-properties' | url }}) (e.g., `marginStart`) should be used as much as possible. {{ site.name }} will automatically flip the direction of these properties within subtrees based on the writing direction of the ancestor tree.
@@ -23,9 +22,7 @@ The non-standard [direction-independent style properties and values]({{ '/docs/s
```jsx
// "start" is "left" for LTR and "right" for RTL
const style = { paddingInlineStart: 10, marginInlineStart: 10 };
-return (
-
-);
+return
;
```
## Localization props
diff --git a/packages/react-native-web-docs/src/pages/docs/concepts/rendering.md b/packages/react-native-web-docs/src/pages/docs/concepts/rendering.md
index d06500a016..effbb01177 100644
--- a/packages/react-native-web-docs/src/pages/docs/concepts/rendering.md
+++ b/packages/react-native-web-docs/src/pages/docs/concepts/rendering.md
@@ -13,7 +13,7 @@ Client and server rendering with {{ site.name }}.
React Native for Web can be used for multi-platform and web-only applications. It can incrementally adopted by existing React Web apps and integrated with existing React Native apps. Preact is also supported.
-{{ site.name }} components interoperate with React DOM components. They can be incrementally introduced at any point in an application's component tree. One thing to be aware of is that external CSS applied to *all* tags in a document may interfere with the default rendering of some {{ site.name }} components.
+{{ site.name }} components interoperate with React DOM components. They can be incrementally introduced at any point in an application's component tree. One thing to be aware of is that external CSS applied to _all_ tags in a document may interfere with the default rendering of some {{ site.name }} components.
---
@@ -42,7 +42,7 @@ Or render individual components:
import { render } from 'react-native';
import Header from './src/Header';
-render(
, document.getElementById('header'))
+render(
, document.getElementById('header'));
```
You might need to adjust the styles of the HTML document's root elements for your app to fill the viewport.
@@ -51,6 +51,8 @@ You might need to adjust the styles of the HTML document's root elements for you
+
+
```
:::callout
@@ -72,7 +74,9 @@ import { AppRegistry } from 'react-native-web';
AppRegistry.registerComponent('App', () => App);
// prerender the app
-const { element, getStyleElement } = AppRegistry.getApplication('App', { initialProps });
+const { element, getStyleElement } = AppRegistry.getApplication('App', {
+ initialProps
+});
// first the element
const html = ReactDOMServer.renderToString(element);
// then the styles (optionally include a nonce if your CSP policy requires it)
@@ -90,5 +94,5 @@ ${css}
${html}
-`
+`;
```
diff --git a/packages/react-native-web-docs/src/pages/docs/concepts/styling.md b/packages/react-native-web-docs/src/pages/docs/concepts/styling.md
index fef21c6d8c..5917781f6b 100644
--- a/packages/react-native-web-docs/src/pages/docs/concepts/styling.md
+++ b/packages/react-native-web-docs/src/pages/docs/concepts/styling.md
@@ -5,7 +5,7 @@ permalink: /docs/styling/index.html
eleventyNavigation:
key: Styling
parent: Concepts
- label: "Change"
+ label: 'Change'
---
{% import "fragments/macros.html" as macro with context %}
@@ -31,7 +31,7 @@ const Component = () =>