I have used react native router flux, I want to pass the params to another page.
I have two page, home page (list of item) and detail page (detail of item).
I want to passing the item_id to detail page for fetching the data from API.
This is home page code:
import React, { Component } from 'react';
import { Container, Header, Content, List, ListItem, Thumbnail, Text, Left, Body, Right, Button } from 'native-base';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/FontAwesome';
export default class Home extends Component {
render() {
return (
<Container>
<Content>
<List>
<ListItem thumbnail>
<Left>
<Thumbnail square source={require('../img/logo.png')} />
</Left>
<Body>
<Text>code</Text>
<Text note numberOfLines={1}>description</Text>
</Body>
<Right>
<Button transparent>
<Text onPress={() => Actions.detail({ item_id: 1 })}>View</Text>
</Button>
</Right>
</ListItem>
</List>
</Content>
</Container>
);
}
}
And this is Detail page code:
import React, { Component } from 'react';
import { Image, FlatList } from 'react-native';
import { Actions } from 'react-native-router-flux';
import { Container, Header, Content, Accordion, CardItem, Body, Card, Left, Thumbnail, Icon, Text, Button } from "native-base";
import Greeting from '../components/props';
export default class Detail extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
}
}
render() {
return (
<Container>
<Content>
<Text>props: {this.props.item_id}</Text>
</Content>
</Container>
);
}
}
Here , the problem is that I need item_id.
(the detail page and the home page run without error)
Related
I am using base-native (https://docs.nativebase.io/Components.html#toast-def-headref) with this code a toast is generated.
import React, { Component } from 'react';
import { Container, Header, Content, Toast, Button, Text } from 'native-base';
export default class ToastExample extends Component {
render() {
return (
<Container>
<Header />
<Content padder>
<Button onPress={()=> Toast.show({
text: 'Wrong password!',
buttonText: 'Okay'
})}>
<Text>Toast</Text>
</Button>
</Content>
</Container>
);
}
}
I want to call it from anywhere in my code, for example
handlerToast= ()=>{
Toast.show({
text: 'Wrong password!',
buttonText: 'Okay'
})
}
If I put it into a function I get errors,like this:
<Button onPress={()=> this.handlerToast()}
</Button>
what can I do?
As described in native base doc :
For Toast to work, you need to wrap your topmost component inside from native-base.
So, wrap your topmost component with native base <Root> as below :
import { Root } from "native-base";
import { StackNavigator } from "react-navigation";
const AppNavigator = StackNavigator(
{
Page: { screen: Page },
}
);
export default () =>
<Root>
<AppNavigator />
</Root>;
In recent version of native-base NativeBaseProvider
is used instead of Root
import {NativeBaseProvider} from 'native-base';
export default () =>
<NativeBaseProvider>
<App/>
</NativeBaseProvider>;
I have a React component (Highlight.js) that accepts two properties, image and description. The user will swipe through 4 different screens with it's own background image and description, as an introduction to the app.
TestScreen.js is where I've setup the logic for navigating between screens. When i try to set the screen in my AppContainer as the Highlight component, I keep getting the error that 'The component for route 'Page1' must be a React component.
I've tried to play around a lot with the code to see how I can manage to get it working and the only way it does is when I don't mention the image and description properties, in which case neither is displayed and the screen is mostly blank.
Highlight.js
import React, { Component } from 'react';
import { View, Text, Image, ImageBackground } from 'react-native';
import { NextButton } from '../Buttons';
import styles from './styles';
export default class Highlight extends Component {
render() {
return (
<ImageBackground style={styles.container}>
<Image
style={styles.image}
source={this.props.image} // the image goes here
resizeMode="cover"
/>
<View style={styles.textContainer}>
<Text style={styles.text1}>MYAPP</Text>
<Text style={styles.text2}>Highlights</Text>
<Text style={styles.text3}>{this.props.description}</Text> // the description goes here
</View>
<View style={styles.buttonContainer}>
<NextButton />
</View>
</ImageBackground>
);
}
}
TestScreen.js
import React, { Component } from 'react';
import { createAppContainer, createStackNavigator } from 'react-navigation';
import { Highlight } from '../components/Highlights';
export default class TestScreen extends Component {
render() {
return <AppContainer />;
}
}
const AppContainer = createAppContainer(
createStackNavigator({
Page1: {
screen: (
<Highlight
image={require('../components/Highlights/images/highlight1.png')}
description={
'Avoid No-Show of Candidates after setting up an interview'
}
/>
)
}
})
);
I expect the screen to display content with the image and description properties. Currently I have 4 separate components with essentially the same code (except for the image and description). How to I tackle this problem and avoid the repetition of code?
A brief explanation
you're passing an element to the route not a Component itself
() => (<Highlight ... />)
this creates a new function Component which returns your expected element,
that's why it worked
I'm two days trying to make a sidebar work using react native base.
I'm using the example I saw on the react native base website (https://docs.nativebase.io/Components.html#Drawer)
The sidebar is running (it opens). But there's been a kind of modal over the sidebar. The sidebar does not turn white. It gets dark as if it's underneath where it should be.
Look at the two pictures
I do not know what to do. Does anyone have an idea how to make this sidebar menu work? Here's the code I'm using
App.js
import React, { Component } from 'react'
import { Text } from 'react-native'
import { Header, Left, Button, Icon, Right, Body, Title, Drawer } from 'native-base'
import SideBar from './src/components/SideBar'
export default class AppHeader extends Component {
closeDrawer() {
this.drawer._root.close()
}
openDrawer() {
this.drawer._root.open()
}
render() {
return (
<Drawer
ref={(ref) => { this.drawer = ref; }}
content={<SideBar />}
onClose={() => this.closeDrawer()}
>
<Header>
<Left>
<Button transparent onPress={() => this.openDrawer()}>
<Icon name="menu" />
</Button>
</Left>
<Body>
<Title>Title</Title>
</Body>
<Right>
<Button transparent>
<Icon name="bulb" />
</Button>
</Right>
</Header>
</Drawer>
)
}
}
module.exports = AppHeader
SideBar.js
import React, { Component } from 'react';
import { Text } from 'react-native';
import {Content} from 'native-base';
export default class SideBar extends Component {
render() {
return (
<Content style={{backgroundColor:'#FFFFFF'}}>
<Text>Side Bar</Text>
</Content>
);
}
}
module.exports = SideBar;
try to insert the Container Tag inside Sidebar.class:
export default class SideBar extends Component {
render() {
return (
<Container>
<Content style={{backgroundColor:'#FFFFFF'}}>
<Text>Side Bar</Text>
</Content>
</Container>
);
}
}
alternatively you can try to follow (as I did) the structure of NativeBaseKitchenSink: https://github.com/GeekyAnts/NativeBase-KitchenSink
I am very new to react-native and so I am just trying to stumble through user guides and playing around trying to figure things out.
I am having trouble getting a button to show up that I thought I have done correctly. Looking for some suggestions as to why its not appearing.
Logout Button Component:
import React from 'react';
import { Button, Icon } from 'native-base';
// Create our logout button
const LogoutButton = ({ children, buttonStyle, onPress, icon, text }) => {
return (
<Button onPress={onPress} style={buttonStyle}>
<Icon name={icon} />
{text}
</Button>
);
};
export { LogoutButton };
User Panel:
import React, { Component } from 'react';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon, Text } from 'native-base';
import firebase from 'firebase';
import { LogoutButton } from './common';
export default class UserPanel extends Component {
render() {
return (
<Container>
<Header>
<Button transparent>
<Icon name='ios-menu' />
</Button>
<Title>Dashboard</Title>
<LogoutButton text="Logout" icon="ios-home" style={styles.logout} onPress={() => firebase.auth().signOut()} />
</Header>
</Container>
);
}
}
Button should be to the right of "Dashboard".
I am guessing it has something to do with styling?
In the latest NativeBase Header.js Line 77 onwards, type checking will be performed on its children and render only the following components: <Button>, <Title>, <Subtitle>, <InputGroup>.
Even <LogoutButton> is returning <Button> component, it will still be ignored due to its type.
I'm new to react-native, and I'm trying to use a navigator to switch between different scenes. However, when the simulator runs, instead of printing an error, I just got an empty, blank, white screen that shows nothing expect the remaining battery, the time, and the wifi signal. I checked my code many times and cannot find an error. Can someone help me on this?
This is my index.ios.js file:
import React, { Component } from 'react';
import {
AppRegistry,
Text,
View,
Navigator
} from 'react-native';
import Chatroom from './Views/Chatroom';
import Chat from './Views/Chat';
class goals extends Component{
render(){
return(
<Navigator
initialRoute={{screen: 'Chatroom'}}
renderScene={(route, nav) => {return this.renderScene(route.screen)}}
/>
)
}
renderScene(route,nav) {
switch (route.screen) {
case 'Chatroom':
return <Chatroom navigator={nav} />
case 'Chat':
return <Chat navigator={nav} />
}
}
}
AppRegistry.registerComponent('goals', () => goals);
This is my Chat.js file:
import React, { Component } from 'react';
import { View, Text, TouchableHighlight } from 'react-native';
export default class Chat extends Component {
render() {
return (
<View>
<Text>This is chat</Text>
<TouchableHighlight onPress={this.gochatroom.bind(this)}>
<Text>Go to chatroom</Text>
</TouchableHighlight>
</View>
)
}
gochatroom() {
this.props.navigator.push({ screen: 'Chatroom' });
}
}
This is my Chatroom.js file:
import React, { Component } from 'react';
import { View, Text, TouchableHighlight } from 'react-native';
export default class Chatroom extends Component {
render() {
return (
<View>
<Text>This is chatroom</Text>
<TouchableHighlight onPress={this.gochat.bind(this)}>
<Text>Go to chat</Text>
</TouchableHighlight>
</View>
)
}
gochat() {
this.props.navigator.push({ screen: 'Chat' });
}
}
You aren't passing the right arguments to renderScene. The following should work better:
renderScene={(route, nav) => this.renderScene(route, nav)}