1.0.2 • Published 8 months ago
react-native-pollinations v1.0.2
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.