Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open
  • Is something wrong?
#418 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@mfazekas is already working on this.

Since Oct 13, 2026.

  • #419 by @mfazekas — open

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
25/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Stale
Tech stack
android, kotlin, react-native
Domain
mobile

Research direction

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.

Written by the indexing model from the issue text.

Description

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

Dominant language
TypeScript
Stars
155
Forks
17
Avg merge
1d 10h
Merged PRs (30d)
20

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from rive-app/rive-nitro-react-native

All issues in rive-app/rive-nitro-react-native

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.