diff --git a/.alexignore b/.alexignore index 51e702fba1be78..57b6789de3d00c 100644 --- a/.alexignore +++ b/.alexignore @@ -22,7 +22,6 @@ website/versioned_docs/version-0.29/ website/versioned_docs/version-0.31/ website/versioned_docs/version-0.32/ website/versioned_docs/version-0.33/ -website/versioned_docs/version-0.34/ website/versioned_docs/version-0.43/ website/versioned_docs/version-0.46/ website/versioned_docs/version-0.53/ diff --git a/website/versioned_docs/version-0.34/animated.md b/website/versioned_docs/version-0.34/animated.md index 89e62591f10006..e701a537c941ac 100644 --- a/website/versioned_docs/version-0.34/animated.md +++ b/website/versioned_docs/version-0.34/animated.md @@ -4,9 +4,9 @@ title: Animated original_id: animated --- -Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain. +Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and painless to build and maintain. -The simplest workflow is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates either via animations, such as `Animated.timing`, or by hooking into gestures like panning or scrolling via `Animated.event`. `Animated.Value` can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted: +The most basic workflow is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates either via animations, such as `Animated.timing`, or by hooking into gestures like panning or scrolling via `Animated.event`. `Animated.Value` can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted: ```jsx class FadeInView extends React.Component { @@ -36,7 +36,7 @@ class FadeInView extends React.Component { } ``` -Note that only animatable components can be animated. `View`, `Text`, and `Image` are already provided, and you can create custom ones with `createAnimatedComponent`. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default. +Note that only animatable components can be animated. `View`, `Text`, and `Image` are already provided, and you can create custom ones with `createAnimatedComponent`. These unique components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default. Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation. @@ -44,7 +44,7 @@ A single `Animated.Value` can drive any number of properties, and each property For example, you may want to think about your `Animated.Value` as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to -1. This can easily be done by modifying `style` in the example above like so: +1. This can be done by modifying `style` in the example above like so: ```jsx style={{ @@ -58,7 +58,7 @@ For example, you may want to think about your `Animated.Value` as going from 0 t }}> ``` -Animations can also be combined in complex ways using composition functions such as `sequence` and `parallel`, and can also be chained together simply by setting the `toValue` of one animation to be another `Animated.Value`. +Animations can also be combined in complex ways using composition functions such as `sequence` and `parallel`, and can also be chained together by setting the `toValue` of one animation to be another `Animated.Value`. `Animated.ValueXY` is handy for 2D animations, like panning, and there are other helpful additions like `setOffset` and `getLayout` to aid with typical interaction patterns, like drag-and-drop. diff --git a/website/versioned_docs/version-0.34/layout-props.md b/website/versioned_docs/version-0.34/layout-props.md index 13a3246d7f8276..702981dd5f32d9 100644 --- a/website/versioned_docs/version-0.34/layout-props.md +++ b/website/versioned_docs/version-0.34/layout-props.md @@ -443,11 +443,11 @@ Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBotto ### `position` -`position` in React Native is similar to regular CSS, but everything is set to `relative` by default, so `absolute` positioning is always just relative to the parent. +`position` in React Native is similar to regular CSS, but everything is set to `relative` by default, so `absolute` positioning is always relative to the parent. If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have `absolute` position. -If you want to position a child relative to something that is not its parent, just don't use styles for that. Use the component tree. +If you want to position a child relative to something that is not its parent, don't use styles for that. Use the component tree. See https://github.com/facebook/css-layout for more details on how `position` differs between React Native and CSS. diff --git a/website/versioned_docs/version-0.34/modal.md b/website/versioned_docs/version-0.34/modal.md index e9c8266fc5749b..27e4b9a645bd32 100644 --- a/website/versioned_docs/version-0.34/modal.md +++ b/website/versioned_docs/version-0.34/modal.md @@ -4,7 +4,7 @@ title: Modal original_id: modal --- -The Modal component is a simple way to present content above an enclosing view. +The Modal component is a basic way to present content above an enclosing view. _Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator. Go [here](navigator-comparison.md) to compare navigation options._ diff --git a/website/versioned_docs/version-0.34/navigatorios.md b/website/versioned_docs/version-0.34/navigatorios.md index 72526afac55647..d7a3f25bf41212 100644 --- a/website/versioned_docs/version-0.34/navigatorios.md +++ b/website/versioned_docs/version-0.34/navigatorios.md @@ -215,7 +215,7 @@ The default background color of the navigation bar. ### `interactivePopGestureEnabled` -Boolean value that indicates whether the interactive pop gesture is enabled. This is useful for enabling/disabling the back swipe navigation gesture. +Boolean value that indicates whether the interactive `pop` gesture is enabled. This is useful for enabling/disabling the back swipe navigation gesture. If this prop is not provided, the default behavior is for the back swipe gesture to be enabled when the navigation bar is shown and disabled when the navigation bar is hidden. Once you've provided the `interactivePopGestureEnabled` prop, you can never restore the default behavior. @@ -323,7 +323,7 @@ Go back N scenes at once. When N=1, behavior matches `pop()`. pop(); ``` -Pop back to the previous scene. +`Pop` back to the previous scene. --- @@ -424,7 +424,7 @@ Replaces the previous route/view and transitions back to it. resetTo((route: object)); ``` -Replaces the top item and pop to it. +Replaces the top item and `pop` to it. **Parameters:** diff --git a/website/versioned_docs/version-0.34/textinput.md b/website/versioned_docs/version-0.34/textinput.md index 8601f688a2e10a..54b8d5ebeb7360 100644 --- a/website/versioned_docs/version-0.34/textinput.md +++ b/website/versioned_docs/version-0.34/textinput.md @@ -6,7 +6,7 @@ original_id: textinput A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. -The simplest use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple example: +The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A basic example: ```SnackPlayer import React, { Component } from 'react'; @@ -192,7 +192,7 @@ If `true`, the text field will blur when submitted. The default value is true fo ### `defaultValue` -Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync. +Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync. | Type | Required | | ---------------- | -------- | @@ -455,7 +455,7 @@ The highlight (and cursor on iOS) color of the text input. ### `value` -The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. +The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. | Type | Required | | ---------------- | -------- |