using react-native-elements for material Icons - does not recognise some of the icons - react-native

using the snack below:
https://snack.expo.io/ry_5rCk84
I am trying to display the icon 'wifi_off' using Material Icons in my react native app (just shared this as a snack on expo for easier sharing) but this is not a recognised value for prop 'name'.
and ends up displaying a '?' for unknown icon.
I am able to use wifi-off icon using 'material-community' icon set
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
import {Icon} from 'react-native-elements';
// 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}>
<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>
<Icon name='wifi' size={50} type='material'/>
<Icon name='wifi-off' size={50} type='material-community' />
<Icon name='wifi_off' size={50} type='material' />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});

react-native-elements uses react-native-vector-icons to display the icons.
react-native-vector-icons has a directory where you can check which icons are available, you can look them up by name. https://oblador.github.io/react-native-vector-icons/
If you search for all the icons that have wifi in their name you find the following result for MaterialIcons and MaterialCommunityIcons
If you search for wifi_off you will find that there are no results.
Therefore wifi_off is not available to use.
It is also worth noting that react-native-elements currently doesn't support the latest version of react-native-vector-icons, you can see that in this currently open issue.

When you are using react native elements Icon, behind the scenes it is searching in a list https://github.com/oblador/react-native-vector-icons/blob/master/glyphmaps/MaterialIcons.json, here you can find the names of the Icons that are supported and as you can see "wifi_off" is not here, maybe you can try "signal-wifi-off".

Related

How can I send a text from my React Native App without leaving my app?

I have a React Native - Expo Android mobile app that we are using to send text messages out to customers to let them know when we arrive, currently using Twilio and it is expensive, I have tried many code examples to send a text message directly from the phone and they all seem to go outside the app and want to send the text message through the phone's default message app eg Messages, we want to stay in our app and send them.
My question is:
Is there a way to do this? If so how?
If not what is a cheaper solution than Twilio to send texts that will work in a React Native - Expo app?
I have been trying to find a solution now for quite awhile.
Thanks in advance for your help!
I have tried many code examples with no luck, here is an example of the code I have tried:
Here is an example of the code I am trying:
/** #format */
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { Entypo } from "#expo/vector-icons";
import Communications from "react-native-communications";
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.textStyle}>SmS App</Text>
<Entypo
name="message"
size={70}
color="#202668"
onPress={() => Communications.text(
'3435447131',
'Hello'
)}
/>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
textStyle: {
fontWeight: "bold",
fontSize: 30,
color: "#2AB4F3",
bottom: 10,
},
});

flex:1 makes my view disapear in react-native

