React Native Ai Image Generator With Openai

You can also watch the YouTube video:

React Native AI Image Generator with OpenAI

Creating the Expo App

npx create-expo-app@latest --template

> Choose a template? >> Blank (Typescript)
> What is your app named? >> expo-ecommerce

Delete package-lock.json file and run yarn command If you want to use yarn.

yarn

Start the project before we install anything to make sure everything is working.

yarn start

Press the "a" for Android or "i" for iOs

Installing Gluestack UI (Tailwind CSS Library)

npx gluestack-ui init

> Detected an Expo project, continue? >> Yes

> Proceed with caution. Make sure to commit your changes before proceeding. Continue? >> Yes

Installing Gluestack UI Components

npx gluestack-ui add box button card heading image input skeleton vstack text icon

Installing OpenAI API Library

yarn add openai

Edit App.tsx:

import "@/global.css";
import { StatusBar } from "expo-status-bar";
import AiImageBot from "./components/AiImageBot";
import { GluestackUIProvider } from "./components/ui/gluestack-ui-provider";

export default function App() {
  return (
    <GluestackUIProvider mode="light">
      <StatusBar style="auto" />

      <AiImageBot />
    </GluestackUIProvider>
  );
}

Create AiImageBot.tsx in your components folder:

import OpenAI from "openai";
import { useState } from "react";
import { Box } from "./ui/box";
import { Button, ButtonText } from "./ui/button";
import { Card } from "./ui/card";
import { Heading } from "./ui/heading";
import { Image } from "./ui/image";
import { Input, InputField } from "./ui/input";
import { Skeleton } from "./ui/skeleton";
import { VStack } from "./ui/vstack";

const openai = new OpenAI({
  apiKey: "YOUR_API_KEY",
});

const AiImageBot = () => {
  const [prompt, setPrompt] = useState("");
  const [generatedImage, setGeneratedImage] = useState("");
  const [loading, setLoading] = useState(false);

  const generateImage = async () => {
    try {
      setLoading(true);

      const response = await openai.images.generate({
        prompt,
        n: 1,
        size: "1024x1024",
      });

      const image = response.data[0].url;

      setGeneratedImage(image!);
    } catch (error) {
      console.error("Error:", error);
    } finally {
      setLoading(false);

      setPrompt("");
    }
  };

  return (
    <Card className="p-5 w-[400px] mx-auto mt-12">
      <VStack space="xl">
        <Heading size="lg" className="mb-4">
          AI Image Generator with OpenAI
        </Heading>

        <Input>
          <InputField
            onChangeText={(text) => setPrompt(text)}
            value={prompt}
            type="text"
            placeholder="Write some stuff..."
          />
        </Input>

        <Button
          disabled={loading}
          onPress={generateImage}
          className="px-4 py-2 mr-0 mb-3"
        >
          <ButtonText size="sm">{loading ? "Loading.." : "Send"}</ButtonText>
        </Button>
      </VStack>

      {loading ? (
        <Box className="max-w-[400px] gap-4 p-3 rounded-md">
          <Skeleton variant="sharp" className="h-[400px]" />
        </Box>
      ) : undefined}

      {generatedImage ? (
        <Image
          source={{
            uri: generatedImage,
          }}
          className="h-[400px] max-w-[360px] rounded-md aspect-[1/1]"
          alt="Ai generated image"
          resizeMode="contain"
        />
      ) : undefined}
    </Card>
  );
};

export default AiImageBot;