Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

[Android] Fit.Layout content stale after resize on the new backend (surface keeps creation size)

Abierto
  • ¿Algo no está bien?
#418 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@mfazekas ya está trabajando en esto.

Desde el 13/10/2026.

  • #419 de @mfazekas — abierto

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
25/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Estancado
Stack tecnológico
android, kotlin, react-native
Área
mobile

Línea de trabajo

Start in android/src/new/java/com/rive/RiveReactNativeView.kt: compare onSurfaceTextureSizeChanged with resizeArtboardIfLayout, and check where the render surface is created in onSurfaceTextureAvailable and configure. Pull request #419 is already open against this issue, so review it before starting. Done means the layout_test.riv reproducer renders the same after a resize as after a remount.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Submission checklist
  • I have confirmed the issue is present in the latest version of @rive-app/react-native
  • I have searched the documentation and forums and could not find an answer
  • I have searched existing issues and this is not a duplicate
Description

On the Android new (experimental) backend, resizing a mounted RiveView only resizes the artboard; the RiveSurface render target keeps the size it was created with. Content is then drawn into the old-size target, so it appears scaled and offset until the view is remounted. iOS resizes its drawable and is unaffected.

The code already notes the limitation:

  • RiveReactNativeView.kt#L150-L158 — onSurfaceTextureSizeChanged updates surfaceWidth/Height and calls resizeArtboardIfLayout(), with the comment "Since 11.7.x the render target keeps its creation-time size and RiveSurface.resize() is internal to the SDK, so only the artboard is resized here".
  • RiveReactNativeView.kt#L328-L334 — resizeArtboardIfLayout resizes the artboard against the (stale-size) surface.
  • The surface is only ever created once, in onSurfaceTextureAvailable and configure.

Common trigger: a Fit.Layout view mounts while a keyboard/numpad is animating in, so its container shrinks over the first ~300 ms. The view then renders too high / too small for the rest of its life.

Environment
  • @rive-app/react-native 0.5.4, new backend (default); rive-android 11.12.1
  • Pixel 9 Pro emulator, API 36; React Native 0.86.3 (Fabric), Expo SDK 57
  • iOS (rive-ios 6.28.0) does not reproduce
Notes
  • App-side workaround: don't mount the view until its container has stopped resizing (e.g. gate on onLayout settling), so the surface is created at the final size.
Related
  • rive-app/rive-android#446 / rive-app/rive-android#450: Fit.LAYOUT artboard size on the classic RiveAnimationView (one-shot resize flag). Same symptom family, different mechanism — here the artboard is resized; it's the render target that keeps its size.
Previous working version

0.4.20

Reproduction steps / code

Uses example/assets/rive/layout_test.riv. Toggle the container height, then remount at the same height — the two should look identical.

step container surface created at result
mount 200 pt 200 rounded rect fills the view
animate to 400 pt 400 200 (stale) rect drawn clipped into the lower part of the view, offset right
remount at 400 pt 400 400 rect fills the view
animate back to 200 pt 200 400 (stale) rect drawn too high / too small
remount at 200 pt 200 200 same as first row

Reproducer page (drop into example/src/reproducers/):

import { useCallback, useRef, useState } from 'react';
import { Animated, Pressable, Text, View, StyleSheet } from 'react-native';
import { Fit, RiveView, useRiveFile } from '@rive-app/react-native';

const SHORT = 200;
const TALL = 400;

export default function ReproSurfaceSize() {
  const { riveFile } = useRiveFile(require('../../assets/rive/layout_test.riv'));
  const [height] = useState(() => new Animated.Value(SHORT));
  const tall = useRef(false);
  const [generation, setGeneration] = useState(0);

  const toggle = useCallback(() => {
    tall.current = !tall.current;
    Animated.timing(height, { toValue: tall.current ? TALL : SHORT, duration: 400, useNativeDriver: false }).start();
  }, [height]);

  return (
    <View style={styles.container}>
      <Pressable style={styles.button} onPress={toggle}><Text style={styles.buttonText}>Toggle height</Text></Pressable>
      <Pressable style={styles.button} onPress={() => setGeneration((g) => g + 1)}><Text style={styles.buttonText}>Remount</Text></Pressable>
      <Animated.View style={[styles.box, { height }]}>
        {riveFile ? <RiveView key={generation} file={riveFile} fit={Fit.Layout} autoPlay style={styles.rive} /> : null}
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, backgroundColor: '#fff' },
  box: { marginTop: 16, backgroundColor: '#1a2a3a' },
  rive: { flex: 1 },
  button: { alignSelf: 'flex-start', backgroundColor: '#007AFF', paddingHorizontal: 20, paddingVertical: 10, borderRadius: 8, marginTop: 8 },
  buttonText: { color: '#fff', fontWeight: '600' },
});
Upload your reproduction files / stack trace

No response

Source .riv / .rev file

No response

Screenshots / video

No response

@rive-app/react-native version

0.5.4

Platform

Android only

React Native version

0.86.3

React Native environment info
Expo setup

Yes — Expo prebuild / EAS Build

Expo SDK version (if applicable)

57

iOS device & OS version (if applicable)

No response

Android device & OS version (if applicable)

Pixel 9 Pro emulator, API 36

Additional context

No response

Lenguaje dominante
TypeScript
Estrellas
155
Forks
17
Merge medio
1 d 10 h
PR fusionados (30 d)
20

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de rive-app/rive-nitro-react-native

Todos los issues de rive-app/rive-nitro-react-native

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.