i am new to react i m trying to make the background color of my main container cover all the screen but when i use flex 1 everything seems to disappear i've seen many people doing it and it turned fine i can't understand the problem since i m using it on my container .
import React from 'react';
import mainstyles from '../styles/mainstyles';
import {
Button,
Text,
View,
AlertButton,
TouchableOpacity,
} from 'react-native';
const UploadFile = ()=>{
return (
<View style={mainstyles.container}>
<Text style={mainstyles.title}>Ocr Scan</Text>
<Text style={mainstyles.par}>Import a file and start digitizing</Text>
<Button
title="Take picture"
/>
<Button
title="Upload file"
/>
</View>
);
};
export default UploadFile;
import {StyleSheet} from 'react-native'
const mainstyles=StyleSheet.create({
container:{
flex:1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black',
},
When you use flex on a component A, every component B that nest component A need to use flex.

How to translate mobile app text using language drop-down inside react-native app?

I want to add translate drop-down inside mobile app to translate the app text without using language json file.
I just want to add the select list at the top of app to change the language of text, like this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_google_translate
Is this possible with react native app?
Here is an example of how you can achieve that.
Working Example: Expo Snack
import React, { useState } from 'react';
import { Text, View, StyleSheet, Picker } from 'react-native';
import Constants from 'expo-constants';
const engToHindi = {
english: 'hello',
hindi: 'नमस्कार',
};
export default function App() {
const [language, setLanguage] = useState('english');
return (
<View style={styles.container}>
<Picker
selectedValue={language}
style={{ height: 50, width: 100 }}
onValueChange={(itemValue) => setLanguage(itemValue)}>
<Picker.Item label="English" value="english" />
<Picker.Item label="हिन्दी" value="hindi" />
</Picker>
<Text>{engToHindi[language]}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
Online Implementation using Google Translate API would be possible but I don't have the API keys so could not give you the example of that implementation.

Upgraded react-native-fontawesome to 6.0.1, icons showing up as question marks

react-native-fontawesome was working just fine for me at version 5. I upgraded to 6.0.1 but downloading the new font-awesome files, adding the new tff files into the assets/fonts folder, running react-native link react-native-fontawesome.
I closed my simulators and ran react-native run-ios and see that the icons that worked before are now question marks. They don't show up on Android either
Firstly you need to install the dependency and link the library by the following ways...
Run the following command to install the dependency.
npm install react-native-vector-icons --save
Linking of Dependency...
After the updation of React Native 0.60, they have introduced the auto-linking feature means we do not require to link the library but they have also mentioned that some libraries need linking and react-native-vector-icons is one of those cases. So for that, we need to link the library using.
react-native link react-native-vector-icons
And copy the given App.js file that shows below.
/*Example of React Native Vector Icon*/
import React, {Component} from 'react';
//import React
import {Platform, StyleSheet, Text, View} from 'react-native';
//import all the basic components
import Icon from 'react-native-vector-icons/FontAwesome';
//import vector icons
type Props = {};
export default class App extends Component<Props> {
render() {
Icon.getImageSource('user', 20, 'red').then((source) => this.setState({ userIcon: source }));
return (
<View style={styles.container}>
<Text>Example of Vector Icon</Text>
<View style={{marginTop:16, marginBottom:16, justifyContent:'center', alignItems:'center', textAlign:'center'}}>
<Text><Icon name="rocket" size={'{30}'} color="#900" /></Text>
{/*Icon Component*/}
<Icon name="rocket" size={30} color="#900" />
</View>
<View style={{marginTop:16, marginBottom:16}}>
{/*Icon.Button Component*/}
<Icon.Button name="facebook" backgroundColor="#3b5998" onPress={()=>alert("Login with Facebook")}>
Login with Facebook
</Icon.Button>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
or you can follow the following link...
https://aboutreact.com/react-native-vector-icons/

Some react-native vector icons are not shown

I'm building an application and I have a
problem with react-native icon. This is an image of the problem.
I followed this link and then I made sure the font is copied to android/app/src/main/assets/fonts, deleted the android/app/build folder. Finally I restarted react native package, but not throwing good result it such as first. How to fix this problem?
This is my code:
import React, { Component } from 'react';
import { Image, StyleSheet, View } from 'react-native';
import { Container, Header, Content, Card, CardItem, Right, Left, Thumbnail, Body, Text, Button, Icon } from 'native-base';
export default class SideMenu extends Component {
render() {
return (
<Container style={{ flex:1, backgroundColor:'#fcfcfc' }}>
<Content>
<Body style={{ justifyContent: 'center' }}>
<Image style={{ position: 'relative'}} source={require('../../../image/imac.jpg')}/>
<View style={bao.cover}>
<Thumbnail square source={require('../../../image/ava.jpg')} style={{borderRadius:40}}/>
<Text style={{ color:'#fff', flex:1, lineHeight:40, fontSize:18 }}> Vu Nguyen </Text>
</View>
</Body>
<Card>
<CardItem>
<Icon name="home" />
<Text>Home</Text>
</CardItem>
<CardItem>
<Icon name="news" />
<Text>Home</Text>
</CardItem>
</Card>
</Content>
</Container>
);
}
}
const bao = StyleSheet.create({
cover:{
position:'absolute',
flex: 1,
flexDirection: 'row',
marginLeft:30,
top: 170
}
})
Make sure the icon name you are is there in whatever Icon set you are using like (FontAwesome, Ionicons) etc.
"news" icon is available in Entypo
The issue was solved for me by:
react-native link
and then:
react-native run-android
I had a similar problem where the node_modules/react-native-vector-icons/glyphmaps/FontAwesome5Pro.json was outdated. I was trying to get the "bible" icon from FontAwesome v5.3.1, however resources from react-native-vector-icons still seem to be from 5.0. So a "?" was appearing.
I tried to npm install the latest version of react-native-vector-icons, but the problem persisted.
I manually copied the FontAwesome5Pro.json content from the Github repo. After restarting my simulator the question marks had become the icons I was looking for.
it's because native-base have some icons and some are not present.
so try to import the icon from it's original module instead of native-base
try this
import Icon from 'react-native-ionicons'
or other font libraries
import Icon from 'react-native-fontawesome'
instead of this
import { Icon } from 'native-base'
If anyone is facing this issue please paste this line in your app/build.gradle and re-run the project.
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
try this
react-native link react-native-vector-icons