Skip to content

Commit 3fe241f

Browse files
aamir-067aamir-067
committed
chore: add components to modularize code
added components to the new added effects.
1 parent 1a8a35a commit 3fe241f

12 files changed

+79
-139
lines changed

‎ads/adIds.ts

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import { TestIds } from "react-native-google-mobile-ads";
22

3-
// export const AdIds = {
4-
// appOpen: TestIds.APP_OPEN,
5-
// adaptiveBanner: TestIds.ADAPTIVE_BANNER,
6-
// Interstitial: TestIds.INTERSTITIAL,
7-
// rewarded: TestIds.REWARDED,
8-
// rewardedInterstitial: TestIds.REWARDED_INTERSTITIAL,
9-
// };
10-
113
export const AdIds = {
124
appOpen: TestIds.APP_OPEN,
13-
adaptiveBanner: "ca-app-pub-3417831874175604/7074955178",
14-
Interstitial: "ca-app-pub-3417831874175604/6639064228",
15-
rewarded: "ca-app-pub-3417831874175604/9119216895",
5+
adaptiveBanner: TestIds.ADAPTIVE_BANNER,
6+
Interstitial: TestIds.INTERSTITIAL,
7+
rewarded: TestIds.REWARDED,
168
rewardedInterstitial: TestIds.REWARDED_INTERSTITIAL,
179
};
10+
11+
// export const AdIds = {
12+
// appOpen: TestIds.APP_OPEN,
13+
// adaptiveBanner: "ca-app-pub-3417831874175604/7074955178",
14+
// Interstitial: "ca-app-pub-3417831874175604/6639064228",
15+
// rewarded: "ca-app-pub-3417831874175604/9119216895",
16+
// rewardedInterstitial: TestIds.REWARDED_INTERSTITIAL,
17+
// };

‎app/(screens)/effects/backgroundRemove.tsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -128,14 +128,11 @@
128128
//? ================== Temporary =================
129129

