diff --git a/docs/next/animations.html b/docs/next/animations.html index b5a09d8b2c2..73c315ebb06 100644 --- a/docs/next/animations.html +++ b/docs/next/animations.html @@ -286,7 +286,7 @@ Animated.tim {content} </Animated.ScrollView> -

You can see the native driver in action by running the RNTester app, then loading the Native Animated Example. You can also take a look at the source code to learn how these examples were produced.

+

You can see the native driver in action by running the RNTester app, then loading the Native Animated Example. You can also take a look at the source code to learn how these examples were produced.

Caveats

Not everything you can do with Animated is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like transform and opacity will work, but Flexbox and position properties will not. When using 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.

When an animation is running, it can prevent VirtualizedList components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use isInteraction: false in your animation's config to prevent this issue.

diff --git a/docs/next/animations/index.html b/docs/next/animations/index.html index b5a09d8b2c2..73c315ebb06 100644 --- a/docs/next/animations/index.html +++ b/docs/next/animations/index.html @@ -286,7 +286,7 @@ Animated.tim {content} </Animated.ScrollView> -

You can see the native driver in action by running the RNTester app, then loading the Native Animated Example. You can also take a look at the source code to learn how these examples were produced.

+

You can see the native driver in action by running the RNTester app, then loading the Native Animated Example. You can also take a look at the source code to learn how these examples were produced.

Caveats

Not everything you can do with Animated is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like transform and opacity will work, but Flexbox and position properties will not. When using 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.

When an animation is running, it can prevent VirtualizedList components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use isInteraction: false in your animation's config to prevent this issue.

diff --git a/docs/next/getting-started.html b/docs/next/getting-started.html index 05d351b29c8..12f76ac6c28 100644 --- a/docs/next/getting-started.html +++ b/docs/next/getting-started.html @@ -364,7 +364,11 @@ npx react-native run-ios

If you use the Yarn package manager, you can use yarn instead of npx when running React Native commands inside an existing project.

-

Run npx react-native run-android inside your React Native project folder:

+

Run npx react-native start inside your React Native project folder:

+
cd AwesomeProject
+npx react-native start
+
+

On another terminal, run npx react-native run-android:

cd AwesomeProject
 npx react-native run-android
diff --git a/docs/next/getting-started/index.html b/docs/next/getting-started/index.html index 05d351b29c8..12f76ac6c28 100644 --- a/docs/next/getting-started/index.html +++ b/docs/next/getting-started/index.html @@ -364,7 +364,11 @@ npx react-native run-ios

If you use the Yarn package manager, you can use yarn instead of npx when running React Native commands inside an existing project.

-

Run npx react-native run-android inside your React Native project folder:

+

Run npx react-native start inside your React Native project folder:

+
cd AwesomeProject
+npx react-native start
+
+

On another terminal, run npx react-native run-android:

cd AwesomeProject
 npx react-native run-android
diff --git a/docs/next/typescript.html b/docs/next/typescript.html index 4426366caf2..59c3bf6aa29 100644 --- a/docs/next/typescript.html +++ b/docs/next/typescript.html @@ -147,31 +147,31 @@ const Hello: React.FC<Props> = (props) => { const getExclamationMarks = (numChars: number) => Array(numChars + 1).join('!'); return ( <View style={styles.root}> - <Text style={styles.greeting}> - Hello{' '} - {props.name + getExclamationMarks(enthusiasmLevel || 0)} - </Text> + <Text style={styles.greeting}> + Hello{' '} + {props.name + getExclamationMarks(enthusiasmLevel || 0)} + </Text> - <View style={styles.buttons}> - <View style={styles.button}> - <Button - title="-" - onPress={onDecrement} - accessibilityLabel="decrement" - color="red" - /> - </View> + <View style={styles.buttons}> + <View style={styles.button}> + <Button + title="-" + onPress={onDecrement} + accessibilityLabel="decrement" + color="red" + /> + </View> - <View style={styles.button}> - <Button - title="+" - onPress={onIncrement} - accessibilityLabel="increment" - color="blue" - /> + <View style={styles.button}> + <Button + title="+" + onPress={onIncrement} + accessibilityLabel="increment" + color="blue" + /> + </View> </View> </View> - </View> ); } @@ -182,7 +182,7 @@ const styles = StyleSheet.create({ alignSelf: 'center', }, buttons: { - flexDirection: 'row', + flexDirection: 'row', minHeight: 70, alignItems: 'stretch', alignSelf: 'center', diff --git a/docs/next/typescript/index.html b/docs/next/typescript/index.html index 4426366caf2..59c3bf6aa29 100644 --- a/docs/next/typescript/index.html +++ b/docs/next/typescript/index.html @@ -147,31 +147,31 @@ const Hello: React.FC<Props> = (props) => { const getExclamationMarks = (numChars: number) => Array(numChars + 1).join('!'); return ( <View style={styles.root}> - <Text style={styles.greeting}> - Hello{' '} - {props.name + getExclamationMarks(enthusiasmLevel || 0)} - </Text> + <Text style={styles.greeting}> + Hello{' '} + {props.name + getExclamationMarks(enthusiasmLevel || 0)} + </Text> - <View style={styles.buttons}> - <View style={styles.button}> - <Button - title="-" - onPress={onDecrement} - accessibilityLabel="decrement" - color="red" - /> - </View> + <View style={styles.buttons}> + <View style={styles.button}> + <Button + title="-" + onPress={onDecrement} + accessibilityLabel="decrement" + color="red" + /> + </View> - <View style={styles.button}> - <Button - title="+" - onPress={onIncrement} - accessibilityLabel="increment" - color="blue" - /> + <View style={styles.button}> + <Button + title="+" + onPress={onIncrement} + accessibilityLabel="increment" + color="blue" + /> + </View> </View> </View> - </View> ); } @@ -182,7 +182,7 @@ const styles = StyleSheet.create({ alignSelf: 'center', }, buttons: { - flexDirection: 'row', + flexDirection: 'row', minHeight: 70, alignItems: 'stretch', alignSelf: 'center',