How can custom style for Popup, row and text ?

[dungnguyen10989]

If I call Show method without tintColor props, Popup will appear with background = transparent, If I pass props tintColor equal any string value, Popup will appear with background = blue, I dev on iOs, can author help me how can I pass props when call Show() method to change style of Popup background, label fontSize and labelColor ?

[prscX]

Thanks @dungnguyen10989 raising the query.

This library is a wrapper around native provided libraries FTPopMenu. Unfortunately FTPopMenu does not provid any props in order to modify font size and label color. However you can pass HEX-COLOR to tintColor prop in order to set the popup background.

Thanks
</ Pranav >

[dungnguyen10989]

Tks for reply @prscX.
Here is my code to invoke popup:

RNPopover.Show(ref, {
      menus,
      onDone: index => {
        if (index === 0) {
        } else if (index === 1) {
        }
      },
      tintColor: '#ff0000',
      theme: 'dark',
      rowHeight: 50,
      perferedWidth: responsiveWidth(70)
    });

I passed tintColor = red by HEX but the popup still show with backgroundColor = blue ?

[prscX]

Thanks @dungnguyen10989 for sharing the issue screenshot.

I have tested the same with example project and it is giving me expected output. Please find below screenshot of the same:

• Source Snippet:

    RNPopover.Show(ref, { menus: menus, onDone: selection => {
        console.log("selected item index: " + selection);
      }, onCancel: () => {
        console.log("popover canceled");
      }, tintColor: "#ff0000"  });
  }

Can you please share what is the version of react-native-popover-menu you are using?

Thanks
</ Pranav >

[dungnguyen10989]

@prscX ok thanks for support, i put referrence in other context, but can you resolve this issue ?

popup will not show entire itself if it's context is the last item of flatlist ?

[prscX]

Thanks @dungnguyen10989 for providing the update. Good to hear that the tintColor props is working as expected.

I have not personally tested the popover with the flatlist, however it works fine if we place a button at bottom and click on the same.

Since you are trying to use it with FlatList, may be due to FlatList scroll the native library is not able to figure out the specify height of the screen.

Looks like you are trying to show actions when the user clicks on the FlatList row. There is a specific library designed for these type of actions react-native-bottom-action-sheet. According to Android/iOS design patterns, they recommend to use bottom sheet. For reference you can check Facebook app where they are using both types in order to display actions.

Thanks
</ Pranav >

[dungnguyen10989]

@prscX thank you for recommend me a solution, but i want to show popup menu for each row of flatlist. Have any solution to custom shape of popup to square without tail ? it's the same as context menu on android, it will be appear at center of screen. Maybe you should fork a new repo from https://github.com/liufengting/FTPopMenu and provide more option to custom popup, i like this component very much but it's hard to custom :(

[prscX]

Hi @dungnguyen10989, I have migrated iOS native library from liufengting/FTPopMenu to liufengting/FTPopOverMenu which provides greater flexibility in order to customize things. Now you will be able to change textColor and few other props.

Can you please install latest version 0.0.13 and verify the same. Please follow README for the installation steps.

Let me know in case you face any issues.

Thanks
</ Pranav >

[prscX]

Hi @dungnguyen10989: If your concerns are addressed, can we please close the issue.

Thanks
</ Pranav >