In my new react native app, I can't write the following code.
renderContent = () => {
let content = null;
content = <View><Text>HI</Text></View>;
return content;
}
I use this inside the render() like this.
render() {
{this.renderContent}
}
It gives me the following error.
Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.
my RN version is 59. I used this pattern successfully in version 54. What am I doing wrong here?
You have to follow this format:
render(){
return this.renderContent()
}
{something} is for jsx. For example for this:
return(
<View>{something}</View>
)
Related
My lack of success in this problem may be due to a lack of proper terminology when Googling it but nonetheless I am completely stumped. I am passing an onPress function to a custom component in react native. When I pass it by itself as:
export const AddMorePlants = ( onPress ) => {
return (
<TouchableHighlight
onPress={onPress}>
.
.
.
}
I get a this2.props.onPress is not a function error but when I have the exact same code except with the onPress passed within curly braces:
export const AddMorePlants = ({ onPress }) => {
return (
<TouchableHighlight
onPress={onPress}>
.
.
.
}
It Works!
Why does the second one work and not the first?
Sorry for a kind of basic question I just have been really Googling and cant figure it out. Thanks in advance and I can provide any more info if needed.
A functional component in React only has one parameter. The props. You can read more about it here
So what your first attempt at passing the onPress function actually looks like is:
export const AddMorePlants = (props) => {
return (
<TouchableHighlight onPress={props}/>
);
}
When the TouchableOpacity tries to execute the method, it hits the is not a function error because props is an object.
When you do:
export const AddMorePlants = ({onPress}) => {
return (
<TouchableHighlight onPress={onPress}/>
);
}
what you are doing is something called destructuring assignment and it's equivalent of doing:
export const AddMorePlants = (props) => {
const {onPress} = props;
return (
<TouchableHighlight onPress={onPress}/>
);
}
By putting the brackets inside the parentheses you are just doing a shorthand version of this destructuring assignment that we have mentioned.
Here's another version that would also work:
export const AddMorePlants = (props) => {
return (
<TouchableHighlight onPress={props.onPress}/>
);
}
As you can see there are many ways to access an object's property.
The important part is to remember that the props object is the only parameter passed into a functional component.
I hope this helps you understand what's going on there.
In the first function you need to pass only one param i.e onPress to your component while in second you are destructuring assignment so you are doing something like onPress = this.props.onPress and passing an object of params.
In React Native iOS, I would like to slide in and out of a like in the following picture.
So I installed this https://github.com/octopitus/rn-sliding-up-panel for ease.
but this error is showing =>
i cant understand whats wrong, I am new to react native. Please Help!
You cannot access variable called _panel from this object because you are inside a function itself. besides you are using function based react, in order to create a reference check useRef() hook or switch to class based component and then you can use this._panel;
smthg like this:
function AccessingElement() {
const elementRef = useRef();
const onPress = () => {
// e.g
elementRef.current.show();
}
return (
<View ref={elementRef}>
...child views
</View>
);
}
I am trying to adapt the design of my app to tablet and one way to detect if the app is running on a tablet is by using the DeviceInfo module in particular the isTablet() method. How can I use this method to conditionally apply styles to an element?
Here is what I am trying to do at the moment:
import { checkIfDeviceIsTablet } from './helper-functions';
<View style={[styles.wrapper, checkIfDeviceIsTablet() === true ? styles.wrapperTablet : {}]}>
{contents}
</View>
The checkIfDeviceIsTablet() function is as follows:
import DeviceInfo from 'react-native-device-info';
function checkIfDeviceIsTablet() {
DeviceInfo.isTablet().then(isTablet => {
return isTablet;
});
}
The issue is that when the component loads the checkIfDeviceIsTablet() method returns a promise as opposed to the expected true/false value and so the conditional styles are not applied when the app is run on a tablet. I tried turning the function into an async/await format with a try/catch but the result is the same.
I would use React Native's own Platform.isPad function but the app must also work on Android.
Any help is appreciated.
I would recommend calling DeviceInfo.isTablet() only once at the beginning of your app. You can store the result globally, and then later on you can check the type without having to deal with async promises.
To store the type globally, your options are:
A global variable
React's Context API
A static property on a class (if using ES6+)
Some sort of global state management solution like Redux
You still have to deal with the initial async problem, since the first call to DeviceInfo.isTablet() will return an async promise.
I'd recommend looking into React's Context API.
Here's a rough example:
render() {
return (
<DeviceInfoContext.Consumer>
{ ({ isTablet }) => (
<Text>Is this a tablet? {isTablet}</Text>
) }
</DeviceInfoContext.Consumer>
)
}
And your DeviceInfoContext class would look something like this:
class DeviceInfoContext extends React.Component {
state = {
isTablet: false
}
componentDidMount() {
Device.IsTablet().then(result => this.setState({ isTablet: result }))
}
render() {
return (
this.props.children({ isTablet: this.state.isTablet })
)
}
}
This is just a rough example. You can learn more about the Context API in the docs
Me too had some troubles with the breaking changes of react native 0.5xx to 0.6xx. The library for device detection change it structure to promises. A paintful.
This library save the day, the installation and use is very easy.
https://github.com/m0ngr31/react-native-device-detection
import { isTablet } from 'react-native-device-detection;
// isTablet is a boolean. Return false o true immediately
//So ...
import styled from 'styled-components/native';
import theme from 'styled-theming';
import { isTablet } from 'react-native-device-detection';
const CoverPageDateText = styled.Text`
font-size: ${isTablet ? 23 : 17};
color: gray;
padding-bottom: 9;
`
I am stuck with this error:
Cannot add a child that doesn't have a YogaNode to a parent without a measure function!
(Trying to add a 'ReactRawTextShadowNode' to a 'LayoutShadowNode')
The app is on expo and works fine in iOS
but on Android I always get this error when pressing the button for authentication.
Earlier it was working fine, I tried to reset my commits to track the error but for no help.
I think, whenever this function is executed, the error arises:
onButtonPress = async () => {
const { code } = this.props;
await this.props.loginUser({ code });
if (this.props.error) {
await AsyncStorage.removeItem('code');
this.props.navigation.goBack();
} else {
await AsyncStorage.setItem('code', code);
await this.props.orderUpdate();
await this.props.menuFetch();
this.props.navigation.navigate('main');
}
};
Note that the props are accessing redux state and calling redux actions.
This issue having a different reason:
Might be the comments inside the render method of component so try to remove comments inside render method of component component.
Might be because of that you have not closed a tag correctly
Might be using of && operator inside render method so remove '&&'
operator and use ternary operator.
Instead { foobar && <View/> }
Use this { foobar ? <View/> : null }
My android app is loading string data from a js file that is looking like this:
module.exports = {
DATA: {
firstdata: 'data',
seconddata: 'data2'},
};
What I want to do, is change content of this file using text input with
onChangeText={(text) => data.DATA.firstdata.setState({text})}
But it tells me that "undefined is not a function".
These are my first attempts with text inputs. Any help will be appreciated :)
it seems you are trying to implement different concepts. You are trying to change js file using setState function, which is a function provided by react to change data in local component state. So, in your case, data.DATA.firstdata should be just a string, that doesn't know what setState function is. But, according to an error, it seems you are not even importing this DATA variable.
What you can do is set this data to your local state when component is mounted, and then mutate this local state with setState function.
...
import { DATA } from './path/to/the/file'
class MyComponent extends Component {
constructor(props) {
super(props)
this.state = {
firstdata: DATA.firstdata,
seconddata: DATA.seconddata,
};
}
render() {
return (
...
<TextInput onChangeText={(text) => this.setState({firstdata: text})}>
)
}
}