Why my react native vector icons are not working? - javascript

Why my react native vector icons are not working? I tried following every step in the react-native vector icons docs said but still, my icons are not working can anyone can help me how can I setup it up properly? i want to use a camera icon in my app so i tried this import { Entypo } from 'react-native-vector-icons'; and then \<Entypo name="camera" size={24} color="black" style={icons1} /\> but when it was giving me exports error I also tried to use import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; and then \<Icon name="camera-outline" size={24} color="black" style={icons1}/\> but still the export errors due to it and when I remove those icons the error is gone,
is there any website where i can see all the react-native-vector-icons for react native cli app and also i can see the code snippet for usage?
i also added this in the android/settings.gradle file:
include ':react-native-vector-icons' project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
then added this in android/app/build.gradle:
dependencies { ... implementation project(':react-native-vector-icons') }
and lastly, I added this in MainApplication.java:
import com.oblador.vectoricons.VectorIconsPackage;
#Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
...
new VectorIconsPackage()
);
}

Frist thing
you can install vector icons using this npm
react-native-vector-icons
then done all the setup from here
then after you can import like this
import FontAwesome from 'react-native-vector-icons/FontAwesome';
many times vector icons [icons] do not work in our system
so you can use different icons in vector icons many different icons
part in vector icon
here is Exmplae maybe this will help you
App.js
import React, { useState } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
const App = () => {
return (
<View style={styles.container}>
<FontAwesome name="rocket" size={30} color="#900" />
<FontAwesome name="home" size={30} color="#b2b2b2" />
<FontAwesome name="facebook" size={30} color="#900" />
<FontAwesome name="google" size={30} color="#000" />
</View>
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 8,
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center',
},
});
here is output

Related

How to use linear-gradient text in react native mobile apps (android apps)? no expo

