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.
Related
Working on React Native application for Android using NativeBase, I'm stuck with a problem. Despite using arrow function, the onClick()-event in my Button component is not firing, and I can't figure out why.
Here is the code:
import React from 'react';
import {View, Text} from 'react-native';
import {withNavigation} from 'react-navigation';
import {Button, Header, Icon, Item, Input} from 'native-base';
let text = '';
class SearchBar extends React.Component {
onButtonClick = () => {
text = 'yes';
};
render() {
return (
<View>
<Header searchBar rounded>
<Item>
<Icon name="ios-search" />
<Input placeholder="Search" />
</Item>
</Header>
<Button onClick={() => this.onButtonClick()}>
<Text>Search</Text>
</Button>
<Text>Is the button clicked? {text}</Text>
</View>
);
}
}
export default withNavigation(SearchBar);
Can you help me? In all other components I implemented the event functionalities exactly like in the example above, and these are working. What is the problem with the above one?
I also tried the Button from React-Native instead of NativeBase - same problem.
it is called "onPress" in react native
refer: https://facebook.github.io/react-native/docs/0.58/button
A react component is only updated when a state changes.
Here, your text variable changes, but your react component doesn't know it has to update.
You should use onPress instead of onClick and do this to trigger a re-render (update a state) :
import React from 'react';
import {View, Text} from 'react-native';
import {withNavigation} from 'react-navigation';
import {Button, Header, Icon, Item, Input} from 'native-base';
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.state = {text: ''};
}
onButtonClick = () => {
this.setState({text: 'yes'});
};
render() {
return (
<View>
<Header searchBar rounded>
<Item>
<Icon name="ios-search" />
<Input placeholder="Search" />
</Item>
</Header>
<Button onPress={() => this.onButtonClick()}>
<Text>Search</Text>
</Button>
<Text>Is the button clicked? {this.state.text}</Text>
</View>
);
}
}
export default withNavigation(SearchBar);
I didn't do a whole a lot of work on react-native to being with but the formik and react-native-elements is not getting anywhere with my setup. I am not really sure what I am missing exactly. Basically, the form cannot be submitted. I have a reusable button and input components made out of react native elements. The form don't get submitted. Out of curiousity, I also tried RN's default button to submit the form but it also doesn't work. My sandbox is here.
My setup is pretty straight forward as you can see below. Any help would be great on what I am missing exactly:
FormInput.js:
import React, { Component } from "react";
import { View, StyleSheet } from "react-native";
import { Input } from "react-native-elements";
export default class FormInput extends Component {
render() {
let { name, ...rest } = this.props;
return (
<>
<View>
<Input name={name} {...rest} />
</View>
</>
);
}
}
FormButton.js
import React, { Component } from "react";
import { Button } from "react-native-elements";
export default class FormButton extends Component {
render() {
let { title, ...rest } = this.props;
return (
<>
<Button title={title} {...rest} onPress={() => this.props.onPress} />
</>
);
}
}
App.js:
import React, { Component, Fragment } from "react";
import { Alert, Button, Image, StyleSheet, Text, View } from "react-native";
import FormInput from "./components/forms/FormInput";
import FormButton from "./components/forms/FormButton";
import * as yup from "yup";
import { Formik } from "formik";
class App extends Component {
handleSubmit = values => {
console.log("submitted values ", values);
};
render() {
return (
<View style={styles.app}>
<Formik
initialValues={{
name: ""
}}
onSubmit={values => {
this.handleSubmit(values);
}}
validationSchema={yup.object().shape({
name: yup
.string()
.min(3)
.max(25)
.required()
})}
>
{({
values,
handleChange,
errors,
setFieldTouched,
touched,
isValid,
handleBlur,
handleSubmit
}) => (
<Fragment>
<FormInput
name="name"
onChangeText={handleChange("name")}
onBlur={handleBlur("name")}
autoFocus
/>
<Button
onPress={() => handleSubmit}
title="React Native Button"
/>
<FormButton
title="React native elements child button"
onPress={() => handleSubmit}
/>
</Fragment>
)}
</Formik>
</View>
);
}
}
export default App;
Can you post the error if exist? And did you make a method for submit button so that it can pass the value ?
In you App.js you're buttons onPress should be like below:
<Button
onPress={handleSubmit}
title="React Native Button"
/>
<FormButton
title="React native elements child button"
onPress={handleSubmit}
/>
Your onPress do not need to be an annonymous function.
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'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 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)