App.js : import $\{$ Text, SafeAreaView, StyleSheet $\}$ from 'react$-$native';

import $\{$ Card $\}$ from 'react$-$native$-$paper';

import AssetExample from $\text{'}./$components$/$AssetExample$\text{'}$;

import Category$1$ from $\text{'}./$components$/$Category$1\text{'}$;

export default function App$()\{$

return $($

Welcome to POG

Fresh, High Quality Produce

$)$;

$\}$

const styles $=$ StyleSheet.create$(\{$

container: $\{$

flex: $1,$

$//$ justifyContent: 'center',

backgroundColor: $\text{'}$#ecf$0$f$1\text{'},$

padding: $8,$

$\},$

headerTitle: $\{$

margin: $14,$

fontSize: $38,$

fontWeight: 'bold',

textAlign: 'center',

$\},$

subTitle: $\{$

margin: $14,$

fontSize: $18,$

fontWeight: 'bold',

textAlign: 'center',

$\},$

$\})$;

Component$/$Category$1.$js

import React, $\{$ useState $\}$ from 'react';

import $\{$ View, Text, Image, StyleSheet,Button $\}$ from 'react$-$native';

import $\{$ Picker $\}$ from $\text{'}$@react$-$native$-$picker$/$picker$\text{'}$;

export default function Category$1()\{$

const $[$selectedFruit$,$ setSelectedFruit$]=$ useState$(\text{'}$select$\text{'})$;

const $[$selectedQuantity$,$ setSelectedQuantity$]=$ useState$(\text{'}$quantity$\text{'})$;

const $[$totalPrice$,$ setTotalPrice$]=$ useState$(0)$;

const fruitPrices $=\{$

apple: $2,$

banana: $3,$

orange: $3,$

grapes: $4,$

mango: $5$

$\}$;

const addToBasket $=()=>\{$

const price $=$ fruitPrices$[$selectedFruit$]$;

const subtotal $=$ price $*$ selectedQuantity;

const newTotalPrice $=$ totalPrice $+$ subtotal;

setTotalPrice$($newTotalPrice$)$;

console.log$(`$Adding $$\{$selectedQuantity$\}$ $$\{$selectedFruit$\}($s$)$ to the basket. Total cost: $$$\{$newTotalPrice$\}`)$;

$//$ You can implement the functionality to add to basket here

$\}$;

return $($

Fruits

setSelectedFruit$($itemValue$)\}$

$>$

setSelectedQuantity$($itemValue$)\}$

$>$

Total Price: $$\{$totalPrice$.$toFixed$(2)\}$

$)$;

$\}$

const styles $=$ StyleSheet.create$(\{$

fruits: $\{$

width: $\text{'}100\%\text{'},$

height: $200,$

borderTopLeftRadius: $10,$

borderTopRightRadius: $10,$

$\},$

title: $\{$

fontSize: $20,$

fontWeight: 'bold',

textAlign: 'center',

paddingVertical: $10,$

$\},$

$\})$;

import $\{$ Text, View, StyleSheet, Image $\}$ from 'react$-$native';

export default function AssetExample$()\{$

return $($

$)$;

$\}$

const styles $=$ StyleSheet.create$(\{$

container: $\{$

alignItems: 'center',

justifyContent: 'center',

padding: $5,$

backgroundColor: $\text{'}$#ecf$0$f$1\text{'},$

borderColor: $\text{'}$#ecf$0$f$1\text{'},$

$\},$

logo: $\{$

height: $200,$

width: $340,$

marginBottom:$45$

$\}$

$\})$;

AssetExample.js

import $\{$ Text, View, StyleSheet, Image $\}$ from 'react$-$native';

export default function AssetExample$()\{$

return $($

$)$;

$\}$

const styles $=$ StyleSheet.create$(\{$

container: $\{$

alignItems: 'center',

justifyContent: 'center',

padding: $5,$

backgroundColor: $\text{'}$#ecf$0$f$1\text{'},$

borderColor: $\text{'}$#ecf$0$f$1\text{'},$

$\},$

logo: $\{$

height: $200,$

width: $340,$

marginBottom:$45$

$\}$

$\})$;

How do I enter this code into snack expo?