You can also watch the YouTube video: [React Native AI Image Generator with OpenAI](https://www.youtube.com/watch?v=mgkC60VDyKE) ### Creating the Expo App ```bash npx create-expo-app@latest --template ``` ```bash > 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. ```bash yarn ``` Start the project before we install anything to make sure everything is working. ```bash yarn start ``` Press the "a" for Android or "i" for iOs ### Installing Gluestack UI (Tailwind CSS Library) ```bash npx gluestack-ui init ``` ```bash > Detected an Expo project, continue? >> Yes > Proceed with caution. Make sure to commit your changes before proceeding. Continue? >> Yes ``` ### Installing Gluestack UI Components ```bash npx gluestack-ui add box button card heading image input skeleton vstack text icon ``` ### Installing OpenAI API Library ```bash yarn add openai ``` Edit `App.tsx`: ```js 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 ( ); } ``` Create `AiImageBot.tsx` in your `components` folder: ```js 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 ( AI Image Generator with OpenAI setPrompt(text)} value={prompt} type="text" placeholder="Write some stuff..." /> {loading ? ( ) : undefined} {generatedImage ? ( Ai generated image

) : undefined} ); }; export default AiImageBot; ```