Specification FAQ

React Native upgrade to version 0.72.5

Refer to RN Upgrade Developer Adaptation Guide. This document outlines the main changes from React Native version 0.59 to 0.72.5. You can modify your code based on this document and upgrade your React Native version.

Important changes after enabling Fabric

UIManager.measure implementation incorrect, layout data inconsistent with iOS?

• A: UIManager.measure is not supported when Fabric is enabled. Use onLayout or ref.current.measure instead.

Theme font not applied / fontFamily not applied

• Theme font takes priority over fontFamily.
• Theme font changes require app restart to take effect.

RN Date.parse() time conversion issue

RN doesn't directly specify date string format, but relies on JavaScript's Date object. JS supports the following three date formats:

• Date.parse("2024-11-20 14:00:00"); // ISO 8601 format
• Date.parse('Mon, 20 Mar 2023 14:00:00 GMT'); // RFC 2822 / IETF standard

2024/10/24 is a non-standard date format. Consider using third-party library Moment for processing. For example:

• const date = moment('2024/10/24', 'YYYY/MM/DD').format('YYYY-MM-DD');

RN setNativeProps only works once issue

After React Native enables Fabric renderer, setNativeProps only works once after the app opens, and doesn't work afterwards. This is a known issue in RN framework community, and [`setNativeProps is deprecated in 0.72.5](https://github.com/Expensify/App/issues/26989). Use `setState` for state setting. For example, to clear content in an input field:

import React, { useState } from 'react';
import {
  View,
  TextInput,
  Button,
  StyleSheet,
} from 'react-native';

const App = () => {
  const [text, setText] = useState(''); // Save TextInput value

  const clearText = () => {
    setText(''); // Clear input
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value={text}
        onChangeText={setText} // Update state
        placeholder="Enter some content"
      />
      <Button title="Clear" onPress={clearText} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
  },
  input: {
    width: '100%',
    height: 40,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 4,
    marginBottom: 16,
    paddingHorizontal: 8,
  },
});

export default App;

zIndex explanation

1. Non-static position required for zIndex to work When Fabric renderer is enabled, zIndex must be used with position (like relative or absolute), otherwise zIndex won't work. This is consistent with Web behavior and is a standardization of Fabric rendering mechanism.

2. Element layer order changed, higher zIndex means higher layer Unlike old architecture (non-Fabric), Fabric makes zIndex more explicit and higher priority. Element layering no longer depends on component declaration order, but strictly follows zIndex numerical value to determine display order. Higher zIndex value means element is higher in the stack.

ScrollView component velocity field explanation

Meaning: velocity represents the component's scrolling speed

Note: The calculated value has some difference compared to Android. Harmony platform uses least squares method to fit instantaneous velocity, which is more linear than Android.

RN Harmony temporarily doesn't support toLocaleLowerCase interface

• If internationalization support is not required, use toLowerCase conversion.
• If internationalization is required, custom special conversion for some internationalized language characters is needed.

RN accessibility font scaling limit issue

• Before API13, this feature is not supported.
• Configure fontSizeMaxScale field to limit font scaling multiplier, default project has no configuration.
• After configuration, adjusting system font size or display size, RN page components only scale up to the configured multiplier, beyond that no further scaling.