how to fix RNSVGGroup error in react native expo app? - react-native

Question

I'm new to react native and following the tutorial on youtube. After setup sanity for the backend app gave an error. This is the tutorial:- https://youtu.be/AkEnidfZnCU
this is my code:
import { useNavigation } from '#react-navigation/native';
import React, { useEffect, useLayoutEffect, useState } from 'react';
import { View, Text, Image, TextInput, ScrollView } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { UserIcon, ChevronDownIcon, MagnifyingGlassIcon, AdjustmentsHorizontalIcon } from "react-native-heroicons/outline";
import Categories from '../components/Categories';
import FeaturedRow from '../components/FeaturedRow';
import client from '../sanity';
const HomeScreen = () => {
const navigation = useNavigation();
const [featuredCategories, setFaaturedCategories] = useState([]);
useLayoutEffect(() => {
navigation.setOptions({
headerShown: false,
})
}, []);
useEffect(() => {
client.fetch(`
*[_type =="featured"]{
...,
restaurants[]->{
...,
dishes[]->
}
}
`).then(data => {
setFaaturedCategories(data);
});
}, []);
return (
<SafeAreaView className="bg-white pt-5">
{/* Header */}
<View className="flex-row pb-3 items-center mx-4 space-x-2">
<Image
source={{
uri: 'https://links.papareact.com/wru',
}}
className="h-7 w-7 bg-gray-300 p-4 rounded-full"
/>
<View className="flex-1">
<Text className="font-bold text-gray-400 text-xs">Deliver Now!</Text>
<Text className="font-bold text-xl">Current Location
<ChevronDownIcon size={20} color="#00CCBB" />
</Text>
</View>
<UserIcon size={35} color="#00CCBB" />
</View>
{/* Search box */}
<View className="flex-row items-center space-x-2 pb-2 mx-4">
<View className="flex-row flex-1 space-x-2 bg-gray-200 p-3">
<MagnifyingGlassIcon size={20} color="gray" />
<TextInput placeholder='Restaurant and cuisines' keyboardType='default' />
</View>
<AdjustmentsHorizontalIcon color="#00CCBB" />
</View>
{/* Body */}
<ScrollView className="bg-gray-100" contentContainerStyle={{ paddingBottom: 100 }}>
{/* Categories */}
<Categories />
{/* Featured Rows */}
<FeaturedRow
id="123"
title="Featured"
description="paid placemnts from our partners"
/>
{/* Tasty Discount */}
<FeaturedRow
id="1234"
title="Tasty Discount"
description="Everyone's been enjoying these juicy Discount"
/>
{/* Offers near you */}
<FeaturedRow
id="12345"
title="Offers near you"
description="Why not support your local restaurant tonight!"
/>
</ScrollView>
</SafeAreaView>
);
}
export default HomeScreen;
I have followed all the steps from the video. But it gives me an error.
This is sanity.js file
import sanityClient from '#sanity/client'
import imageUrlBuilder from '#sanity/image-url'
const client = sanityClient({
projectId: "gbg977pk",
dataset: "production",
useCdn: true,
apiVersion: "2021-10-21",
});
const builder = imageUrlBuilder(client);
export const urlFor = (source) => builder.image(source);
export default client;
This is the error
Please help me to solve this problem.

Answer 1

In React Native, you should use the style attribute to apply CSS styles to your elements, rather than the className attribute.
Consider for example, the line:
<SafeAreaView className="bg-white pt-5">
It should be changed to:
<SafeAreaView style={{ backgroundColor: 'white', paddingTop: 5 }}>
Your code with the changes applied:
import { useNavigation } from '#react-navigation/native';
import React, { useEffect, useLayoutEffect, useState } from 'react';
import { View, Text, Image, TextInput, ScrollView } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { UserIcon, ChevronDownIcon, MagnifyingGlassIcon, AdjustmentsHorizontalIcon } from "react-native-heroicons/outline";
import Categories from '../components/Categories';
import FeaturedRow from '../components/FeaturedRow';
import client from '../sanity';
const HomeScreen = () => {
const navigation = useNavigation();
const [featuredCategories, setFaaturedCategories] = useState([]);
useLayoutEffect(() => {
navigation.setOptions({
headerShown: false,
})
}, []);
useEffect(() => {
client.fetch(`
*[_type =="featured"]{
...,
restaurants[]->{
...,
dishes[]->
}
}
`).then(data => {
setFaaturedCategories(data);
});
}, []);
return (
<SafeAreaView style={{ backgroundColor: 'white', paddingTop: 5 }}>
{/* Header */}
<View style={{ flexDirection: 'row', paddingBottom: 3, marginHorizontal: 4, alignItems: 'center', justifyContent: 'space-between' }}>
<Image
source={{
uri: 'https://links.papareact.com/wru',
}}
style={{ height: 7, width: 7, backgroundColor: 'gray-300', padding: 4, borderRadius: 'full' }}
/>
<View style={{ flex: 1 }}>
<Text style={{ fontWeight: 'bold', color: 'gray-400', fontSize: 'xs' }}>Deliver Now!</Text>
<Text style={{ fontWeight: 'bold', fontSize: 'xl' }}>Current Location
<ChevronDownIcon size={20} color="#00CCBB" />
</Text>
</View>
<UserIcon size={35} color="#00CCBB" />
</View>
{/* Search box */}
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingBottom: 2, marginHorizontal: 4 }}>
<View style={{ flexDirection: 'row', flex: 1, justifyContent: 'space-between', backgroundColor: 'gray-200', padding: 3 }}>
<MagnifyingGlassIcon size={20} color="gray" />
<TextInput placeholder='Restaurant and cuisines' keyboardType='default' />
</View>
<AdjustmentsHorizontalIcon color="#00CCBB" />
</View>
{/* Body */}
<ScrollView style={{ backgroundColor: 'gray-100' }} contentContainerStyle={{ paddingBottom: 100 }}>
{/* Categories */}
<Categories />
{/* Featured Rows */}
<FeaturedRow
id="123"
title="Featured"
description="paid placemnts from our partners"
/>
{/* Tasty Discount */}
<FeaturedRow
id="1234"
title="Tasty Discount"
description="Everyone's been enjoying these juicy Discount"
/>
{/* Offers near you */}
<FeaturedRow
id="12345"
title="Offers near you"
description="Why not support your local restaurant tonight!"
/>
</ScrollView>
</SafeAreaView>
);
}
export default HomeScreen;