130130
import { Text, View, ScrollView } from 'react-native'
131-
import React, { useContext } from 'react'
131+
import React from 'react'
132132
import { Link } from 'expo-router'
133133
import BannerAdComponent from '@/ads/banner';
134-
import { BannerAdSize } from 'react-native-google-mobile-ads';
135134
import ComingSoon from '@/components/comingSoon';
136-
import { GlobalContext } from '@/context/contextProvider';
137135
const backgroundRemove = () => {
138-
const { allowAds } = useContext(GlobalContext)
139136
return (
140137
<View className='bg-background h-full px-[10px]'>
141138
<ScrollView>

‎app/(screens)/effects/backgroundReplace.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ const backgroundReplace = () => {
101101

102102
<EffectImagePreview
103103
getPicture={getPicture}
104+
originalButtonText='Replace'
104105
effectTitle={"Background Replace"}
105106
image={img}
106107
setButtonText={setButtonText}

‎app/(screens)/effects/generativeFill.tsx

+9-46
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import PromptComponent from '@/components/common/promptComponent';
2020
import { generativeFill } from '@/utils/effects/generativeFill';
2121
import { rewarded } from '@/ads/reward';
2222
import EffectImagePreview from '@/components/common/effectImagePreview';
23+
import ActionButtons from '@/components/common/actionButtons';
2324

2425
export const dots = {
2526
north_west: 0,
@@ -78,7 +79,7 @@ const GenerativeFill = () => {
7879
}
7980

8081

81-
setLoadingMessage("Initializing generative recolor...");
82+
setLoadingMessage("Initializing generative Fill...");
8283

8384

8485
await validateAppVersion();
@@ -161,6 +162,7 @@ const GenerativeFill = () => {
161162
getPicture={getPicture}
162163
effectTitle={"Generative Fill"}
163164
image={img}
165+
originalButtonText='Fill'
164166
setButtonText={setButtonText}
165167
loadingMessage={loadingMessage}
166168
setLoadingMessage={setLoadingMessage}
@@ -170,41 +172,6 @@ const GenerativeFill = () => {
170172
/>
171173

172174

173-
<Text style={{ fontFamily: "Outfit-Medium" }} className='text-text text-3xl my-7'>Generative Fill</Text>
174-
175-
{
176-
177-
<TouchableOpacity onPress={getPicture} activeOpacity={0.5} className='bg-[#1D1B20] h-[280px] relative items-center rounded-[10px] justify-center'>
178-
179-
<Image
180-
onLoadStart={() => setLoadingMessage("Generative fill in progress...")}
181-
onLoad={() => setLoadingMessage("")}
182-
onError={() => {
183-
setLoadingMessage("")
184-
Alert.alert("Error", "something went wrong while loading images. try again later");
185-
setTransformedImageUrl(undefined)
186-
}}
187-
resizeMode={"contain"}
188-
className={`w-full absolute top-0 left-0 h-full ${loadingMessage ? "opacity-0" : "opacity-100"}`}
189-
source={transformedImageUrl
190-
? { uri: transformedImageUrl }
191-
: img?.uri
192-
? { uri: img.uri }
193-
: require("@/assets/images/transparent.png")}
194-
/>
195-
196-
<View className={`items-center absolute top-1/3 left-1/3 z-0 gap-y-2 ${(img || transformedImageUrl) ? "hidden" : ""}`}>
197-
<Svg width="32" height="41" viewBox="0 0 32 41" fill="">
198-
<Path d="M20 0.5H4C1.8 0.5 0 2.3 0 4.5V36.5C0 38.7 1.8 40.5 4 40.5H28C30.2 40.5 32 38.7 32 36.5V12.5L20 0.5ZM6 32.5L11 25.834L14 29.834L19 23.168L26 32.5H6ZM18 14.5V3.5L29 14.5H18Z" fill="#e5e7eb" />
199-
</Svg>
200-
<Text style={{ fontFamily: "Outfit-Medium" }} className='text-gray-200 text-xl'>Select Image</Text>
201-
</View>
202-
203-
204-
<LoadingWithMessage message={loadingMessage} />
205-
</TouchableOpacity>
206-
}
207-
208175

209176

210177

@@ -249,16 +216,12 @@ const GenerativeFill = () => {
249216
</View> : null}
250217

251218
{/* buttons */}
252-
<View className='flex-row justify-between pb-96 items-center mt-4'>
253-
<Link href={".."} asChild>
254-
<TouchableOpacity activeOpacity={0.5} className='border-2 border-buttonBackground h-[50px] rounded-md justify-center items-center max-w-40 w-[48%]'>
255-
<Text style={{ fontFamily: "Poppins-SemiBold" }} className='text-text text-sm'>Cancel</Text>
256-
</TouchableOpacity>
257-
</Link>
258-
<TouchableOpacity onPress={handleTransformation} activeOpacity={0.5} className='bg-buttonBackground h-[50px] rounded-md justify-center items-center max-w-40 w-[48%]'>
259-
<Text style={{ fontFamily: "Poppins-SemiBold" }} className='text-text text-sm'>{(transformedImageUrl && !loadingMessage) ? "Save" : "Recolor"}</Text>
260-
</TouchableOpacity>
261-
</View>
219+
<ActionButtons
220+
mainButtonAction={handleTransformation}
221+
mainButtonText={buttonText}
222+
loading={loadingMessage.length > 1}
223+
style='pb-40'
224+
/>
262225

263226

264227

‎app/(screens)/effects/generativeRecolor.tsx

+42-70
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ import Checkbox from "expo-checkbox";
1414
import { validateAppVersion } from '@/utils/validateAppVersion';
1515
import ColorPickerModel from '@/components/colorPickerModel';
1616
import { rewarded } from '@/ads/reward';
17+
import EffectImagePreview from '@/components/common/effectImagePreview';
18+
import PromptComponent from '@/components/common/promptComponent';
19+
import CustomCheckBox from '@/components/common/customCheckBox';
20+
import ActionButtons from '@/components/common/actionButtons';
1721

1822

1923
const GenerativeRecolor = () => {
@@ -25,7 +29,7 @@ const GenerativeRecolor = () => {
2529
const [transformedImageUrl, setTransformedImageUrl] = useState<string | undefined>(undefined)
2630
const [loadingMessage, setLoadingMessage] = useState("");
2731
const { allowAds } = useContext(GlobalContext);
28-
32+
const [buttonText, setButtonText] = useState("Recolor");
2933
const getPicture = async () => {
3034
const asset = await getAssetFromGallery({ fileType: "image" });
3135
setImg(asset)
@@ -70,7 +74,7 @@ const GenerativeRecolor = () => {
7074
return;
7175
}
7276

73-
if (items.length === 0) {
77+
if (items.length === 0 && prompt.trim().length === 0) {
7478
Alert.alert("Prompt Missing", "Select at least one item to recolor");
7579
return;
7680
}
@@ -80,7 +84,13 @@ const GenerativeRecolor = () => {
8084
await validateAppVersion();
8185
// remove the hast from the start.
8286
const color = colorPicked.slice(1);
83-
const promptToSend = items.length === 1 ? items.join("") : `(${items.join(";")})`;
87+
let promptToSend;
88+
89+
if (items.length == 0) {
90+
promptToSend = `(${prompt})`;
91+
} else {
92+
promptToSend = items.length === 1 ? items.join("") : `(${items.join(";")})`;
93+
}
8494

8595

8696
if (allowAds && rewarded.loaded) {
@@ -116,53 +126,27 @@ const GenerativeRecolor = () => {
116126
return (
117127
<View className='bg-background h-full px-[10px]'>
118128
<ScrollView>
119-
<Text style={{ fontFamily: "Outfit-Medium" }} className='text-text text-3xl my-7'>Generative Recolor</Text>
120-
121-
{
122-
123-
<TouchableOpacity onPress={getPicture} activeOpacity={0.5} className='bg-[#1D1B20] h-[280px] relative items-center rounded-[10px] justify-center'>
124-
125-
<Image
126-
onLoadStart={() => setLoadingMessage("Generative recolor in progress...")}
127-
onLoad={() => setLoadingMessage("")}
128-
onError={() => {
129-
setLoadingMessage("")
130-
Alert.alert("Error", "something went wrong while loading images. try again later");
131-
setTransformedImageUrl(undefined)
132-
}}
133-
resizeMode={"contain"}
134-
className={`w-full absolute top-0 left-0 h-full ${loadingMessage ? "opacity-0" : "opacity-100"}`}
135-
source={transformedImageUrl
136-
? { uri: transformedImageUrl }
137-
: img?.uri
138-
? { uri: img.uri }
139-
: require("@/assets/images/transparent.png")}
140-
/>
141-
142-
<View className={`items-center absolute top-1/3 left-1/3 z-0 gap-y-2 ${(img || transformedImageUrl) ? "hidden" : ""}`}>
143-
<Svg width="32" height="41" viewBox="0 0 32 41" fill="">
144-
<Path d="M20 0.5H4C1.8 0.5 0 2.3 0 4.5V36.5C0 38.7 1.8 40.5 4 40.5H28C30.2 40.5 32 38.7 32 36.5V12.5L20 0.5ZM6 32.5L11 25.834L14 29.834L19 23.168L26 32.5H6ZM18 14.5V3.5L29 14.5H18Z" fill="#e5e7eb" />
145-
</Svg>
146-
<Text style={{ fontFamily: "Outfit-Medium" }} className='text-gray-200 text-xl'>Select Image</Text>
147-
</View>
148-
149-
150-
<LoadingWithMessage message={loadingMessage} />
151-
</TouchableOpacity>
152-
}
129+
<EffectImagePreview
130+
getPicture={getPicture}
131+
effectTitle={"Generative Recolor"}
132+
image={img}
133+
originalButtonText='Recolor'
134+
setButtonText={setButtonText}
135+
loadingMessage={loadingMessage}
136+
setLoadingMessage={setLoadingMessage}
137+
transformedImageUrl={transformedImageUrl}
138+
setTransformedImageUrl={setTransformedImageUrl}
153139

140+
/>
154141

155-
{/* prompt Area */}
156-
<TextInput
157-
value={prompt}
158-
onChangeText={(e) => {
142+
<PromptComponent
143+
promptValue={prompt}
144+
style='mt-8 h-12 px-2 bg-backgroundContainer text-gray-200 focus:border-2 rounded-md focus:border-outline'
145+
onPromptChange={(e: string) => {
159146
handleItems(e)
160147
setTransformedImageUrl("");
161148
}}
162-
numberOfLines={3}
163149
placeholder={items.length === 0 ? 'Items to recolor separate my comma. (3 max)' : items.length >= 3 ? "Max items selected" : "New items"}
164-
className='mt-8 h-12 px-2 bg-backgroundContainer text-gray-200 focus:border-2 rounded-md focus:border-outline'
165-
placeholderTextColor={"#65558F"}
166150
/>
167151

168152
{/* items to recolor */}
@@ -186,24 +170,17 @@ const GenerativeRecolor = () => {
186170

187171

188172
<View className='flex-row justify-between items-center mt-4 gap-x-3'>
189-
<TouchableOpacity
190-
onPress={() => {
191-
setMultiple(prev => !prev);
192-
setTransformedImageUrl("");
193-
}}
194-
activeOpacity={1}
195-
className='flex-row py-1.5 items-center'
196-
>
197-
<Checkbox
198-
value={multiple}
199-
onValueChange={() => {
200-
setMultiple(prev => !prev);
201-
setTransformedImageUrl("");
173+
<View>
174+
<CustomCheckBox
175+
checked={multiple}
176+
style='pl-3'
177+
onChecked={() => {
178+
setMultiple(prev => !prev)
179+
transformedImageUrl && setTransformedImageUrl("");
202180
}}
203-
color={multiple ? "#326AFD" : "white"}
181+
label={"Recolor Multiple"}
204182
/>
205-
<Text className='text-text ml-2'>Recolor multiple</Text>
206-
</TouchableOpacity>
183+
</View>
207184

208185

209186
<View className='w-1/2 h-full flex-row justify-end gap-x-3 items-center'>
@@ -213,16 +190,11 @@ const GenerativeRecolor = () => {
213190
</View>
214191

215192
{/* buttons */}
216-
<View className='flex-row justify-between items-center mt-4'>
217-
<Link href={".."} asChild>
218-
<TouchableOpacity activeOpacity={0.5} className='border-2 border-buttonBackground h-[50px] rounded-md justify-center items-center max-w-40 w-[48%]'>
219-
<Text style={{ fontFamily: "Poppins-SemiBold" }} className='text-text text-sm'>Cancel</Text>
220-
</TouchableOpacity>
221-
</Link>
222-
<TouchableOpacity onPress={handleTransformation} activeOpacity={0.5} className='bg-buttonBackground h-[50px] rounded-md justify-center items-center max-w-40 w-[48%]'>
223-
<Text style={{ fontFamily: "Poppins-SemiBold" }} className='text-text text-sm'>{(transformedImageUrl && !loadingMessage) ? "Save" : "Recolor"}</Text>
224-
</TouchableOpacity>
225-
</View>
193+
<ActionButtons
194+
mainButtonAction={handleTransformation}
195+
mainButtonText={buttonText}
196+
loading={loadingMessage ? true : false}
197+
/>
226198

227199
</ScrollView>
228200

‎app/(screens)/effects/generativeReplace.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ const GenerativeReplace = () => {
9696
<ScrollView>
9797
<EffectImagePreview
9898
getPicture={getPicture}
99+
originalButtonText='Replace'
99100
effectTitle={"Generative Replace"}
100101
image={img}
101102
setButtonText={setButtonText}
@@ -110,7 +111,7 @@ const GenerativeReplace = () => {
110111
<View className='flex-row justify-between items-center'>
111112

112113
<PromptComponent
113-
onPromptChange={(e) => {
114+
onPromptChange={(e: string) => {
114115
setFrom(e);
115116
transformedImageUrl && setTransformedImageUrl("");
116117
}}
@@ -119,7 +120,7 @@ const GenerativeReplace = () => {
119120
style='w-[48%]'
120121
/>
121122
<PromptComponent
122-
onPromptChange={(e) => {
123+
onPromptChange={(e: string) => {
123124
setTo(e);
124125
transformedImageUrl && setTransformedImageUrl("");
125126
}}

‎app/(screens)/effects/imageRestore.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ const ImageRestore = () => {
9393

9494
<EffectImagePreview
9595
getPicture={getPicture}
96+
originalButtonText='Restore'
9697
effectTitle={"Image Restore"}
9798
image={img}
9899
setButtonText={setButtonText}

‎app/(screens)/effects/imageUpscale.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ const ImageUpscale = () => {
8888
getPicture={getPicture}
8989
effectTitle={"Image Upscale"}
9090
image={img}
91+
originalButtonText='Upscale'
9192
setButtonText={setButtonText}
9293
loadingMessage={loadingMessage}
9394
setLoadingMessage={setLoadingMessage}

‎app/(screens)/effects/improveColors.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,7 @@ const ImproveColors = () => {
150150
getPicture={getPicture}
151151
effectTitle={"Improve Colors"}
152152
image={img}
153+
originalButtonText={"Improve"}
153154
setButtonText={setButtonText}
154155
loadingMessage={loadingMessage}
155156
setLoadingMessage={setLoadingMessage}

‎app/(screens)/effects/magicEraser.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ const MagicEraser = () => {
104104
getPicture={getPicture}
105105
effectTitle={"Generative Remove"}
106106
image={img}
107+
originalButtonText='Remove'
107108
setButtonText={setButtonText}
108109
loadingMessage={loadingMessage}
109110
setLoadingMessage={setLoadingMessage}
@@ -115,7 +116,7 @@ const MagicEraser = () => {
115116
{/* prompt Area */}
116117
<PromptComponent
117118
promptValue={prompt}
118-
onPromptChange={(e) => {
119+
onPromptChange={(e: string) => {
119120
setPrompt(e)
120121
transformedImageUrl && setTransformedImageUrl("");
121122
}}

‎components/common/customCheckBox.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,14 @@ interface Props {
66
onChecked: () => void
77
checked: boolean
88
label: string
9+
style?: string
910
}
10-
const CustomCheckBox = ({ onChecked, checked, label }: Props) => {
11+
const CustomCheckBox = ({ onChecked, checked, label, style }: Props) => {
1112
return (
1213
<TouchableOpacity
1314
onPress={onChecked}
1415
activeOpacity={1}
15-
className='flex-row py-1.5 items-center'
16+
className={'flex-row py-1.5 items-center' + style}
1617
>
1718
<Checkbox
1819
value={checked}

0 commit comments

Comments
 (0)