For some strange reason, the header has a height of 667. I have copy pasted the code from an example page. See screenshot:
Code:
import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';
export default class HeaderIconTextExample extends Component {
render() {
return (
<Container>
<Header style={{backgroundColor:'red'}}>
<Left>
<Button transparent>
<Icon style={{color:'white'}} name='menu' />
</Button>
</Left>
<Body>
<Title style={{color:'white'}}>{this.props.headerText}</Title>
</Body>
<Right>
<Button transparent>
<Icon style={{color:'white'}} name='ios-add' />
</Button>
</Right>
</Header>
</Container>
);
}
}
I have tried to apply a height to the container (e.g. 100 pixels) but that does not change anything.
Update
I have realised, that if I remove ScrollView, then the content is in the very top, in front of the header, like this:
Code:
import React, {
Component
} from 'react';
import {
ScrollView, View
} from 'react-native';
import KeyDetail from './KeyDetail'
import axios from 'axios';
class KeyList extends Component {
state = {
keys: []
};
componentWillMount() {
axios.get('https://rallycoding.herokuapp.com/api/music_albums')
.then(response => this.setState({ keys: response.data }));
}
renderKeys() {
return this.state.keys.map(key =>
<KeyDetail thekey={key} key={key.title} />
);
}
render() {
return (
<ScrollView>
{ this.renderKeys() }
</ScrollView>
);
}
}
export default KeyList;
index.ios.js
/**
* Import a library to help create a component
*/
import React from 'react';
import {
AppRegistry,
View
} from 'react-native';
import Header from './src/components/Header';
import KeyList from './src/components/KeyList';
/**
* Create a component
*/
const App = () => (
<View style={{ flex: 1 }}>
<Header headerText={'Your Keys'} />
<KeyList />
</View>
);
/**
* Render to device
*/
AppRegistry.registerComponent('myapp', () => App);
Hmm. The solution (although not as pretty), is to wrap KeyList in index.ios.js inside a View, and then add marginBottom to prevent content from floating inside header.
index.ios.js
/**
* Import a library to help create a component
*/
import React from 'react';
import {
AppRegistry,
View
} from 'react-native';
import Header from './src/components/Header';
import KeyList from './src/components/KeyList';
/**
* Create a component
*/
const App = () => (
<View style={{ flex: 1 }}>
<Header headerText={'Your Keys'} />
<View>
<KeyList />
</View>
</View>
);
/**
* Render to device
*/
AppRegistry.registerComponent('uniqkey', () => App);
Header.js
import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';
export default class HeaderIconTextExample extends Component {
render() {
return (
<Container style={{marginBottom:64}}>
<Header style={{backgroundColor:'red'}}>
<Left>
<Button transparent>
<Icon style={{color:'white'}} name='menu' />
</Button>
</Left>
<Body>
<Title style={{color:'white'}}>{this.props.headerText}</Title>
</Body>
<Right>
<Button transparent>
<Icon style={{color:'white'}} name='ios-add' />
</Button>
</Right>
</Header>
</Container>
);
}
}
In your HeaderIconTextExample component you haven't specify the height for the header. Add this style in HeaderIconTextExample component.
const Styles = StyleSheet.create({
viewStyle: {
backgroundColor: '#F8F8F8',
justifyContent: 'center',
alignItems: 'center',
height: 60,
paddingTop: 15,
},
});
const { viewStyle } = Styles;
Update this line:
<Header style={{backgroundColor:'red'}}>
to this:
<Header style={viewStyle}>
It will work fine.
You can check my complete github repo code of this Albums react native App.
Related
After adding flex : 1, screen turning white screen, when I remove the flex : 1, it shows
what is the problem, I cant find, please reply sooooooon
import React from 'react'
import { View, StyleSheet, ScrollView } from 'react-native'
import { Header } from '../components/home/Header'
import Post from '../components/home/Post'
import Stories from '../components/home/Stories'
import { POSTS } from '../data/posts'
import BottomTabs, { bottomTabIcons } from '../components/home/BottomTabs'
const HomeScreen = () => {
return (
<View style={styles.container}>
<Header />
<Stories />
<ScrollView>
{POSTS.map((post, index) =>(
<Post post={post} key={index} />
))}
</ScrollView>
<BottomTabs icons={bottomTabIcons} />
</View>
)
}
const styles = StyleSheet.create({
container : {
flex : 1,
backgroundColor : 'black',
}
})
export default HomeScreen
I am new to React Native and getting error while trying react navigation.
If I use onPress={()=>this.props.navigation("FoodScreen")}>
Then the error comes "TypeError:this.props.navigation is not a function."
I googled it and found to write onPress={()=>navigate(), which got me this error
Please help in this
This is My App.js
import React,{Component} from 'react';
import {Text,View,ScrollView} from 'react-native';
import { Container,Header,Left,Right,Body } from 'native-base';
import HeaderWnd from './HeaderWnd';
import PromoFoodItem from './PromoFoodItem';
let burgerImage = require('./Images/burger.jpg');
let chickenImage = require('./Images/chicken.jpg');
let pizzaImage = require('./Images/pizza.jpg');
export default class App extends Component
{
render()
{
//const {navigate} = this.props.navigation;
return(
<View>
<HeaderWnd/>
<ScrollView>
<PromoFoodItem navigation={this.props.navigation}
image={burgerImage} text={'BURGER'}/>
<PromoFoodItem image={chickenImage} text={'CHICKEN'}/>
<PromoFoodItem image={pizzaImage} text={'PIZZA'}/>
</ScrollView>
</View>
);
}
}
PromoFoodItem.js
import React,{Component} from 'react';
import {Text,View,Image,TouchableOpacity} from 'react-native';
import { Container,Header,Left,Right,Body } from 'native-base';
import styles from './PromoFoodItemStyle';
import FoodScreen from './FoodSceen';
//let fooditemone = require('./Images/burger.jpg');
export default class PromoFoodItem extends Component
{
render()
{
return(
//<TouchableOpacity onPress={()=>alert(this.props.text)}>
<TouchableOpacity onPress={()=>navigate("FoodScreen")}>
<View style={styles.foodCard} >
<View>
<Image style={styles.PromoImage} source={this.props.image} resizeMode='contain' blurRadius={1.5}/>
</View>
<View style={styles.textView}>
<Text style={styles.foodTitle}>{this.props.text}</Text>
</View>
</View>
</TouchableOpacity>
);
}
}
FoodScreen.js
import React,{Component} from 'react';
import {Text,View,} from 'react-native';
import { Container,Header,Left,Right,Body } from 'native-base';
import styles from './FoodScreenStyle';
import HeaderFood from './HeaderFood';
export default class FoodScreen extends Component
{
render()
{
return(
<View>
<HeaderFood/>
</View>
);
}
}
HeaderFood.js
import React,{Component} from 'react';
import {Text,View} from 'react-native';
import {Container,Header,Left,Right,Body,Button, Icon} from 'native-base';
import styles from './HeaderWndStyle';
export default class HeaderFood extends Component
{
handleClick = () => {
alert('Back Button Pressed!');
}
render()
{
return(
<Container style={styles.headerContainer}>
<Header style={styles.headerStyle}>
<Left style={{flex:1}}>
<Button transparent onPress={this.handleClick}>
<Icon style= {styles.iconStyle} name='md-arrow-back'/>
</Button>
</Left >
<Body style={{flex:1}}>
<Text style={styles.textStyle}>
Foodstagram
</Text>
</Body>
<Right style={{flex:1}}>
<Button transparent onPress={()=> alert("Right button Pressed")}>
<Icon style= {styles.iconStyle} type='FontAwesome' name='shopping-cart'/>
</Button>
</Right>
</Header>
</Container>
);
}
}
I have a <Button /> component and an <Icon/> component.
I try to implement a button with an icon.
The Button.jsx story:
import React from "react";
import { storiesOf } from "#storybook/react";
import Button from "../components/Button";
import Icon from "../components/Icon/Index";
import { iconTypes } from "../components/Icon/Index";
storiesOf("Button/Primary", module)
.add("With icon", () => (
<Button><Icon type={iconTypes.arrowRight}/></Button>
))
That works fine but I would like the api for a Button with an icon to be-
<Button icon={icons.arrow}>Click Me</Button>
How can I achieve that?
The Icon.jsx story:
import React from "react";
import { storiesOf } from "#storybook/react";
import Icon from "../components/Icon/Index";
import { iconTypes } from "../components/Icon/Index";
storiesOf("Icon", module)
.add("Arrow Right", () => (
<Icon type={iconTypes.arrowRight}>
</Icon>
))
.add("Arrow Left", () => (
<Icon type={iconTypes.arrowLeft}>
</Icon>
));
The <Button /> component:
import React from 'react';
import { css, cx } from 'emotion';
import colors from '../styles/colors';
export default function Button({
children,
...props
}) {
const mergedStyles = cx(
// css
);
// other css stuff
return (
<button {...props} disabled={disabled} className={mergedStyles}>
{children}
</button>
);
And <Icon /> component:
import React from "react";
import { css } from 'emotion';
import ArrowRight from "./arrow-right2.svg";
import ArrowLeft from "./arrow-left2.svg";
export const iconTypes = {
arrowRight: 'ARROW_RIGHT',
arrowLeft: 'ARROW_LEFT',
}
const iconSrc = {
ARROW_RIGHT: ArrowRight,
ARROW_LEFT: ArrowLeft,
}
const circleStyles = css({
width: 24,
height: 24,
borderRadius: "50%",
backgroundColor: "#f7f7f9",
display: "flex",
justifyContent: "center"
});
export default function Icon({ type }) {
return (
<div className={circleStyles}>
<img src={iconSrc[type]} />
</div>
)
};
Any help would be appreciated.
import React from 'react';
import {css, cx} from 'emotion';
import colors from '../styles/colors';
//import your ICON component & make sure your path is right
import Icon from "./../Icon";
export default function Button({
children,
disabled,
icon,
...props
}) {
const mergedStyles = cx(//your css);
return (
<button {...props} disabled={disabled} className={mergedStyles}>
// If icon prop is provided then render ICON component
{icon && <Icon type={icon}/>}
//Other children
{children}
</button>
);
}
in render of Button, you can do something like that :
Button.js:
render(){
const { icon } = this.props
return(
<Button>
{icon && <Icon type={icon}/>}
<Button>
)
}
I'm tying to change content of tabs in react-native-material-bottom-navigation but when I press tab it redirect me to respective page. I want to change content between header and tabs. I've tried below code but I don't know how to display content in condition statement.
HomeScreen.js
import React, {Component} from 'react';
import {Text, View } from 'react-native';
import BottomNavigation, { Tab } from 'react-native-material-bottom-navigation';
import Icon from 'react-native-vector-icons/MaterialIcons';
import HomeScreenContent from './HomeScreenContent';
import Categories from './Categories';
import Profile from './Profile';
export default class HomeScreen extends Component {
constructor(props) {
super(props);
this.handleTabChange = this.handleTabChange.bind(this);
this.state = { activeTab: 0 };
}
handleTabChange(newTabIndex, oldTabIndex) {
this.setState({ activeTab: newTabIndex });
if (newTabIndex === oldTabIndex) {
null;
}
if (this.state.activeTab === 0) {
<HomeScreenContent />
} else if (this.state.activeTab === 1) {
<Categories/>
} else {
<Profile />
}
}
render() {
return (
<View style={styles.container}>
<BottomNavigation
activeTab={this.state.activeTab}
labelColor="#5c007a"
rippleColor="white"
style={{
height: 56,
elevation: 8,
position: 'absolute',
left: 0,
bottom: 0,
right: 0
}}
onTabChange={this.handleTabChange}
>
<Tab
barBackgroundColor="#fff"
label="Home"
icon={<Icon size={24} color="#5c007a" name="home" />}
/>
<Tab
barBackgroundColor="#fff"
label="Categories"
icon={<Icon size={24} color="#5c007a" name="list" />}
/>
<Tab
barBackgroundColor="#fff"
label="Profile"
icon={<Icon size={24} color="#5c007a" name="person" />}
/>
</BottomNavigation>
</View>
);
}
}
HomeScreenContent.js
import React from 'react';
import { TouchableOpacity, ScrollView, Image, Dimensions , StyleSheet, Text, View } from 'react-native';
export default class HomeScreenContent extends React.Component {
render() {
return (
<View>
<Text> Hello from HomeScreen</Text>
</View>
);
}
}
Categories.js
import React from 'react';
import { Text, View } from 'react-native';
export default class HomeScreenContent extends React.Component {
render() {
return (
<View>
<Text> Hello from Categories</Text>
</View>
);
}
}
Profile.js
import React from 'react';
import {Text, View } from 'react-native';
export default class HomeScreenContent extends React.Component {
render() {
return (
<View>
<Text> Hello from Profile</Text>
</View>
);
}
}
I have been trying to binds methods to the class with no success. I think am doing everything right, as explained in the documentation. I have also tried other binding plugins but all in vain kindly help.
The weird thing is that, if I bind directly from the render method it works but the moment i try calling a method from another method hell brakes loose.
import React, { Component } from 'react';
import { Navigator, NetInfo, View } from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { ActionCreators } from '../actions';
import _ from 'underscore';
import Api from '../utils/api';
import FooterView from '../components/footer';
import { Container, Content, Icon,
Badge,Footer, FooterTab, Header,
Title, Card, CardItem,Text,
Spinner, List, ListItem, Tabs, Button } from 'native-base';
import theme from '../stylesheets/theme';
import Communications from 'react-native-communications';
function mapStateToProps(state) {
return {
currentUser: state.currentUserReducers,
};
};
function mapDispatchToProps(dispatch) {
return bindActionCreators(ActionCreators, dispatch);
};
class ClientDirectory extends Component {
constructor(props){
super(props);
}
renderCustomers(){
let { currentUser, isLoading } = this.props;
var customers = _.map(currentUser.customers, function(customer){
return(
<Card style={{padding: 1}}>
<CardItem header>
<Text>Shop Name: { customer.name }</Text>
</CardItem>
<CardItem cardBody>
<Text>
Name: { customer.manager_first_name } { customer.manager_last_name }{"\n"}
Region: { customer.region_name }{"\n"}
Landmark: { customer.landmark }{"\n"}
Phone Number: { customer.phone_number }
</Text>
</CardItem>
<CardItem style={{flex:1, alignItems: 'center', justifyContent: 'center', }} header>
<Button transparent style={{ flex:1 }} onPress={ () => Communications.phonecall(customer.phone_number, false)}><Icon name='ios-call' /></Button>
<Button transparent style={{ flex:1 }} onPress={ () => Communications.text(customer.phone_number)}><Icon name='ios-chatboxes'/></Button>
<Button transparent style={{ flex:1 }} onPress={ this.handleMapView.bind(this) }><Icon name='ios-compass' /></Button>
</CardItem>
</Card>
);
});
return customers;
}
handleMapView(){
let { navigator } = this.props;
navigator.push({
name: 'ViewOnMap',
});
}
render(){
return (
<Container>
<Header>
<Button transparent>.</Button>
<Title>Bonus client list</Title>
<Button transparent>
<Icon name='ios-menu' />
</Button>
</Header>
<Content style={{padding: 10, marginBottom:10}}>
{ this.renderCustomers() }
</Content>
</Container>
);
}
};
export default connect(mapStateToProps,mapDispatchToProps)(ClientDirectory);
just to mention, I have tried the below with no luck
http://moduscreate.com/using-es2016-decorators-in-react-native/
https://www.npmjs.com/package/autobind-decorator
Any help will be highly appreciated.
Thanks.
This worked.
var _this = this;
http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/
Move your bindings to the constructor like this:
constructor(props){
super(props);
this.handleMapView = this.handleMapView.bind(this);
}
And then your onPress callback should look like this:
onPress={ this.handleMapView }