Expect custom baseline function to not return NaN

[rushikeshc7]

The App gets crashed when I clicked on a particular button. When I pressed that button, abort() function gets called from yoga.cpp file. The App is working fine in android, only getting this issue while running on iOS. Check the following image for reference. It shows "Expect custom baseline function to not return NaN" this error in debug window. I am not getting why this is happening, please help me with the solution.

[alexkander]

Hi guys, I am having the same issue developing with react-native, only in iOS.

With this sample code you can replicate the issue:

import React from 'react';
import {
  View,
  Text,
} from 'react-native';

const App = () => {
  return (
    <View
      style={{
        flexDirection: 'row',
        alignItems   : 'baseline',
      }}
    >
      <View style={{
        width: 50,
        height: 50,
      }}>
        <Text>Lorem ipsum</Text>
      </View>
    </View>
  );
};


export default App;

If you delete any style line in this code (width, height, flexDirection or alignItems) the issue disappears.

[rushikeshc7]

@arondn2 This did not work for me, still getting the same error.

[alexkander]

@rushikeshc7 that code is to replicate the error. The issue is by the style alignItems : 'baseline', if you remove that style the error disappears. Search in your code where you are using a component with alignItems : 'baseline' style and have a child (in any level) with width and height styles at the same time, and try replace to alignItems : 'flex-end' in the parent, or remove width o height in the child, this solve the issue to me.

[rushikeshc7]

@arondn2 I removed all alignItems : 'baseline' from the code, still getting the same error. I don't understand why I am getting this error as it is working fine in android.

[alexkander]

You must identify which part of your code is generating a state like that. You must even consider the third-party components that you are using, it can be generating part of this state internally. In my case, the align-items: baseline was in my code, but a child with width and height style was generating internally in a third-party component.

[rushikeshc7]

@arondn2 Thanks for the help. Your suggestions solved my issue. I made changes in style and the issue disappears.

[vinnyhoward]

Still having this issue and I followed everything in this thread. The weird thing is that the only type I use those styles are during my onboarding process. Which isn't where the app crashes, it crashes once I login and go to another screen. But I don't reference alignItems ever again for it to do that

[alexkander]

@vinnyhoward maybe the problem is inside some third-party component

[kidculli]

Should we reopen this ticket? It seems like the app crashed when we use alignItems:baseline. Yoga seems to have an issue with this and it should be fixed or documented

[dariomalfatti-centropaghe]

Yes, it's still an issue. alignItems: 'baseline' give the error specified in this issue's title.

[julian-kingman-lark]

Why is this closed? Just ran into this issue in RN 0.71.8, thanks @alexkander for identifying the issue so clearly.

[eedeebee]

Agree @julian-kingman-lark this bug is live. Just hit it as desribe in 2024 now. RN 0.73

[j-piasecki]

I tried to dig into the crash from the second comment. It's still reproducible on the current main branch and it looks like it's caused by the baseline being calculated without the text node being measured first.

I'm not sure if that's the real cause but removing this early return prevents the crash from happening, though that looks very concidental.