This question has been asked but this scenario is different.
The entire error is: Error: The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning. Which is very self explanatory. However it doesn't help me because I don't have an Image component in my code, I've check and nowhere is there an Image component being called.
The error being displayed is saying it's here:
This error is located at:
in NavigationContainer (at App.js:25)
in App (at withExpoRoot.js:22)
Here is my code for App.js
import React from 'react';
import Expo from "expo";
import { AppLoading } from "expo";
import HomeScreen from "./src/HomeScreen/index.js";
export default class App extends React.Component {
constructor() {
super();
this.state = {
isReady: false
};
}
async componentWillMount() {
// await Expo.Font.loadAsync({
// Roboto: require("native-base/Fonts/Roboto.ttf"),
// Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
// Ionicons: require("native-base/Fonts/Ionicons.ttf")
// });
this.setState({ isReady: true });
}
render() {
if (!this.state.isReady) {
return <AppLoading />;
}
return <HomeScreen />;
}
}
HomeScreen.js
import React from "react";
import { StatusBar } from "react-native";
import { Container, Header, Title, Left, Icon, Right, Button, Body, Content, Text, Card, CardItem } from "native-base";
export default class HomeScreen extends React.Component {
render() {
return (
<Container>
<Header>
<Left>
<Button
transparent
onPress={() => this.props.navigation.navigate("DrawerOpen")}>
<Icon name="menu" />
</Button>
</Left>
<Body>
<Title>HomeScreen</Title>
</Body>
<Right />
</Header>
<Content padder>
<Card>
<CardItem>
<Body>
<Text>Chat App to talk someawesome people</Text>
</Body>
</CardItem>
</Card>
<Button full rounded dark
style={{ marginTop: 10 }}
onPress={() => this.props.navigation.navigate("Chat")}>
<Text>Chat With People</Text>
</Button>
<Button full rounded primary
style={{ marginTop: 10 }}
onPress={() => this.props.navigation.navigate("Profile")}>
<Text>Goto Profiles</Text>
</Button>
</Content>
</Container>
);
}
}
As you can see nowhere here are we calling an Component which is the part I can't figure out. Any ideas?
Ok I'm answering my own question for someone else who might encounter.
React Native gives the error that
This error is located at:
in NavigationContainer (at App.js:25)
in App (at withExpoRoot.js:22)
However this error is located in a file that is in a subcomponent in my case:
Sidebar.js
return (
<Container>
<Content>
<Image
source={{
uri: "https://github.com/GeekyAnts/NativeBase-KitchenSink/raw/react-navigation/img/drawer-cover.png"
}}
style={{
height: 120,
alignSelf: "stretch",
justifyContent: "center",
alignItems: "center"
}}>
<Image
square
style={{ height: 80, width: 70 }}
source={{
uri: "https://github.com/GeekyAnts/NativeBase-KitchenSink/raw/react-navigation/img/drawer-cover.png"
}}
/>
</Image>
<List
dataArray={routes}
renderRow={data => {
return (
<ListItem
button
onPress={() => this.props.navigation.navigate(data)}>
<Text>{data}</Text>
</ListItem>
);
}}
/>
</Content>
</Container>
);
I then changed <Image> to <ImageBackground> and it works.
Related
i have this error last days and still couldnt find the solution.error code ise here.
Element type is invalid: expected a string (for built in components) or class/function (for composite components) but got: undenifed.You likely forgot to export your component from the file its defined in, or you might have mixed up default or named imports.
Check the render of method of 'cellRenderer'
i updated React for last version. but still error is continue.NPM versiyon ise 6.13.1. i think error is very small but i cant see it.thanks for your helps.
here is my codes;
dataItem.js
import React, {Component} from 'react';
import {Body, Button, Left, ListItem, Right, Text, Thumbnail} from 'native-base';
class DataItem extends Component {
constructor(props) {
super(props);
this.data = props.data;
}
render() {
return (
<ListItem thumbnail>
<Left>
<Thumbnail
square
source={{
uri:
this.data.urlToImage != null
? this.data.urlToImage
: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWBAMAAADOL2zRAAAAG1BMVEXMzMyWlpajo6PFxcW3t7ecnJyqqqq+vr6xsbGXmO98AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABPUlEQVRoge3Tv0/CQBjG8YcWaMcebymOENLI2MZoHMHEvVUKjq1K4lhM2Kvxx7/tUUiamDhc6GSez8INzbf3HleAiIiIiIiIiIiIiNozAGzvuJYTW2reXmso7bX8YN96HUR1a7RZ6+VVOgU+p4LuZGrSkqK0PWfwfl+3ht/hcpdvPkJ0g0fBYpYZtS7HttfPMatbAbZzJ1kjjnqVK1ihNzdpdX3b65S4qVsjXbG9EtuoEzliC/RbDFoIL7wY2NZrQayPzw1VpH/FUUqNjVrx0+9W8Rzrlt7yMMvMWq7fzHhoCTp6Rr0vw0uiH8+as69bov/AyNqf/Rms3Ky1aO7EYV93X2nlBIXg7WVSmrWs5q4eWrvVdYLbpR4/PTeZ8S9O82mdzMr7SVstV6mqrRaKh9ZSRERERERERET0n/wAZwMqI9kyPcoAAAAASUVORK5CYII=',
}}
/>
</Left>
<Body>
<Text numberOfLines={2}>{this.data.title}</Text>
<Text note numberOfLines={2}>
{this.data.description}
</Text>
</Body>
<Right>
<Button transparent>
<Text>OKU</Text>
</Button>
</Right>
</ListItem>
);
}
}
export default DataItem ;
tab1.js
import React, {Component} from 'react';
import {Alert, View, ActivityIndicator} from 'react-native';
import { Container, Content, List, Text } from 'native-base';
import {DataItem} from '../../component/dataItem';
import {getArticles} from '../../service/news';
export default class ListThumbnailExample extends Component {
constructor(props) {
super(props);
this.state= {
isLoading: true,
data: null
}
}
componentDidMount() {
getArticles().then(data => {
this.setState({
isLoading: false,
data: data
});
}
)
}
render() {
console.log(this.state.data);
let view = this.state.isLoading ? (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<ActivityIndicator animating={this.state.isLoading} color="#00f0ff" />
<Text style={{marginTop: 10}} children="Please Wait.." />
</View>
) : (
<List
dataArray={this.state.data}
renderRow={(item) => {
return (
<DataItem onPress={this.handleItemDataOnPress} data={item} />
)
}} />
)
return (
<Container>
<Content>
<List
dataArray={this.state.data}
renderRow={(item) => {
return <DataItem data={item}/>
}}
/>
</Content>
</Container>
);
}
}
Below is the code for a Header which I've defined in a common.js file:
class HeaderStyle extends Component {
render() {
return (
<Header style={{ elevation: 5 }}>
<Left style={{ flex: 1 }}>
<Icon name="md-menu" size={30} onPress={() => this.props.navigation.openDrawer()} />
</Left>
<Body style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Image style={{ width: 80, height: 45, }} source={require('./resources/hr-pro-logo.png')} />
</Body>
<Right style={{ flex: 1 }}>
<Icon name="md-search" size={30} onPress={() => alert('hi there')} />
</Right>
</Header>
);
}
}
And here is the code for my DashboardScreen.js:
export default class DashboardScreen extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<HeaderStyle /> // This is where I'm using the Header imported from common.js
<View>
<FlatList
// Code to populate my list
/>
</View>
</View>
);
}
I've been able to import the Header in my Dashboard, but when I click on the menu icon onPress={() => this.props.navigation.openDrawer()} it throws the error undefined is not an object (evaluating '_this.props.navigation.openDrawer')
Appreciate it if anyone can assist me with this issue, I'd like to be able to open the drawer on clicking the menu icon.
FYI - When I used the Header code directly in my Dashboard, the app ran smoothly with no errors. But since there are multiple screens where I want to use the Header, I need to keep it in a common place to avoid repetition of coding.
You must pass the navigation prop to your component:
<HeaderStyle navgation={this.props.navigation} />
Or, you could use the withNavigation function from react-navigation:
import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';
class MyBackButton extends React.Component {
render() {
return (
//you Header render
);
}
}
// withNavigation returns a component that wraps MyBackButton and passes in the
// navigation prop
export default withNavigation(MyBackButton);
The documentation is here
I'm new to React and was wondering if anyone could assist me. I'm trying to create a card list. I have done this part however I'm showing an image inside my card which does not render properly. The entire card becomes 1/12 of a row size. If I remove the List part then card renders properly.
Below is my Code:
import React, { Component } from "react";
import { Image } from "react-native";
import {
Container,
Header,
Title,
Content,
Text,
Button,
Icon,
FooterTab,
Left,
Right,
Card,
CardItem,
Thumbnail,
ListItem,
List,
Body
} from "native-base";
import styles from "./styles";
const datas = [
{
route: "Header1",
text: "Only Title",
restImage: require("../../../assets/restaurants/Mc.png")
},
{
route: "Header2",
text: "Icon Buttons",
restImage: require("../../../assets/restaurants/Mc.png")
}
];
const logo = require("../../../assets/logo.png");
//const cardImage = require("../../../assets/Mc.png");
//const cardImage2 = require("../../../assets/NY.png");
class Anatomy extends Component {
render() {
return (
<Container style={styles.container}>
<Header
style={{ backgroundColor: "#FFAB00" }}
androidStatusBarColor="#FF8F00"
iosBarStyle="light-content"
>
<Left>
<Button
transparent
onPress={() => this.props.navigation.navigate("DrawerOpen")}
>
<Icon name="ios-menu" />
</Button>
</Left>
<Body>
<Title>Rests</Title>
</Body>
<Right />
</Header>
<Content padder>
<List
dataArray={datas}
renderRow={data =>
<ListItem>
<Card style={styles.mb}>
<CardItem cardBody>
<Image
style={{
resizeMode: "cover",
width: null,
height: 200,
flex: 1
}}
source={data.restImage}
/>
</CardItem>
<CardItem style={{ paddingVertical: 0 }}>
<Left>
<Button transparent>
<Icon active name="thumbs-up" />
<Text>4923 Likes</Text>
</Button>
</Left>
<Body>
<Button transparent>
<Icon active name="chatbubbles" />
<Text>89 Comments</Text>
</Button>
</Body>
<Right>
<Text
button
onPress={() => this.props.navigation.navigate(data.route)}
>2KM away</Text>
</Right>
</CardItem>
</Card>
</ListItem>
}
/>
</Content>
</Container>
);
}
}
export default Anatomy;
I managed to resolve it. Did some research and just added below style to card.
<Card style={{ flex: 1 }}>
This resolved the rendering problem for me.
i got a little problem with Header component in NativeBase (UI Component for React Native). Its position should be on top. But, mine is below a white block. I don't know why its there.
Here my code
import React, { Component } from 'react';
import { Image } from 'react-native';
import {
Container,
Header,
Left,
Body,
Right,
Title,
Content,
Footer,
FooterTab,
Button,
Icon,
Text,
List,
ListItem,
Switch,
Item,
Input,
Form,
DeckSwiper,
Card,
CardItem,
Thumbnail,
View
} from 'native-base';
import { Col, Row, Grid } from "react-native-easy-grid";
import { StackNavigator } from 'react-navigation';
import Expo from "expo";
import { cards, groups_category } from '../data/dummies';
class HomeScreen extends Component {
constructor (props) {
super(props);
this.state = {
loading: true,
isUserLogin: false,
searchStatus: false
}
this.showSearch = this.showSearch.bind(this);
this.checkLoginStatus = this.checkLoginStatus.bind(this);
}
async componentWillMount() {
await Expo.Font.loadAsync({
'Roboto': require('native-base/Fonts/Roboto.ttf'),
'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
'Ionicons': require("#expo/vector-icons/fonts/Ionicons.ttf")
});
this.setState({ loading: false });
}
showSearch () {
this.setState({ searchStatus: !this.state.searchStatus });
}
checkLoginStatus () {
if (!this.state.isUserLogin) {
return this.props.navigation.navigate('Login');
} else {
return
}
}
render() {
if (this.state.loading) {
return <Expo.AppLoading />;
}
return (
<Container>
{ this.state.searchStatus &&
(<Header searchBar rounded>
<Item regular>
<Icon name='md-arrow-back' onPress={this.showSearch} />
<Input placeholder='Contoh: Jakarta Memancing'/>
<Icon name='search' />
</Item>
</Header>)
}
{ !this.state.searchStatus &&
(<Header>
<Left>
<Icon name='add' style={{color: '#FFFFFF'}} />
</Left>
<Body style={{ alignItems: 'center' }}>
<Title>Komunitas</Title>
</Body>
<Right>
<Icon name='search' style={{color: '#FFFFFF'}} onPress={this.showSearch} />
</Right>
</Header>)
}
{/* Content */}
<Content padder={true}>
<View style={{height: 470}}>
<DeckSwiper
dataSource={cards}
renderItem={item =>
<Card style={{ elevation: 3 }}>
<CardItem>
<Left>
<Thumbnail source={item.image} />
<Body>
<Text>{item.text}</Text>
<Text note>NativeBase</Text>
</Body>
</Left>
</CardItem>
<CardItem cardBody>
<Image style={{ height: 300, flex: 1 }} source={item.image} />
</CardItem>
<CardItem>
<Icon name="heart" style={{ color: '#ED4A6A' }} />
<Text>{item.name}</Text>
</CardItem>
</Card>
}
/>
</View>
<List>
<ListItem itemHeader first>
<Text>Kategori Grup</Text>
</ListItem>
{groups_category.map(group => {
return (<ListItem key={group.id}>
<Left>
<Icon name={group.icon}/>
</Left>
<Body>
<Text>{group.name}</Text>
</Body>
<Right />
</ListItem>)
}
)}
</List>
</Content>
{/* Content */}
<Footer>
<FooterTab>
<Button vertical active>
<Icon active name="home" />
<Text style={{fontSize: 9.5}}>Home</Text>
</Button>
<Button vertical>
<Icon name="megaphone" />
<Text style={{fontSize: 9.5}}>Baru</Text>
</Button>
<Button vertical>
<Icon name="notifications" />
<Text style={{fontSize: 9.5}}>Notifikasi</Text>
</Button>
<Button onPress={this.checkLoginStatus} vertical>
<Icon name="person" />
<Text style={{fontSize: 9.5}}>Profil</Text>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
}
export default HomeScreen;
It results like this
As you can see the Header which has search icon is located below an empty space / white color. Why this happen ? Maybe there are a lot of friends here had experienced it before when using NativeBase UI Component.
It's because you are using StackNavigator as well. You can disable the header as below.
static navigationOptions = {
headerMode: 'none'
}
UPDATE for React Navigation 5.x
If you want to use Nativebase's header with react navigation 5, you can do it like this:
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import {
Header,
Left,
Body,
Title,
Button,
Icon,
View,
Text
} from 'native-base';
const Stack = createStackNavigator();
const Home = () => {
return (
<View>
<Text>Hello World</Text>
</View>
)
}
const CustomHeader = ({scene, previous, navigation}) => {
const {options} = scene.descriptor;
const title =
options.headerTitle !== undefined
? options.headerTitle
: options.title !== undefined
? options.title
: scene.route.name;
return (
<Header>
<Left>
{previous ? (
<Button transparent onPress={navigation.goBack}>
<Icon name="arrow-back" />
</Button>
) : (
undefined
)}
</Left>
<Body>
<Title>{title}</Title>
</Body>
</Header>
);
};
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={Home}
options={{
header: (props) => <CustomHeader {...props} />,
}}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
More of the options here https://reactnavigation.org/docs/en/stack-navigator.html
Set header null in navigation option to remove top blank space, like below
export default class Home extends React.Component {
static navigationOptions = {
title: 'Home',
header: null //used for removing blank space from top
};
}
Native Base docs only shows how to change background color, text color and font size. But it seems not possible to add icons to tabs.
Is it possible or I will need to fork and implement myself?
Thank you.
With NativeBase 2.0 and above you can add icons to Tabs using TabHeading tags inside heading property.
<Content>
<Tabs>
<Tab heading={<TabHeading><Icon name='settings'/></TabHeading>}>
<Tab heading={<TabHeading><Icon name='home'/></TabHeading>}>
</Tabs>
</Content>
You need to implement yourself. I have implemented this functionality. Please have a look if that would be help you.
Create tabs.js
import React from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,RefreshControl
} from 'react-native';
import IconTabs from 'react-native-vector-icons/Ionicons';
import NavigationBar from 'react-native-navbar';
import { Container, Header, Title, Button,Icon } from 'native-base';
const Tabs = React.createClass({
tabIcons: [],
propTypes: {
goToPage: React.PropTypes.func,
activeTab: React.PropTypes.number,
tabs: React.PropTypes.array,
},
componentDidMount() {
this._listener = this.props.scrollValue.addListener(this.setAnimationValue);
},
setAnimationValue({ value, }) {
this.tabIcons.forEach((icon, i) => {
const progress = (value - i >= 0 && value - i <= 1) ? value - i : 1;
});
},
render() {
return (
<View>
<View style={[styles.tabs, this.props.style, ]}>
{this.props.tabs.map((tab, i,) => {
return <TouchableOpacity key={tab} onPress={() => this.props.goToPage(i)} style={styles.tab}>
<IconTabs
name={tab}
size={20}
color={this.props.activeTab === i ? 'rgb(255,255,255)' : 'rgb(189, 224, 250)'}
ref={(icon) => { this.tabIcons[i] = icon; }}
/>
<Text style={{fontWeight:'bold', fontSize:10, color:this.props.activeTab === i ? 'rgb(255,255,255)' : 'rgb(189, 224, 250)'}}>{`${this.props.name[i]}`}</Text>
</TouchableOpacity>;
})}
</View>
</View>
);
},
});
const styles = StyleSheet.create({
tab: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingBottom: 10,
},
tabs: {
height: 50,
flexDirection: 'row',
paddingTop: 5,
borderWidth: 0,
borderTopWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 0,
backgroundColor: '#2196F3',
},
});
export default Tabs;
And use this component in your view like following.
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
ScrollView,Navigator
} from 'react-native';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import Tabs from './tabs';
export default class LeavesTab extends Component{
constructor(props) {
super(props);
}
_navigate(name) {
this.props.navigator.push({
name: name,
passProps: {
name: name
}
})
}
render() {
let Tabname = ["Tab1","Tab2","Tab3","Tab4"];
return (
<ScrollableTabView
initialPage={this.props.index}
renderTabBar={() => <Tabs name={Tabname} navigator={this.props.navigator} showHeader={true} />}
>
<ScrollView tabLabel="md-calendar">
<Requests tabLabel='Requests' navigator={this.props.navigator} />
</ScrollView>
<ScrollView tabLabel="md-checkbox">
<LeaveList tabLabel='Approved' navigator={this.props.navigator} />
</ScrollView>
<ScrollView tabLabel="md-time">
<LeaveList tabLabel='Pending' navigator={this.props.navigator} />
</ScrollView>
<ScrollView tabLabel="md-close-circle">
<LeaveList tabLabel='Rejected' navigator={this.props.navigator} />
</ScrollView>
</ScrollableTabView>
);
}
}
const styles = StyleSheet.create({
});
Santosh's answer is right, but I found a cleaner way to implement this based on Native Base tabs.
A rendering tab component is necessary, like in Santosh's example.
But in the component, instead of using the ScrollableTabView, I can use React Native's Tabs component. An example:
export default class App extends Component {
render() {
return (
<Container>
<Header>
<Title>Header</Title>
</Header>
<Content>
<Tabs renderTabBar={() => <TabBar />}>
<One tabLabel="video-camera" />
<Two tabLabel="users" />
</Tabs>
</Content>
<Footer>
<FooterTab>
<Button transparent>
<Icon name="ios-call" />
</Button>
</FooterTab>
</Footer>
</Container>
);
}
}
EDIT
#KumarSanketSahu said that version 2.0 is comming with the ability of changing icons in the tabs. My answer above is for version 0.5.x.