Function ImageBlock

packages/blocks/src/ImageBlock.tsx:19–103

(props: BlockProps)

 */

export const ImageBlock = (props: BlockProps) => {
  const {
    blockId,
  } = props;
  const { blocks, updateBlock, selectedBlockId, setSelectedBlockId, removeBlock } = useBlocksContext();

  const [source, setSource] = useState(blocks[blockId]?.properties.source || null);
  const [aspectRatio, setAspectRatio] = useState(blocks[blockId]?.format?.block_aspect_ratio || null);

  const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ['images'],
      allowsEditing: false,
      quality: 1,
    });

    if (!result.canceled) {
      setSource(result.assets[0].uri);
      setAspectRatio(result.assets[0].width / result.assets[0].height);

      const updatedBlock = updateBlockData(blocks[blockId], {
        properties: {
          source: result.assets[0].uri
        },
        format: {
          block_width: result.assets[0].width,
          block_aspect_ratio: result.assets[0].width / result.assets[0].height
        }
      });

      updateBlock(updatedBlock);
    }
  };

  const handleRemoveBlock = () => {
      setSelectedBlockId(null);
      setTimeout(() => {
          removeBlock(blockId);
      }, 100);
  };

  const backgroundColor = source === null ? "#7d7a751d" : "transparent";

  return (
    <DragProvider blockId={blockId}>
      <Pressable
        style={[styles.container, { backgroundColor: backgroundColor }]}
        onPress={pickImage}
      >
          {source === null
            ? (
                <View style={styles.row}>
                    <Ionicons name="image-outline" size={24} color="#7d7a75" />
                    <Text style={styles.text}>Add an image</Text>
                </View>
            )
            : (
                <Image