attached is the code below for a little app I am making with React Native. I was trying to use react icons but for some reason they are not working and idk why. I imported them and everything and they should be working but I keep getting this error. Does anyone know why my react icons are not functioning properly? Thanks in advance.
import { View, Text, SafeAreaView, Image } from 'react-native';
import React, { useLayoutEffect } from 'react';
import { useNavigation } from '#react-navigation/native';
import { FaBeer } from 'react-icons/fa';
const HomeScreen = () => {
const navigation = useNavigation();
useLayoutEffect(() => {
navigation.setOptions({
headerShown: false,
});
}, []);
return (
<SafeAreaView>
<Text className="text-red-500">
<View className="flex-row pb-3 items-center mx-4 space-x-2">
<Image
source={{
url:"https://links.papareact.com/wru",
}}
className="h-7 w-7 bg-gray-300 p-4 rounded-full"
/>
<View>
<Text className="font-bold text-gray-400 text-xs">
Deliver Now
</Text>
<Text className="font-bold text-xl">Current Location
<FaBeer />
</Text>
</View>
</View>
</Text>
</SafeAreaView>
);
};
export default HomeScreen;
react-icons doesn't work with react native (i think). You need to use react-native-vector-icons (https://www.npmjs.com/package/react-native-vector-icons)
you cant use normal react icons since in react native icons can be either an image or can be SVG, so for SVG icons, you need to add react-native-svg package.
You should install as #dev404 said https://github.com/oblador/react-native-vector-icons
Also do follow their installation process for both android and ios.
YOu can check the below available icon sets.
Hope it helps, feel free for doubts
Related
I was trying to set up tailwind-rn in my project, but it seems impossible. The documentation says you should use yarn add tailwind-rn to install, then npx setup-tailwind-rn to set it up. This is a code example on the github page:
import React from 'react';
import {SafeAreaView, View, Text} from 'react-native';
import {useTailwind} from 'tailwind-rn';
const Hello = () => {
const tailwind = useTailwind();
return (
<SafeAreaView style={tailwind('h-full')}>
<View style={tailwind('pt-12 items-center')}>
<View style={tailwind('bg-blue-200 px-3 py-1 rounded-full')}>
<Text style={tailwind('text-blue-800 font-semibold')}>
Hello Tailwind
</Text>
</View>
</View>
</SafeAreaView>
);
};
export default Hello;
My code looks like this:
import { StyleSheet, Text, View } from 'react-native';
import {useTailwind} from 'tailwind-rn';
export default function App() {
const tailwind = useTailwind();
return (
<View style={tailwind('text-white')}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
The code does not throw any error, but simply produces nothing. I also checked the value of tailwind('text-white'), which seems to be just an empty object. Why does that not work?
Add this to your dependencies (package.json)
"tailwind-react-native-classnames": "^1.5.1",
and Import it in your project page like this,
import tw from "tailwind-react-native-classnames";
Finally use the tailwind styles like this,
style={tw`flex-1`}
<View style={[tw`bg-gray-200`, { height: 0.6 }]} />
And finally your code will work.
I have a project where I must put some videos on my page. I didn't what they would be so I used this :
const video = React.useRef(null);
...
...
<Video
ref={video}
style={styles.video}
source={{
uri: "https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
//https://www.youtube.com/watch?v=g57_0gejMig
}}
useNativeControls
isLooping
onPlaybackStatusUpdate={(status) => setStatus(() => status)}
/>
Howether it doesn't seems to work with url. Any idea?
You can try the below implementation.
It uses a video id from a link that just pastes the ID of the Youtube video in the below code.
import React from 'react';
import {View} from 'react-native';
import YoutubePlayer from 'react-native-youtube-iframe';
const App = () => {
return (
<View>
<YoutubePlayer
height={300}
play={true}
videoId={'84WIaK3bl_s'}
/>
</View>
);
};
I am trying to decide on the best way to set up routing in my React Native Web project. I am using expo and followed this guide to use Next JS https://docs.expo.io/versions/latest/guides/using-nextjs/ so I have App.js like this:
import index from "./pages/index";
import alternate from "./pages/alternate";
import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
const AppNavigator = createStackNavigator(
{
index,
alternate
},
{
initialRouteName: "index"
}
);
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;
My concern is how best to handle routing. I have my index.js page setup like this currently.
import * as React from 'react'
import { StyleSheet, Button, Text, View } from 'react-native'
export default function App ({navigation}) {
return (
<View style={styles.container}>
{/* Native route */}
<Button
title="Go to Details"
onPress={() => navigation.navigate("alternate")}
/>
{/* Web route */}
<Text style={styles.link} accessibilityRole="link" href={`/alternate`}>
A universal link
</Text>
</View>
);
}
As you can see this is currently requiring separate code to render a Native vs Web route. I am wondering what is the best way to handle this sort of rendering. I looked into using React Navigation for web and wouldn't be opposed to this but it seems like I should probably stick with the Next Router.
Thanks in advance for any advice on handling conditional rendering like this.
Use reactnavigation web support for that
https://reactnavigation.org/docs/en/web-support.html
import { createSwitchNavigator } from "#react-navigation/core";
import { createBrowserApp } from "#react-navigation/web";
const MyNavigator = createSwitchNavigator(routes);
const App = createBrowserApp(MyNavigator);
// now you can render "App" normally
There is import { Platform } from 'react-native':
{Platform.OS === 'web' ? (
<Text
style={styles.link}
accessibilityRole="link"
href={`/alternate`}
>
A universal link
</Text>
) : (
<Button
title="Go to Details"
onPress={() => navigation.navigate("alternate")}
/>
)}
StatusBar backgroundColor prop doesn't work, in Expo Snack too. Work only props hidden and barStyle. Code example from Expo Snack:
import * as React from 'react';
import { Text, View, StyleSheet, StatusBar } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<StatusBar backgroundColor="white" barStyle="dark-content" hidden={false} translucent={false}/>
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone! Save to get a shareable url.
</Text>
<Card>
<AssetExample />
</Card>
</View>
);
}
}
I also tried to add a style in the app.json:
{
"expo": {
...
"androidStatusBar": {
"backgroundColor": "#ffffff"
}
}
}
and
"androidStatusBarColor": "#ffffff", "androidStatusBar": { "barStyle": "dark-content", "backgroundColor": "#ffffff" }
What do i wrong?
Thanks!
It's an Expo problem, the community has been asking for a solution for some time. But it seems that in the next versions of Expo the problem will be solved.
You can follow this situation here: https://github.com/expo/expo/issues/2813
I am using expo and react native. I am just in the process of setting up rooting, but there is an issue when using icons.
import React from 'react';
import { TouchableHighlight } from 'react-native';
import { FontAwesome } from '#expo/vector-icons';
import { Link } from 'react-router-native'
const Action = ({name, color, size, type}) => {
return (
<Link to="/">
<TouchableHighlight>
<FontAwesome name={name} size={size} color={color}/>
</TouchableHighlight>
</Link>
)
}
If I change it to the following and use Text it does work, any ideas why, or how to use Link with an icon?
return (
<Link to="/">
<Text>Go Home</Text>
</Link>
)