AddRemoveImage

Tinder like add remove image component

No imageSource provided	imageSource provided

Usage

// src/AddRemove.tsx
import React, { useState } from 'react';
import { AddRemoveImage } from 'nottinderuikit';
import { MaterialCommunityIcons, Entypo } from '@expo/vector-icons';

const AddRemove = () => {
  const [imageSource, setImageSource] = useState<undefined | { uri: string }>()
  const removeIcon = <Entypo name='cross' size={25} color='white' />;
  const addIcon = (
    <MaterialCommunityIcons name='plus' size={25} color='white' />
  );
  const saveImage = (id: string) => {
    // Here you upload your image to your server
    // We just log the image id and set an imageSource 😄
    console.log(`Uploading image ${id}`);
    const uri = 'https://images.unsplash.com/photo-1585744134783-ae8804f900dc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=933&q=80';
    setImageSource({ uri });
  }
  const removeImage = (id: string) => {
    // Here you delete your image from your server
    // We just log the image id and unset the imageSource
    console.log(`Removing image ${id}`);
    setImageSource(undefined);
  }
  const sampleId = 'Image-1';


  return <AddRemoveImage
    addIcon={addIcon}
    addImage={saveImage}
    removeIcon={removeIcon}
    removeImage={removeImage}
    imageSource={imageSource}
    id={sampleId}
  />
}

export default AddRemove

---

Props

• id
• addIcon
• addCallback
• removeIcon
• removeCallback
• imageSource
• height
• width

---

Reference

id

Identifier of the file, this value is pased as a parameter on addCallback and removeCallback.

Type	Default	Required
string	undefined	true

---

addIcon

We didn't include icons as part of the library, in this example we used the ones provided by @expo/vector-icons

Icon shown on the bottom right of the component when there's no imageSource provided.

Type	Default	Required
ReactNode	undefined	true

---

addCallback

Function called when the component is pressed and there's no imageSource.

Type	Default	Required
function: ( id: string ) => any	undefined	true

---

removeIcon

We didn't include icons as part of the library, in this example we used the ones provided by @expo/vector-icons

Icon shown on the bottom right of the component when there is imageSource provided.

Type	Default	Required
ReactNode	undefined	true

---

removeCallback

Function called when the removeIcon is pressed.

Type	Default	Required
function: ( id: string ) => any	undefined	true

---

---

imageSource

Source object of the image

Type	Default	Required
object: { uri: string }	undefined	false

---

height

Height of the AddRemoveImage component

Type	Default	Required
number	150	false

---

width

Width of the AddRemoveImage component

Type	Default	Required
number	100	false

---