El documento presenta una introducción a las animaciones en React Native. Explica dos métodos principales para animaciones: LayoutAnimation, que anima automáticamente cambios en el diseño, y la Animated API, que permite animar valores como posición y tamaño de manera personalizada. También incluye ejemplos y buenas prácticas para implementar animaciones de forma óptima.

2. Nuestras
locaciones

3. Nuestros
Panelistas
Kerly Pereda
Senior Front End Developer
Jans Álvarez
Marketing Analyst

4. Agenda
• Conceptos Básicos.
• LayoutAnimation.
• Animated API.
• Ejemplo.
• Buenas Prácticas.
• Un poco más: Lottie.
• Demo.
¿QUESTIONS?
#ReactNativeBSF

5. ¿QUESTIONS?
#ReactNativeBSFReact vs
React
Native
- Mobile.
- Fácil curva de aprendizaje.
- All you need is (love)
Javascript.
- React Native está basado
en React.
- DOM & Styling.
https://facebook.github.io/react-native/docs/getting-started

6. Animaciones
- No es un nuevo concepto:
flipbooks, dibujos, películas,
webs, apps, etc.
- Mejoran la experiencia del
usuario.
- Hacen atractiva la UI.
- No deberían afectar el
performance.

7. ¿QUESTIONS?
#ReactNativeBSF
LayoutAnimation

8. ¿QUESTIONS?
#ReactNativeBSF
- Anima automáticamente ante un
cambio en el layout (UI).
- Su método principal es
ConfigureNext: recibe de
parámetro un objeto con la duración
y la configuración de create, update
y delete.
- Cuenta con Presets de configuración
de animaciones ya definidos.
- Configurar (lanzar) la animación
antes de un “setState”.
- Solo anima opacity y scale.

9. ¿QUESTIONS?
#ReactNativeBSF

10. ¿QUESTIONS?
#ReactNativeBSF

11. ¿QUESTIONS?
#ReactNativeBSF
- Tener cuidado con la cantidad
de veces que llamamos a los
métodos de LayoutAnimation o
habrá override.
- No permite animar algunas
propiedades (aún).
- No se puede determinar que
elementos del layout (UI)
deberían animarse y cuáles no.

12. <Animated.View>
<View>
¿QUESTIONS?
#ReactNativeBSF
ANIMATED
API

13. ¿QUESTIONS?
#ReactNativeBSF
- Animated exporta: View, Text, ScrollView, Image,
FlatList and SectionList.
- Puedes crear componentes propios con :
Animated.createAnimatedComponent()
- Métodos más comunes:
Configuración:
➔ Animated.timing()
➔ Animated.spring()
Componer:
➔ Animated.parallel()
➔ Animated.sequence()
➔ Animated.delay()
Combinar valores:
➔ Animated.add()
➔ Animated.substract()
➔ Animated.divide()
➔ Animated.multiply()

14. ¿QUESTIONS?
#ReactNativeBSF
Primero declaramos los valores iniciales
de la animación.

15. ¿QUESTIONS?
#ReactNativeBSF

16. ¿QUESTIONS?
#ReactNativeBSF
- Animated.parallel -> para
animar en paralelo.
- Animated.sequence ->
para animar en secuencia.
- Animated.delay -> para
esperar cierto tiempo.
- Animated.loop -> para
repetir n veces.

17. ¿QUESTIONS?
#ReactNativeBSF
Ejemplo

18. ¿QUESTIONS?
#ReactNativeBSF
Lo que la UX está pensando:
Lo que el desarrollador ve:
Cómo debe verse:

19. ¿QUESTIONS?
#ReactNativeBSF
- Primera parte del video:
- Las estrellas rotan y escalan
tamaño.
- Los círculos escalan su tamaño.
- Segunda parte del video:
- Los circulos giran alrededo de un
eje, cambiando de posición (uno
encima de otro).
- Los círculos realizan esta acción dos
veces

20. ¿QUESTIONS?
#ReactNativeBSF

21. ¿QUESTIONS?
#ReactNativeBSF

22. ¿QUESTIONS?
#ReactNativeBSF

23. ¿QUESTIONS?
#ReactNativeBSF
Paso 1
Paso 2
Translate X
Paso 3
Scale

24. ¿QUESTIONS?
#ReactNativeBSF

25. ¿QUESTIONS?
#ReactNativeBSF

26. ¿QUESTIONS?
#ReactNativeBSF

27. ¿QUESTIONS?
#ReactNativeBSF

28. ¿QUESTIONS?
#ReactNativeBSF
Buenas
Prácticas

29. ¿QUESTIONS?
#ReactNativeBSF
- Tratar de evitar lag / lentitud de
performance causado por tantos re-
renders: shouldComponentUpdate.
- Evitar guardar valores de animación en
el state.
- useNativeDriver para Android.
- No anidar las animaciones: si alguna
animación requiriera estar en el state,
tratar de separarlo en un componente
pequeño.
- Siempre revisar issues abiertos en github
(para prevenir problemas entre ios o
android).

30. ¿QUESTIONS?
#ReactNativeBSF
Layout and Animated
LOTTIE

31. ¿QUESTIONS?
#ReactNativeBSF- Librería para renderear
animaciones de After
Effects.
- Disponible para: iOS,
android, web, y React
Native.
- After Effects exporta el
archivo de animación como
JSON (con ayuda de
Bodymovin como plugin).

32. ¿QUESTIONS?
#ReactNativeBSF

33. Demo

34. ¿QUESTIONS?
#RPABelatrix
¿QUESTIONS?
#ReactNativeBSF

36. ➔ https://facebook.github.io/react-native/docs/animations
➔ https://facebook.github.io/react-native/docs/layoutanimation
➔ https://www.opencodez.com/react-native/react-native-animation.htm
➔ https://opensource.com/article/18/6/getting-started-react-native-animations
➔ https://scotch.io/@rakshitkrsoral/the-beginners-guide-to-using-react-native-animated-api
Reference Links ¿QUESTIONS?
#ReactNativeBSF

37. Preguntas

38. ¡Muchas Gracias!
www.belatrixsf.com