react-native-pollinations

React Native Pollinations Image Library

A custom React hook for generating and downloading AI-powered images based on text prompts using Pollinations.

Installation

Install the library using npm:

npm install react-native-pollinations

Usage

usePollinationImage Hook

The usePollinationImage hook generates an image from a text prompt and allows you to download it to the device’s media library.

Hook API

The hook returns an object with the following properties and functions:

	•	imageBase64 (string): A base64 representation of the generated image.
	•	isLoading (boolean): A flag that indicates whether an image is currently being generated.
	•	downloadMessage (string): A message indicating the status of the download operation.
	•	fetchImage(prompt: string): A function that generates an image based on the provided prompt.
	•	downloadImage(fileName: string): A function to download the generated image to the device’s media library with the specified file name.

Example Usage

Here’s an example of how to use the usePollinationImage hook in a React Native application:

import { StatusBar } from "expo-status-bar";
import React from "react";
import {
  StyleSheet,
  Text,
  Image,
  Button,
  TextInput,
  View,
  ActivityIndicator,
} from "react-native";
import { usePollinationImage } from "react-native-pollinations";

export default function App() {
  const { imageBase64, isLoading, downloadMessage, fetchImage, downloadImage } =
    usePollinationImage();
  const [prompt, setPrompt] = React.useState("");

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Enter your prompt"
        value={prompt}
        onChangeText={setPrompt}
      />

      {isLoading && <ActivityIndicator />}
      <Button
        title="Generate Image"
        onPress={() => fetchImage(prompt)}
      />
      <Image
        source={{ uri: imageBase64 }}
        style={styles.image}
        resizeMode="contain"
      />
      <Button
        title="Download Image"
        onPress={() => downloadImage("image")}
      />

      <Text>{downloadMessage}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: "center",
    alignItems: "center",
  },
  input: {
    borderWidth: 1,
    borderColor: "#ccc",
    padding: 10,
    width: "100%",
    marginBottom: 20,
    borderRadius: 5,
  },
  image: {
    width: 300,
    height: 300,
    marginVertical: 20,
  },
});

Hook Functions

fetchImage(prompt: string)

Generates an image based on the given text prompt.

	•	Parameter: prompt - A string describing the image to generate.
	•	Usage: Call fetchImage(prompt) to generate a new image. The imageBase64 property will update with the base64 image data.

downloadImage(fileName: string)

Saves the generated image to the device’s media library.

	•	Parameter: fileName - The name to save the image as.
	•	Usage: Call downloadImage("yourFileName") to save the image with the specified name.

Error Handling

The library handles common errors, such as:

	•	Image Generation Errors: Displays an error if image generation fails.
	•	Permission Errors: Requests permission to access the media library. If denied, it displays an alert.

Example Scenarios

	1.	Generate an Image: Enter a prompt, press “Generate Image,” and an image will appear.
	2.	Download the Image: Press “Download Image,” and the generated image will be saved to the device’s photo gallery.

License

This library is MIT-licensed.