Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is there a way to pass in a child component to the renderRow api ? #20

Open
ryndm opened this issue Feb 15, 2021 · 3 comments
Open

Is there a way to pass in a child component to the renderRow api ? #20

ryndm opened this issue Feb 15, 2021 · 3 comments

Comments

@ryndm
Copy link

ryndm commented Feb 15, 2021

So I want to pass a functional component to the renderRow api. Currently I have been passing a function present in the same component. I was not able to find any relevant information anywhere. Is it possible to do that?

@donni106
Copy link
Contributor

donni106 commented Mar 5, 2021

Can you show some code to check, what you are trying? I think it should be possible through the existing renderRow prop, which is wrapped by the renderRowComponent prop. If no renderRowComponent is given, it will be TouchableOpacity for iOS and TouchableHighlight for Android.
The row itself is rendered as follows, depending on if renderRow is given or not

const row = !renderRow ? (
<Text
style={[
styles.rowText,
dropdownTextStyle,
highlighted && styles.highlightedRowText,
highlighted && dropdownTextHighlightStyle,
]}
{...dropdownTextProps}
>
{value}
</Text>
) : (
renderRow(item, index, highlighted)
);

@ryndm
Copy link
Author

ryndm commented Mar 13, 2021

  MainDropDown = () => {
    return (
      <View>
            ......
            .....
            .....
      </View>
    );
  };

<ModalDropdown renderRow={this.MainDropDown} />

Currently MainDropDown is a function present in the same class so I don't need to pass any props. If I convert it into a functional component I'll need to pass props. Is that possible here ? I was not able to figure out the right syntax. Please excuse my ignorance I am a beginner.

@donni106
Copy link
Contributor

And what is the problem this way? It should be a possible way.
You can try to log some stuff to see more whats going on.

MainDropDown = (item, index, highlighted) => {
  console.log({ item, index, highlighted });

    return (
      <View>
            <Text>{item.toString()}</Text>
      </View>
    );
  };

The object passed in to renderRow needs to be a function, which is called inside the package at line 404 when viewing the code snippet above. What is your situation that you would need to pass props there?

I haven't tested it, but does this successfully render and show you your data passed to the dropdown?

siemiatj pushed a commit that referenced this issue Apr 12, 2022
…80bd43519

[Snyk] Security upgrade react-native from 0.53.3 to 0.64.0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants