I have the following code:
import React, { useEffect, useState } from 'react';
import { View } from 'react-native';
import { FontAwesome } from '#expo/vector-icons';
import styles from './styles';
export default function LiveCalls( { navigation }) {
return (
<View>
<FontAwesome name="search" size={204} color="black" />
</View>
);
}
My app runs okay. I'm not getting an errors or warnings. But – no icons are showing. Not even a mysterious "X", where the icon should be. Just nothing. Empty space. Nada. Zilch.
I did check the #expo folder in my node_modules directory to make sure that it's in there... and it is.
I also double checked my icon name, to make sure there was an actual icon in the icon set that I was using.
Additionally, I've tried changing sizes (thinking it might just be super tiny), colors (thinking it might be defaulting to transparent or something), and nothing seems to work.
Any idea what the problem is?
Related
The screen is Wrapped inside KeyboardAvoidingView and ScrollView components. Some of the last inputs are partially hidden by the keyboard. If I set the behaviour prop to anything, but undefined a white element comes up after keyboard. All I would like to do is to make the screen scroll down like 20 more pixels... I feel like I have tried everything so far, even setting the keyboardVerticalOffset prop, but nothing seems to work. If that offset was transparent it would be perfect...
In the following code a View component is passed to children prop
import { FunctionComponent, ReactNode } from 'react';
import { KeyboardAvoidingView, ScrollView } from 'react-native';
interface WrapperProps {
children: ReactNode;
}
const KeyboardAvoidingWrapper: FunctionComponent<WrapperProps> = ({children}) => {
return (
<KeyboardAvoidingView behavior='height' keyboardVerticalOffset={100}>
<ScrollView>
{children}
</ScrollView>
</KeyboardAvoidingView>
);
};
Instead, You can use react-native-keyboard-aware-scroll-view.
I solved my issue with: react-native-avoid-softinput
INSTALLATION:
yarn add react-native-avoid-softinput
On iOS additionally run: npx pod-install
USAGE:
import React from "react";
import { AvoidSoftInputView } from "react-native-avoid-softinput";
const MyComponent = () => {
return (
<AvoidSoftInputView>
{/** Content that should be pushed above the keyboard */}
</AvoidSoftInputView>
);
};
TROUBLESHOOTING:
requireNativeComponent: "AvoidSoftInputView" was not found in the UIManager.
Solution: https://stackoverflow.com/a/65513391/14056591
Try again cd ios && pod install
If it doesn't help, try restarting the simulator, delete and rebuild the app. Restarting Xcode and metro bundler is also a good idea.
If this does not solve your issue, I came across another promising library, but I did not get to use it: react-native-keyboard-controller
So this is basically the code I have
import { Ionicons } from '#expo/vector-icons';
class DrawerItem extends React.Component {
render() {
return (
<Ionicons name="speedometer" size={14} color="green" />
)
}
}
I am trying to use an icon called speedometer, as found in the Ionicons documentation.
However, in its place, a question mark ? appears and I get the following error:
Warning: Failed prop type: Invalid prop `name` of value `speedometer` supplied to `Icon`, expected one of ["ios-add","ios-add-circle","ios-add-circle-outline","ios-airplane","ios-alarm","ios-albums","ios-alert","ios-american-football","ios-analytics","ios-aperture","ios-apps","ios-appstore","ios-archive","ios-arrow-back","ios-arrow-down","ios-arrow-dropdown","ios-arrow-dropdown-circle","ios-arrow-dropleft","ios-arrow-dropleft-circle","ios-arrow-dropright","ios-arrow-dropright-circle"...
The error shows me the names I can use, but makes no sense because the Ionicons documentation mentions that there is an icon called speedometer.
Another thing that I found is that that specific icon does not appear in the Expo Vector Icons documentation.
However, I would like to add it. Any way to include ALL icons from the Ionicons library?
You have to import icons this way:
import { MaterialCommunityIcons } from '#expo/vector-icons';
<MaterialCommunityIcons name="speedometer" size={24} color="black" />
As you stated Ionicons does not contain the speedometer icon. Instead use ios-speedometer.
If you really want that specific icon, I'd recommend downloading the SVG and converting it to a standalone component using e.g. react-svgr (or any other svg jsx tool)
Dont forget to install react-native-svg :)
You can now import the icon using a normal import.
E.g. import SpeedometerIcon from './icons/Speedometer.js'
I'm trying to style a View in React-native but I keep getting this Error
(undefined is not an object (evaluating 'styles.screen))
I made a simple code ...
import React, {useState} from 'react';
import {StyleSheet, Text, View, Button, TextInput} from 'react-native';
export default function App() {
return (
<View style={styles.screen}>
<Text>I am testing</Text>
</View>
);
const styles = StyleSheet.create({
screen: {
padding: 50,
},
});
}
I spent two hours trying to fix this
This should fix it:
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
export default function App() {
return (
<View style={styles.screen}>
<Text>I am testing</Text>
</View>
);
}
const styles = StyleSheet.create({
screen: {
padding: 50,
},
});
You need to move the const styles object outside of your App() function. The way you have it will return before initialising your stylesheet. An alternative is to place it before your return() inside App() but it is more standard to have it outside.
So, after troubleshooting for 3 hours and finding no info on this, I finally have the answer. I used a class template search bar React Native Search Bar and created custom styles for said search bar that was being exported from a file, in a folder named 'components' in a parent folder 'app' that was in my '[project]' folder. I imported the class to each screen as it was a header.
The following was an *incorrect import:
import {SearchComponent} from './app/components/searchComponent'
The correct import is:
import SearchComponent from './app/components/searchComponent'
(Because the SearchComponent was exported as a default component and not a named component in the searchComponent.js file.)
Quick reference to default vs named exports
After correctly importing the component, make sure your styles within that component's folder are named correctly and do not share style names with other styles in your destination file; i.e., name of fileA:styleA != name of fileB:styleA.
After checking your exports and imports very, very carefully and checking your style names with the same detail it worked – and it should work for you, as well.
I'm using the StatusBar component in react native (Android). Here is an example code from my App.js component:
import React, { Component } from 'react';
import { View, StatusBar } from 'react-native';
import { RootNavigator } from './components/Router';
export default class MainApp extends Component {
render() {
return (
<View style={{flex: 1}}>
<StatusBar backgroundColor='black' barStyle="light-content"/>
<RootNavigator />
</View>
);
}
}
The StatusBar is working properly when you launch the app, when you navigate through the entire app and when put in background and then return.
It's NOT working when exiting the app by pressing back button. When you launch the app again, the statusbar backgroundColor is suddenly grey (default color).
Is this a known bug or something? I can't figure out how to fix this.
Alright, shortly after submitting the question I found out about another strategy, using imperative API. I avoided it at first since according to official documentation:
For cases where using a component is not ideal, there
is also an imperative API exposed as static functions on the
component. It is however not recommended to use the static API and the
component for the same prop because any value set by the static API
will get overriden by the one set by the component in the next render.
Here is my revised code:
import React, { Component } from 'react';
import { View, StatusBar } from 'react-native';
import { RootNavigator } from './components/Router';
export default class MainApp extends Component {
componentWillMount() {
StatusBar.setBackgroundColor('black');
}
render() {
return (
<View style={{flex: 1}}>
<StatusBar backgroundColor='black' barStyle="light-content"/>
<RootNavigator />
</View>
);
}
}
It seems like this works properly now. When I press the back button and launch the app again the statusbar remains black. I won't declare this as the correct answer just yet in case someone has an explanation why this happens or a better solution.
Edit: This also appears to work only 90% of the time or so. I've noticed, once in a while, when pressing back button and returning the statusbar remained grey. It is absolutely boggling at this point, I suppose componentWillMount isn't always triggered?
Edit2: After switching to componentDidMount instead of componentWillMount as suggested, it seems to be working 100% of the time now.
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Login from './js/components/Login';
import userReducers from './js/reducers/user';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
let store = createStore(combineReducers({userReducers}));
class App extends Component {
render() {
return (
<Login />
);
}
}
export default class Testextends Component {
render() {
return (
<Provider store = {store}>
<App />
</Provider>
// <View>
// <Text>jhdgf</Text>
// </View>
);
}
}
AppRegistry.registerComponent('Test', () => Test);
It gives me following error:
I'm trying one basic example of react-native with redux. If I remove TouchableHighlight also , the error still persists. Any ideas what is wrong here?
Its doesn't seems you're doing something wrong, on the code pasted, are you sure the error came from this part of your code ?
Maybe try to put between () your TouchableHighlight component, but I don't think that's going to change something...
Or try a ternary rather than a binary operation.
Also be sure that you import TouchableHighlight and Text from react-native.
Try to delete all not necessary white space
<View>{ !this.props.user.loggedIn &&
<TouchableHighlight onPress={this.onLoginButtonPress}>
<Text>Login</Text>
</TouchableHighlight>
}</View>
Because in the following example
<View> {...}</View>
you have two children: first white space and second all in curved brackets.
Had the same issue with the following React Native code:
import {Link} from 'react-router-native'
<Link to={props.url}>{props.title}</Link>
Spend few hours trying to understand why the similar code works in WEB but not in native view. There is no viable error messaging or hints from the React Native runtime on which component causes this failure, so it's insanely hard to identify the issue.
Managed to fix this crash by doing the following:
import {Link} from 'react-router-native'
import {Text} from "react-native";
<Link to={props.url}><Text>{props.title}</Text></Link>
Looks like the title text was treated as multiple elements, so we ended up with such an error.
This is not a solution for the subject. But, because there are so many ways to fail with this error in React Native, it may be useful to put this another example of such a crash for those who Googled and ended here.
First off, "export default class Testextends Component" should actually be "export default class Test extends Component"
the reason why that error is thrown is because the Provider component takes only one element.
for Example:
wrong:
<provider store = {store}>
<div/>
<div/>
<provider>
correct:
<provider store = {store}>
<App/>
<provider>
which you did correctly, if you commented the component. Try the class error and see if it works.