3

I have this application that i am writing in react-native, where i have this screen which displays around 50-100 images and some action buttons associated with them, including a pop-up menu(one associated with each of them). Is there a way that i can use same pop-up menu(same instance) for all images?

             <View>
             // react-native-paper Card Component
               <Card style={styles.card}>
                <Card.Content style={styles.cardContent}>
                  <Card.Cover
                    style={{ height: 60, width: 60 }}
                    source={
                      item.avatar ||
                      (item.gender === 'male'
                        ? require('../../assets/male.jpeg')
                        : require('../../assets/female.jpeg'))
                    }
                  />
                  <Caption style={styles.title}>{item.name}</Caption>
                </Card.Content>
                <Card.Actions>
                  <Avatar.Text
                    style={{ backgroundColor: 'skyblue' }}
                    size={24}
                    label={`#${item.id}`}
                  />
                 // react-native-paper Menu Component
                 // can i somehow use a single component for all cards?
                  <Menu
                    visible={this.state.visible}
                    onDismiss={this._closeMenu}
                    anchor={
                      <IconButton
                        icon="menu"
                        theme={theme}
                        size={20}
                        onPress={() => console.log('Pressed')}
                      />
                    }
                  >
                    <Menu.Item onPress={() => {}} title="Item 1" />
                    <Menu.Item onPress={() => {}} title="Item 2" />
                    <Divider />
                    <Menu.Item onPress={() => {}} title="Item 3" />
                  </Menu>
                </Card.Actions>
              </Card>
                  .
                  .
          //same card multiple times
                  .
                  .
             </View>
Jagga
  • 189
  • 2
  • 9

1 Answers1

0

You can extract the Menu component into your own custom component and then reuse it in your cards. This means you only need to define your Menu once and then use that one component multiple times (which will create a separate instance of the Menu for each card, acting independently of each other).

You can also do the same for your Card component which means you don't have to define the same thing multiple times. Will make your code much cleaner and more useable (your methods you define in your components will only execute for that instance of the component, not on a global level as your above code will - e.g. this._closeMenu will only execute for the Menu instance that it's defined in)

Take a look here for how to go about extracting and reusing your components - https://caster.io/lessons/react-native-extracting-and-writing-react-native-components

Jono
  • 627
  • 4
  • 8
  • 2
    actually i want to use only one instance of the menu component for all cards, if that's possible. It should be possible cuz menu will open up only for one card at a time. looking for some way to share the menu between all cards. – Jagga Jun 14 '19 at 08:39
  • @Jagga I don't think that makes sense in React. The point of the virtual DOM is that it abstracts you from the DOM altogether, so if by "instance" you mean the loaded DOM subtree of the menu, you shouldn't worry about that: React handles it for you. The answer by Jono should be the right way to "reuse" your menu component. – DaniGuardiola Jun 14 '19 at 08:49
  • 1
    render a component has a cost, the question is if there is a way to "render once, use multiple times" to increase performance. I wonder if assign the component to a variable and include the jsx `{var1}` multiple times is the way to go – Rogelio Triviño Jan 20 '22 at 10:31