SharePerson

<script type="text/javascript">
    $(document).ready(function() {
        var pageSize = 20;

        $("#UserList").select2({
            multiple: true,
            width: '100%',
            ajax: {
                theme: 'bootstrap',
                url: "https://gorest.co.in/public/v1/users",

SharePerson

deleteButton: {
    alignSelf: 'flex-end',
    width: 75,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red',
    marginVertical: 3,
  }

SharePerson

renderHiddenItem(person) {
    return (
      <TouchableOpacity
        style={styles.deleteButton}
        onPress={() => this.deletePerson(person.id)}>
        <Text style={styles.deleteText}>Delete</Text>
      </TouchableOpacity>
    );
  }

SharePerson

<SwipeListView
  data={this.state.persons}
  renderItem={({item}) => this.renderPerson(item)}
  renderHiddenItem={({item}) => this.renderHiddenItem(item)}
  rightOpenValue={-75}
/>

SharePerson

  deletePerson(personId) {
    let {persons} = this.state;
    persons = persons.filter(person => person.id !== personId);
    this.setState({...this.state, persons});
  }

SharePerson

renderRightButtons(personId) {
    return [
      <View style={styles.deleteContainer}>
        <TouchableOpacity
          style={styles.deleteButton}
          onPress={() => this.deletePerson(personId)}>
          <Text style={styles.deleteText}>Delete</Text>
        </TouchableOpacity>
      </View>,
    ];

SharePerson

renderPersons() {
    if (this.state.persons.length > 0) {
      return this.state.persons.map(person => {
        return (
          <View key={person.id} style={styles.itemContainer}>
            <Swipeable
              rightButtons={this.renderRightButtons(person.id)}
              rightButtonWidth={75}>
              <View style={styles.swipeable}>
                <Image style={styles.avatar} source={{uri: person.avatarUrl}} />

SharePerson

import images from '../data/image-list.json';
import persons from '../data/person-list.json';

export const getImages = () => {
  return images;
};

export const getPersons = () => {
  return persons;
};

SharePerson

[
    {
        "id": "1",
        "name": "John Smith",
        "avatarUrl": "https://randomuser.me/api/portraits/men/75.jpg"
    },
    {
        "id": "2",
        "name": "Lance Chapman",
        "avatarUrl": "https://randomuser.me/api/portraits/men/41.jpg"

SharePerson

[
    {
        "id": "1",
        "imageUrl": "https://homepages.cae.wisc.edu/~ece533/images/airplane.png"
    },
    {
        "id": "2",
        "imageUrl": "https://homepages.cae.wisc.edu/~ece533/images/arctichare.png"
    }
]