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

Đã đóng
  • Có gì không ổn?
#418 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@mfazekas đang làm issue này rồi.

Từ ngày 13/10/2026.

  • #419 của @mfazekas — đang mở

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
25/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
android, kotlin, react-native
Lĩnh vực
mobile

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
TypeScript
Star
158
Fork
17
Merge trung bình
4 ngày 4 giờ
Pull request đã merge (30 ngày)
23

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của rive-app/rive-nitro-react-native

Tất cả issue của rive-app/rive-nitro-react-native

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.