How to use linear-gradient text in react native mobile apps (android apps)? no expo and I want to make text color in linear-gradient how can I do? is it possible if yes than how and if no than how popular apps use linear-gradient text they also use react native in their tech stack tired tired to give color style to color linear-gradient but it didn't work
background: linear-gradient(90.35deg, #33DFDF 10.9%, #0047FF 25.48%, #00A3FF 40.06%, #044AFF 54.65%, #FA00FF 69.23%, #D90AFB 83.81%);
my code
//import liraries
import React from 'react';
import { Image, Text, View, TouchableOpacity } from 'react-native';
import WrapperContainer from '../../Components/WrapperContainer';
import imagePath from '../../constatns/imagePath';
import strings from '../../constatns/lang';
import navigationStrings from '../../constatns/navigationStrings';
import colors from '../../styles/colors';
import styles from './styles';
import LinearGradient from 'react-native-linear-gradient';
import MaskedView from '#react-native-masked-view/masked-view';
const TermsCondition = ({ navigation }) => {
return (
<WrapperContainer containerStyle={{ alignItems: 'center' }}>
<Image resizeMode='contain' style={styles.logoStyle} source={imagePath.icLogo} />
<Text style={styles.headingStyle}>{strings.WELCOME_TO_ourapp}</Text>
<Text style={styles.descStyle}>{strings.READ_OUR} <Text style={{ color: colors.lightBlue }}>{strings.PRIVACY_POLICY}</Text> {strings.TAP_AGREE_AND_CONTINUE_TO_CEEPT_THE} <Text style={{ color: colors.lightBlue }}>{strings.TERMS_OF_SERVICE}
</Text></Text>
<TouchableOpacity onPress={() => navigation.navigate(navigationStrings.PHONE_NUMBER)} activeOpacity={0.7}>
<Text style={styles.agreeStyle}>{strings.AGREE_AND_CONTINUE}</Text>
</TouchableOpacity>
</WrapperContainer>
);
};
export default TermsCondition;
I think react-native-linear-gradient can only be customized in the background text, not in the text.
Android:
I also have another option, using react-native-text-gradient, but until now there is still an issue in the installation. https://github.com/iyegoroff/react-native-text-gradient/issues/53
so, Now I suggest using #react-native-masked-view/masked-view if you want a custom gradient in the text, I think this helps, you can read here
https://github.com/react-native-masked-view /masked-view
Android:
step 1 :
yarn add react-native-linear-gradient-text
or
npm install react-native-linear-gradient-text
step 2 :
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { LinearGradientText } from 'react-native-linear-gradient-text';
export const App = () => {
return (
<View style={styles.container}>
<LinearGradientText
colors={['#E76F00', '#EA374E']}
text="Hello World"
start={{ x: 0.5, y: 0 }}
end={{ x: 1, y: 1 }}
textStyle={{ fontSize: 40 }}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
Hope this solves your problem. for the library documentation check this link :
https://www.npmjs.com/package/react-native-linear-gradient-text

How to display two icons side by side in React?

I'm developing an app for a school project and i've been trying to show two icons side by side for a screen (i've been using React for 5 months but i'm still a noob at it)
But they display one over the other, i even tried using Bootstrap columns to make it show them the way i want but i just couldn't do it
Here's the code
import { View } from 'react-native';
// import Button from '#mui/material/Button';
import CheckCircle from '#mui/icons-material/CheckCircle'
import styles from '../../App';
import { GiBroom } from 'react-icons/gi';
import { borderRadius } from "#mui/system";
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
export default function LimpiarCurso(){
return (
<Container style={styles.container}>
<Row>
<Col><CheckCircle sx={{ fontSize: 200, color: 'white', backgroundColor:'green', display:'inline-block'}} style={{float: 'right'}}/></Col>
<Col><GiBroom size={200} style={{float: 'right', display: 'inline-block'}}/></Col>
</Row>
</Container>
)
}
First of all greetings .These are all basic mistakes that were made by freshers .Don't worry. Try putting those Icons inside a {View} tag. And give some styles for View as below . This works for me .
import { Image, StyleSheet, Text, View ,TouchableOpacity,ScrollView} from 'react-native'
import React from 'react';
import { MaterialCommunityIcons,Ionicons,FontAwesome5 } from '#expo/vector-icons';
<View style={{flexDirection:'row',justifyContent:'space-evenly'}}>
<TouchableOpacity style={styles.button}>
<MaterialCommunityIcons
name='message-alert'
size={50}
color={'#BACAFF'}
/>
<Text>New Complaint</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<MaterialCommunityIcons
name='message-alert'
size={50}
color={'#BACAFF'}
/>
<Text>Track a Complaint</Text>
</TouchableOpacity>
</View>
The styles for button is
button:{
padding:20,
backgroundColor:'#fff',
elevation:10,
shadowColor:'#000',
borderRadius:10,
alignContent:'center',
alignItems:'center'
},

How to use swipeable component in react native to make new "View" after swiping ride?

I am new to React-Native, using the swipeable componet to render the new "View" for delete purpose. after swiping right it does not work.
It gives WARN, which below I have mentioned.
import React from 'react';
import {
View,
Text,
StyleSheet,
} from 'react-native';
import Swipeable from 'react-native-gesture-handler/Swipeable';
function App(props) {
return (
<Swipeable renderRightActions={()=> (
<View style={{backgroundColor:'red', width:70}}>
</View>
)}>
<View style={styles.container}>
<Text style={styles.text}> Swipe right to Delete</Text>
</View>
</Swipeable>
);
}
const styles = StyleSheet.create({
container:{
flexDirection:"row",
backgroundColor:'lightgray',
width: "100%",
height:70,
justifyContent:'center',
alignItems:'center',
},
text:{
fontWeight:'bold',
fontSize:18,
}
})
export default App;
WARN [react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system!
PanGestureHandler#http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.swipeabletest&modulesOnly=false&runModule=true:110702:38
Swipeable#http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.swipeabletest&modulesOnly=false&runModule=true:110053:36
App
RCTView
View
RCTView
View
AppContainer#http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.swipeabletest&modulesOnly=false&runModule=true:77006:36
swipeableTest(RootComponent)#http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.swipeabletest&modulesOnly=false&runModule=true:83408:28

Switching Between Screens with React Native Navigation and importing JS

I'm struggling to figure out why my code doesn't work. I keep reading the tutorials and nothing helps. How can I switch between screens and have the screens in different JS files (as components)?
Currently, my code works for the first screen, but when I click on the button nothing shows up.
Please see the codes below:
App.js
import * as React from 'react';
import {Button, View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import TestScreen from './components/Test';
//HOME SCREEN
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Test"
onPress={() => navigation.navigate('Test',{myParam: '03',})}
/>
</View>
);
}
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Test" component={TestScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Test.js
import React, { Component } from "react";
import { Text, View } from "react-native";
class Test extends Component {
render() {
const { navigation } = this.props;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Test Screen</Text>
<Button
title="Test"
onPress={() => navigation.navigate('Home')}
/>
</View>
);
}
}
export default Test;
It seems it was a very simple issue and I figured it out myself. The code in Test.js was missing 'Button' in the import statement. The correct way should be:
import { Button, Text, View } from "react-native";
It's a silly mistake, but it's not the first time this happens to me. I use Visual Studio Code, which highlights missing connections, but it seems that this doesn't work for some components. Not to mention it compiles (bundling) with no problems.
Nevertheless, the code works fine now.
First you have to import useNavigation in Test.js file.
Like this:
import { useNavigation } from "#react-navigation/core";
Then you have to use it and save it in a variable like:
const navigation = useNavigation();
Now use:
onPress={() => navigation.navigate('Home')};
This will navigate to the the other Screen.
Make sure you install every library you use in your project using npm or yarn.

React Native + NativeBase Content component and Carousel (not displaying)

Good day,
Here's a small problem with my React Native app which uses NativeBase components. The problem is within the <Content /> component of NativeBase. I want to use the <Carousel /> component from github which is react-native-carousel.
The code is as follows:
index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native';
import {
Container,
Header,
Content,
Title,
Icon,
Button,
} from 'native-base';
import Carousel from 'react-native-carousel';
import styles from './src/styles/styles';
export default class iABC extends Component {
render() {
return (
<Container>
<Header backgroundColor='#ffffff' height={50}>
<Button transparent>
<Icon name='md-menu' style={styles.header.icon} />
</Button>
<Title style={styles.header.title}>
iABC
</Title>
<Button transparent>
<Icon name='md-person' style={styles.header.icon} />
</Button>
</Header>
<Content>
<View style={styles.global.content}>
<Carousel width={375}
hideIndicators={false}
indicatorColor='#000000'
indicatorSize={25}
indicatorSpace={20}
indicatorAtBottom={true}
indicatorOffset={250}
indicatorText='>'
animate={true}
delay={2000}
loop={true}>
<View style={styles.carousel.page1}>
<Text>Page 1</Text>
</View>
<View style={styles.carousel.page1}>
<Text>Page 2</Text>
</View>
<View style={styles.carousel.page1}>
<Text>Page 3</Text>
</View>
</Carousel>
</View>
</Content>
</Container>
);
}
}
AppRegistry.registerComponent('iABC', () => iABC);
Style: carousel.js
'use strict'
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
page1: {
flex: 1,
height: 150,
width: 375,
backgroundColor: '#cdcdcd',
justifyContent: 'center',
alignItems: 'center',
}
})
Style: global.js
'use strict'
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
content: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
})
I have tried many things, styling carousel component, giving it a separate view, styling both at the same time, but unfortunately it doesn't work. However, as long as I remove <Content /> component of NativeBase, it works fine. I'm pretty sure that the problem is with the NativeBase component.
Thanks in advance.
About react-native-carousel
Renders Carousel
Carousel renders CarouselPager
And CarouselPagerrenders ScrollView of RN
About NativeBase Content, it renders ScrollView of RN. So wrapping it in another ScrollView is not necessary and causing problem.
Try excluding NB's Content.
Know more about NativeBase's replacing components - CheatSheet

Categories