Cannot be multiplied

[dellwatson]

Let's say it's instagram images, and I want each image carries a single bottom-sheet for image-optional...

i ve tried with action-sheet for iOS device, and now im looking for Android-native-feeling but this module isnt working for duplicating.

[nysamnang]

@dellwatson It's quite simple just by changing the ref name.

Example:

  <View>
        <Button
          title="OPEN BOTTOM SHEET"
          onPress={() => {
            this.RBSheet.open();
          }}
        />

        <Button
          title="OPEN BOTTOM SHEET 2"
          onPress={() => {
            this.RBSheet2.open();
          }}
        />

        <RBSheet
          ref={ref => {
            this.RBSheet = ref;
          }}>
          <YourOwnComponent />
        </RBSheet>

        <RBSheet
          ref={ref => {
            this.RBSheet2 = ref;
          }}>
          <YourOwnComponent />
        </RBSheet>
  </View>

[dellwatson]

@nysamnang thanks but this is static, i want to make it more dynamic. let's say i have random amount of images, and each of them require this bottom sheet, so I mnot sure how to call all of them

first I iterate the images,

//main_render
<View>
    images.map(item => this._renderItem(item, index))
<View>

//render_item
_renderItem= (item, index)=> {
...,
<Button title=`OPEN BOTTOM SHEET-${index}`  //renaming the title 
          onPress={() => {   this.RBSheet.open()  }}  />   **//cant rename the func here**

        <RBSheet
          ref={ref => {
            this.RBSheet = ref;
          }}>
          <YourOwnComponent />
        </RBSheet>
}

I thought it would work, without renaming them, but turns out it doesnt, because well the ref is still the same and imnot sure how to make it more dynamic. the actionSheetIOS is pretty easy to use and dynamic without naming them all. but I want this bottomSheet for android feeling

[nysamnang]

@dellwatson

  _renderItem = (item, index) => (
      <View>
        <Button title=`OPEN BOTTOM SHEET-${index}` onPress={() => this[RBSheet + index].open()} />
        <RBSheet
          ref={ref => {
            this[RBSheet + index] = ref;
          }}>
          <YourOwnComponent />
        </RBSheet>
      </View>
    );

Happy coding !

[brixbimboavengoza]

@dellwatson

  _renderItem = (item, index) => (
      <View>
        <Button title=`OPEN BOTTOM SHEET-${index}` onPress={() => this[RBSheet + index].open()} />
        <RBSheet
          ref={ref => {
            this[RBSheet + index] = ref;
          }}>
          <YourOwnComponent />
        </RBSheet>
      </View>
    );

Happy coding !

Hi, do you have this example in functional? ty!