LayoutAnimation in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import LayoutAnimation from React Native.

React Native

import { View, Text, [1] } from 'react-native';

Drag options to blanks, or click blank then click option'

AAnimated

BStyleSheet

CLayoutAnimation

DTouchableOpacity

Attempts:

3 left

💡 Hint

Common Mistakes

Importing Animated instead of LayoutAnimation.

Forgetting to import LayoutAnimation.

You need to import LayoutAnimation to use it for animating layout changes.

2fill in blank

medium

Complete the code to configure the next layout animation with the preset 'easeInEaseOut'.

React Native

LayoutAnimation.[1](LayoutAnimation.Presets.easeInEaseOut);

Drag options to blanks, or click blank then click option'

Abegin

BconfigureNext

Cstart

DanimateNext

Attempts:

3 left

💡 Hint

Common Mistakes

Using start or animateNext which do not exist.

Forgetting to call configureNext before layout change.

The method configureNext tells React Native to animate the next layout change.

3fill in blank

hard

Fix the error in the code to enable LayoutAnimation on Android.

React Native

if (Platform.OS === 'android' && UIManager.[1]) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

Drag options to blanks, or click blank then click option'

AenableExperimentalLayoutAnimation

BenableLayoutAnimation

CsetLayoutAnimationEnabled

DsetLayoutAnimationEnabledExperimental

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect method names that do not exist.

Not enabling experimental LayoutAnimation on Android.

On Android, you must call UIManager.setLayoutAnimationEnabledExperimental(true) to enable LayoutAnimation.

4fill in blank

hard

Fill both blanks to create a button that triggers a layout animation on press.

React Native

import { LayoutAnimation, TouchableOpacity, Text } from 'react-native';

const onPress = () => {
  LayoutAnimation.[1](LayoutAnimation.Presets.spring);
  [2]();
};

Drag options to blanks, or click blank then click option'

AconfigureNext

BstartAnimation

CupdateState

DsetState

Attempts:

3 left

💡 Hint

Common Mistakes

Using startAnimation which does not exist.

Not calling a function to update the layout after animation.

Use configureNext to start the animation and then call a function like updateState to change the layout.

5fill in blank

hard

Fill all three blanks to define a LayoutAnimation config object with duration 300, type 'easeInEaseOut', and property 'opacity'.

React Native

const config = {
  duration: [1],
  update: {
    type: LayoutAnimation.Types.[2],
    property: LayoutAnimation.Properties.[3]
  }
};

Drag options to blanks, or click blank then click option'

AeaseInEaseOut

Bopacity

C300

Dspring

Attempts:

3 left

💡 Hint

Common Mistakes

Using string '300' instead of number 300.

Mixing up type and property values.

The duration is a number (300 ms), the type is easeInEaseOut, and the property animated is opacity.