Notes March 2024

notes-march.markdown

Notes March 2024

1. Reply to issue mrousavy/react-native-vision-camera#2614
2. Code review for PR Fix single line text not fully rendered on old architecture

Text with images wraps on the second line

CLICK TO OPEN SOURCECODE

Relevant commit 00c318cb742 and https://gist.github.com/assets/24992535/65240c44-ba57-4d66-8dd2-e168aeb98da2

import * as React from 'react';
import {Button, Image, StyleSheet, Text, TextInput, View} from 'react-native';
const smallImage = {
  uri: 'https://www.facebook.com/favicon.ico',
};

export default function App() {
  const email =
    'From [email protected] ddddddddd dddd dd dd dd dd d';
  return (
    <View style={styles.container}>
      <View style={styles.flexBrokenStyle}>
        <Text style={styles.parentText}>
          <Text>{email}</Text>
          <Image source={smallImage} style={{height: 50, width: 50}} />
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 8,
    backgroundColor: 'yellow',
  },
  flexBrokenStyle: {
    flexDirection: 'row',
  },
  parentText: {
    backgroundColor: 'red',
  },
});

Fabric:

Before	After

Paper:

Before	After

Text includes emoji (not boring text)

CLICK TO OPEN TESTS RESULTS

import * as React from 'react';
import {Button, Image, StyleSheet, Text, TextInput, View} from 'react-native';
const smallImage = {
  uri: 'https://www.facebook.com/favicon.ico',
};

export default function App() {
  const email = 'From vinesdfsd 👍 😊 🐚 😆';
  const email2 =
    'مرحبا بالعالم من فابريزيومرحبا بالعالم من فابريزيو مرحبا  مرحبامن فابريزيو مرحبا  مرحبا';
  return (
    <View style={styles.container}>
      <View style={styles.flexBrokenStyle}>
        <Text numberOfLines={1}>
          <Text style={styles.parentText}>{email}</Text>
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 8,
  },
  flexBrokenStyle: {
    // direction: 'rtl',
    flexDirection: 'row',
  },
  parentText: {
    backgroundColor: 'red',
    fontSize: 30,
  },
});

After

Veryfing the result of the onLayout callback

CLICK TO OPEN SOURCECODE

import * as React from 'react';
import {Button, Image, StyleSheet, Text, TextInput, View} from 'react-native';
const smallImage = {
  uri: 'https://www.facebook.com/favicon.ico',
};

export default function App() {
  const email =
    'From [email protected]  From [email protected]';
  const onLayoutCallback = e => {
    const {width, height, x, y} = e.nativeEvent.layout;
    console.warn(
      'w: ' +
        parseInt(width) +
        ' h:' +
        parseInt(height) +
        ' x: ' +
        parseInt(x) +
        ' y: ' +
        parseInt(y),
    );
  };
  return (
    <View style={styles.container}>
      <View style={styles.flexBrokenStyle}>
        <Text
          onLayout={onLayoutCallback}
          style={styles.parentText}
          numberOfLines={1}>
          <Text>{email}</Text>
          <Image source={smallImage} style={{height: 50, width: 50}} />
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 8,
    backgroundColor: 'yellow',
  },
  flexBrokenStyle: {
    flexDirection: 'row',
  },
  parentText: {
    backgroundColor: 'red',
  },
});

Before (Fabric)	After (Fabric)

Before (Paper)	After (Paper)