I am making a react app using expo and I want to allow children in my TopicSection element. I followed this guide for allowing children in JSX elements and wrote the below code. I have tried using this.props.children but either way it gives me "TypeError: undefined is not an object (evaluating 'props.children')"
import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Ionicons } from '#expo/vector-icons';
import * as WebBrowser from 'expo-web-browser';
import { RectButton, ScrollView } from 'react-native-gesture-handler';
export default function TopicsScreen() {
return (
<ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
<TopicSection
icon="ios-chatboxes"
text="Introduction">
<Text>This is where I want to put elements</Text>
</TopicSection>
</ScrollView>
);
}
function TopicSection({icon, text, props}) {
return (
<View style={styles.TopicSection}>
<View style={styles.TopicSectionContainer && {flexDirection: 'row'}}>
<Ionicons name={icon} size={32} color="rgba(0,0,0,0.35)" />
<Text style={styles.TopicSectionText}>{" " + text}</Text>
</View>
{props.children}
</View>
);
}
You’re destructuring the props object in TopicSection, so by doing ({icon, text, props}), you’re implying there is a prop called props, which there isn’t.
You either need to destructure out children and use it directly, or do ...props, which assigns all the remaining, unspecified props to props.
Related
I have a component like below based on Hooks
import React, { useEffect, useState } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Animated
} from 'react-native';
import CAStyles from '../res/CAStyles';
const CACard = (props ) => (
<TouchableOpacity onPress={props.cardTouched}>
<View style={[styles.cardContainer, CAStyles.ALIGN_CENTER]} width={props.width} height={props.height}>
<Text style={styles.textStyle}>{props.title}</Text>
</View>
</TouchableOpacity>
);
export default CACard
I'd like to have own state values and functions inside the hook. But it is throwing syntax error. I know it is possible with Class based components but not sure why it is not possible with Hooks.
My subsequent attempts to find a solution is futile. Can someone help me out here. Thanks in advance.
Thanks to #JMadelaine for pointing it out. I changed as below and it all works fine.
const CACard = (props ) => {
return (
<TouchableOpacity onPress={props.cardTouched}>
<View style={[styles.cardContainer, CAStyles.ALIGN_CENTER]} width={props.width} height={props.height}>
<Text style={styles.textStyle}>{props.title}</Text>
</View>
</TouchableOpacity>
)
};
As JMadelaine correctly pointed out. You need to write useState inside functional component definition. Restructure your code like this:
import React, { useEffect, useState } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Animated
} from 'react-native';
import CAStyles from '../res/CAStyles';
const CACard = (props) =>{
const [aStateVar, setAStateVar] = useState(false);
return (
<TouchableOpacity onPress={props.cardTouched}>
<View style={[styles.cardContainer, CAStyles.ALIGN_CENTER]} width={props.width} height={props.height}>
<Text style={styles.textStyle}>{props.title}</Text>
</View>
</TouchableOpacity>
);
};
export default CACard;
Im stuck with a Nested Navigation System. I have a main navigator (switchNavigator) and one of its screens is a component witch inside has some views and inside of one of this views I want to put another navigator (switchNavigator), but I get this error "The navigation prop is missing for this navigator. In react-navigation v3 and v4 you must set up your app container directly.". I really don't know if it's posible or a valid implementation.
This is my mainNavigator and two simple components, the second one is where I call the nested navigator:
import React from 'react';
import {createAppContainer,createSwitchNavigator} from 'react-navigation';
import { View, Text } from 'react-native';
import NestedNav from './nestedNav';
const FirstView = props=>{
return(
<View>
<Text>First view</Text>
</View>
)
}
const secondView = props=>{
return(
<View>
<View>
<Text>Second view</Text>
</View>
<View>
<NestedNav></NestedNav>
</View>
<View>
<Text>some other ui content</Text>
</View>
</View>
)
}
const MainNavigator = createSwitchNavigator(
{
firstView:FirstView,
secondView:secondView
},
{
initialRouteName: 'secondView',
}
);
export default createAppContainer(MainNavigator)
And this is my NestedNavigator:
import React from 'react';
import {createAppContainer,createSwitchNavigator} from 'react-navigation';
const NestedNav = createSwitchNavigator(
{
firstView:SomeFirstViewInNestedNav,
secondView:SomesecondViewInNestedNav
},
{
initialRouteName: 'firstView',
}
);
export default NestedNav
as you rendered the nestedNavigator it should be in wrapped into a appContainer.
const NestedNav = createSwitchNavigator(
{
firstView:SomeFirstViewInNestedNav,
secondView:SomesecondViewInNestedNav
},
{
initialRouteName: 'firstView',
}
);
--> export default createAppContainer(NestedNav)
I got the solution, I just had to create a static reference of the nested Navigation's Router in my nested navigator container component (in the example "secondView" component):
static router = NestedNav.router
And set the navigation prop to the nested navigator:
<NestedNav navigation = {this.props.navigation}></NestedNav>
This solution is in the Docs: here
I have initialized a React Native app with the CLI quickstart. The only thing I have edited is that I use CSS Modules for styling the component (note: className in stead of style). I want to typecheck the project with flow and if I run flow it gives the following error.
I Cannot create View element because property className is missing in object type [1] but exists in props [2].
What can I do?
// #flow
import React from "react";
import {
View,
Text
} from "react-native";
import styles from "./base.sass";
const App = () => {
const [title] = React.useState("Hello");
return (
<View className={styles.title}>
<Text>{title}</Text>
</View>
);
};
export default App;
It's not React.js, you can't use like that.
Here is an example.
import React from "react";
import {
View,
Text,
StyleSheet
} from "react-native";
const App = () => {
const [title] = React.useState("Hello");
return (
<View style={styles.title}>
<Text>{title}</Text>
</View>
);
};
const styles = StyleSheet.create({
title: {
justifyContent: 'center',
alignItems: 'center',
}
});
export default App;
The className prop has been removed from View starting from 0.11:
https://github.com/necolas/react-native-web/issues/1146
Please check a version you use!
I'm getting this error although my imports are fine.
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of Weather.
My code looks like this:
App.js
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Weather from './components/Weather';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Weather />
</View>
);
}
}
Weather.js
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Icon } from 'react-native-vector-icons/MaterialCommunityIcons';
export default Weather = () => (
<View style={styles.weatherContainer}>
<View style={styles.headerContainer}>
<Icon size={48} name="weather-sunny" color={'#fff'} />
<Text style={styles.tempText}> Temperature </Text>
</View>
<View style={styles.bodyContainer}>
<Text style={styles.title}>Sunny</Text>
<Text style={styles.subtitle}>Hurts the eyes!</Text>
</View>
</View>
);
I've checked previous answers, tried both with named and default exports, but still having the error. Thanks.
After several hours of banging my head against the wall I managed to debug, the error is related to this import (not the weather import):
import { Icon } from 'react-native-vector-icons/MaterialCommunityIcons';.
This should be a default import like this:
import Icon from ...
I'm using react-native-cli version 2.0.1 and react-native version 0.57.8. I am learning React native, and have encountered an issue when trying to render two different child components (Header and AlbumList) in the main App component.
Issue
The error disappears if I remove the <View> tags and AlbumList component in the index.js file (meaning only show one component). I have looked through threads like this, but am still unable to identify how I'm using the <View> tag incorrectly.
index.js
import React from 'react';
import { View, Text, AppRegistry } from 'react-native';
import Header from './src/components/Header';
import AlbumList from './src/components/AlbumList';
//>Create a component
const App = () => (
<View> <Header headerName={'Albums'} />
<AlbumList />
</View>
);
//>Render component on device
AppRegistry.registerComponent('albums', ()=> App);
AlbumList.js
import React from 'react';
import { View, Text } from 'react-native';
const AlbumList = () => {
return (
<View><Text> Album List </Text></View>
);
};
export default AlbumList;
I think the issue isn't anything to do with the Header.js file, but sharing code nonetheless.
Header.js
import React from 'react';
import { Text, View } from 'react-native'; // The view tag allows us to position and wrap elements
// Make a component
const Header = (props) => {
const { textStyle, viewStyle } = styles;
return (
<View style = {viewStyle}>
<Text style = {textStyle}> {props.headerName}</Text>
</View>
);
};
const styles = {
viewStyle: {
backgroundColor: '#F8F8F8',
alignItems: 'center',
justifyContent: 'center',
height: 60
},
textStyle: {
fontSize: 20
}
};
export default Header;
Help is appreciated. Thanks in advance!
in your index.js file, replace App function with below,
//Create a component
const App = () => (
<View><Header headerName={'Albums'} /><AlbumList /></View>
);
there should be no space between components here
while using react native components, try to put each element in a new line, in this way you don't have to worry about spaces
const App = () => (
<View>
<Header headerName={'Albums'} />
<AlbumList />
</View>
);
Let me know if it works
In my case i had a misplaced semicolon as shown and it was giving me so much headache
<Screen>
<RestaurantScreen />; //Make sure you have no misplaced semicolon like in my case here
</Screen>