Composable component API..?

Issue type

I’m submitting a … (check one with “x”)

• bug report
• feature request

Issue description

I’m trying to create an app that consists of a List with Items inside. I am utilizing the accessory property to give each ListItem a Button, this button is defined in a const.

The point of the Button is to remove the ListItem that it belongs to from an array, this because each ListItem is created out of an array of strings. But I am unable to achieve this remove-effect since I can’t access title prop.

This is my entire App.tsx:

import React, { Component } from 'react';
import { Alert, Vibration, StatusBar, ScrollView } from 'react-native';
import { mapping, dark as darkTheme } from '@eva-design/eva';
import { ApplicationProvider, Layout, Button, Text, Input, ButtonProps, StyleType, List, ListItem, ListItemProps } from 'react-native-ui-kitten';
import Divider from 'react-native-divider';

export default class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      holder: '',
      players: []
    }
  }

  AddPlayer=()=>{
    const players = this.state.players.slice()
    players.unshift(this.state.holder)
    this.setState({players})
    this.setState({holder : ''})
  }

render() {

  const Accessory = (style: StyleType): React.ReactElement<ButtonProps> => {
    return (
      <Button onPress={() => Alert.alert('A') } style={style} status='info' appearance='filled'>Remove</Button>
    );
  };

  return(
  <ApplicationProvider
    mapping={mapping}
    theme={darkTheme}>
    <Layout style={{ alignItems: 'center', padding: 30, paddingBottom: 0}}>
    <StatusBar barStyle="light-content" />

    <Input
      style={{marginTop: 40}}
      label='Player name'
      size='large'
      keyboardAppearance='dark'
      maxLength={18}
      returnKeyType='done'
      onChangeText={InputValue => this.setState({holder : InputValue})}
      value={this.state.holder}
    />

    <Button
    style={{marginTop: 15, marginBottom: 40}}
    status='primary'
    size='giant'
    appearance='filled'
    onPress={this.AddPlayer}
    >
    Add player
    </Button>

      <Divider color='white'>Players:</Divider>
      </Layout>
      <Layout style={{ flex: 1, alignItems: 'stretch', padding: 30, paddingTop: 0 }}>
      <ScrollView showsVerticalScrollIndicator={false}>
      {
      this.state.players.map((l, i) => (
        <ListItem
          key={i}
          style={{marginTop: 8, backgroundColor: '#1a1f2d'}}
          title={l}
          description='Spelare'
          accessory={Accessory}
        />
      ))
    }
    </ScrollView>
    </Layout>

  </ApplicationProvider>
)};

};

Renders like this: https://i.gyazo.com/68f027331f5077e8e53c7c839dcf9eea.png

As you can see, each ListItem gets a “Remove” button, but I have no idea how to make it functional since I can’t access the title prop, nor l parameter after map.

Would greatly appreciate any input on this issue, I might just be missing something in the docs!

[artyorsh]

title={info.item}

[artyorsh]

as far as I understand, so I’m not sure how to remove an item by index in the onRemovePress

So this is not a framework issue any more. Read more about working with javascript arrays or google how to remove an object from array by index. I’m pretty sure you’ll find the solution to get your business logic done