Content cut off in tooltip

[dansimau]

I am trying to build a simple tooltip:

const styles = StyleSheet.create({
  tooltipTitle: {
    marginBottom: 10,
    fontWeight: "bold",
  },
  tooltipText: {
    color: "#444",
    fontSize: 16,
    lineHeight: 20,
  },
});

export const makeTooltipContent = (opts: {title?: string; text: string}) => (
  <View style={{padding: 8}}>
    {opts.title !== undefined ? (
      <Text style={[styles.tooltipText, styles.tooltipTitle]}>
        {opts.title}
      </Text>
    ) : null}

    <Text style={styles.tooltipText}>{opts.text}</Text>
  </View>
);

Snippet from my component:

                <Tooltip
                  isVisible={true}
                  content={makeTooltipContent({
                    title: "Leave a personal note",
                    text: "Help others know why a place is great. ✨",
                  })}
                  placement="left">
                  <FilledButton style={Buttons.Text} title="Add tip" />
                </Tooltip>

The result is:

Am I missing something?

[apfritts]

@dansimau did you find a solution to this? Or figure out what was causing it? We're QA'ing our app now and it's happening to our production builds but wasn't happening in dev builds 😭

[apfritts]

I ended up fixing this by adding {flex: 1, flexGrow: 1} to the text style.

[topherPedersen]

I ran into this issue today as well. I think the issue might have something to do with Text components? I tried removing the text component, and replaced it with a red square and things started working again.

Also, when you make CSS changes to the tooltip, you may need to reload the app by pressing 'r' in the metro bundler console. I noticed when I just hit save and the app does a hot reload, sometimes the tooltips won't render correctly. But if I press 'r' in the metro bundler terminal, and then log back into my organization's app, then things would start rendering properly.