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>;
Related
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'm trying to use a function from my Main component in my details component which I user react navigation to navigate to and I want to save some changes in detail screen in my main component
//Main.js
import React from 'react';
import {
StyleSheet ,
Text,
View,
TextInput,
ScrollView,
TouchableOpacity,
KeyboardAvoidingView,
AsyncStorage
} from 'react-native'
import Note from './Note'
import { createStackNavigator, createAppContainer } from "react-navigation";
import Details from './Details';
export default class Main extends React.Component {
static navigationOptions = {
title: 'To do list',
headerStyle: {
backgroundColor: '#f4511e',
},
};
constructor(props){
super(props);
this.state = {
noteArray: [],
noteText: ''
};
}
render() {
let notes = this.state.noteArray.map((val,key) => {
return <Note key={key} keyval={key} val={val}
goToDetailPage= {() => this.goToNoteDetail(key)}
/>
});
const { navigation } = this.props;
return(
<View style={styles.container}>
<ScrollView style={styles.scrollContainer}>
{notes}
</ScrollView>
<Details saveEdit={this.saveEdit} />
</View>
);
}
goToNoteDetail=(key)=>{
this.props.navigation.navigate('DetailsScreen', {
selectedTask: this.state.noteArray[key],
saveEdit: this.saveEdit
});
}
saveEdit = (editedTask,dueDate) => {
this.state.noteArray.push({
'creationDate': editedTask['creationDate'],
'taskName': editedTask['taskName'],
'dueDate': dueDate
});
this.setState({noteArray:this.state.noteArray})
this.saveUserTasks(this.state.noteArray)
}
this.setState({noteArray:this.state.noteArray})
this.saveUserTasks(this.state.noteArray)
}
}
Then I try to use it as prop in my Detail.js
import React from 'react';
import {
StyleSheet ,
Text,
View,
TextInput,
Button,
TouchableOpacity,
} from 'react-native'
import { createStackNavigator, createAppContainer } from "react-navigation";
export default class Details extends React.Component {
constructor(props){
super(props);
this.state = {
dueDate = ''
}
}
static navigationOptions = {
headerStyle: {
backgroundColor: '#f4511e',
},
};
componentDidMount = () => {
this.getUserTasks()
}
render() {
const { navigation } = this.props;
const selectedTask = navigation.getParam('selectedTask', 'task');
var { saveEdit} = this.props;
return(
<View key={this.props.keyval} style={styles.container}>
<View style = { styles.info}>
<Text style= {styles.labelStyle}> Due date:
</Text>
<TextInput
onChangeText={(dueData) => this.setState({dueData})}
style={styles.textInput}
placeholder= {selectedTask['dueDate']}
placeholderTextColor='gray'
underlineColorAndroid = 'transparent'
>
</TextInput>
</View>
<TouchableOpacity onPress={this.props.saveEdit(selectedTask, this.state.dueDate)} style={styles.saveButton}>
<Text style={styles.saveButtonText}> save </Text>
</TouchableOpacity>
</View>
);
}
}
I searched a lot to find the solution and I tried many of them but get different undefined errors. This is not what I did in the first place but when I search I found this solution here. And I know it causes lots of issues.
I want to know how can I manage to access to main method from details and pass parameters to it or how can I manage to use main props in my details component
If you are using react-navigation 5, params is no longer under the navigation object but under route object. This is the link to the sample code:
https://reactnavigation.org/docs/params
Solution
<Details saveEdit={this.saveEdit} />
to
<Details navigation={this.props.navigation} saveEdit={this.saveEdit} />
render() {
return(
<View style={styles.container}>
<ScrollView style={styles.scrollContainer}>
{notes}
</ScrollView>
<Details navigation={this.props.navigation} saveEdit={this.saveEdit} />
</View>
);
}
Why?
You are using your Details component in Main screen. So you need to give navigation to Details's props from your Main to use navigation props in Details component.
Because your Details component is not the screen component registered in your navigator(router).
I tried to run your code on my machine but it seems you have too many syntax error in your code (maybe because of copy pasta?)
but it seems you should change
<TouchableOpacity onPress={this.props.saveEdit(selectedTask, this.state.dueDate)}
in Detals.js to
<TouchableOpacity onPress={this.props.navigation.getParams('saveEdit')(selectedTask, this.state.dueDate)}
for clarification this worked for me
in MainPage.js
_test(){
console.log('test');
}
.
.
.
<ActionButton
buttonColor="rgba(231,76,60,1)"
onPress={() => NavigationService.navigate('AddNewSession', {test: this._test})}>
</ActionButton>
and in AddNewSession.js
componentDidMount()
let test = this.props.navigation.getParam('test');
test();
}
There are many mistakes within your codes. First of all you are importing the navigation build-in function {createStackNavigator} in all your files, Main.js and Details.js :
import { createStackNavigator, createAppContainer } from
"react-navigation";
That make me think that you didn't know how the stack navigation or navigation in general functions in react native. You should have a file that handles your routes configuration, let call it MyNavigation.js and then define the routes 'Main' and 'details' in MyNavigations,js. It's only inside MyNavigation.js that you can import "createStackNavigator". Then you will define your functions to move between the screens "Main" and "detail". Those functions will be passed as props to the routes when moving between one another. The overall action wihtin MyNavigation.js will look like:
import React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
import Main from './Main';
import Detail from './Detail';
const Stack = createStackNavigator();
function goToDetailFromMainScreen(){
return(this.props.navigation.navigate('switch2'));
}
function DetailSaves(){
return(//your code here to save details);
}
//Here you pass the functions to Main Component to handele Detail componets
's actions
function switch1(){
return(<Main GoToDetails={() => this.goTodetailFromMainScreen()} paramsForDetailActions={() => this.detailSaves()} />)
}
function switch2(){
return(<Details />)
}
export default function MyNavigation() {
return(
<NavigationContainer>
<Stack.Navigator initialRouteName='switch1'>
<Stack.Screen name='switch1' options={{header:()=>null}} component={Main} />
<Stack.Screen name='switch2' options={{headerTitle:"Detail"}} component={Detail} />
</Stack.Navigator>
</NavigationContainer>
)
}
Now inside Main.js you check the props functions passed to it from MyNavigation.js:
// Main.js
constructor(props){
super(props);
}
goToDetails = () => {
this.props.onPress?.();
}
paramsForDetailActions= () => {
this.props.onPress?.();
}
I'm new programing with React Native and I got this issue with my code, I'm try to do a Splash screen and after that I want to make a Login that redirect me to another screen.
The Splash screen run well but when I'm in the Login Screen and I push the "Entrar" button, it crashes and shows the message.
`
import React from 'react';
import { Image, Text, View } from 'react-native';
import { Asset, SplashScreen } from 'expo';
import Splash from './screens/Splash';
import Login from './screens/Login';
import ForgotPass from './screens/ForgotPass';
import Home from './screens/Home';
App.js
export default class App extends React.Component
{
componentWillMount()
{
this.setState({
view: <Splash />
})
setTimeout(() => {
this.setState({
view: <Login />
})
}, 3000)
}
render()
{
return(
this.state.view
)
}
}
////////////////////////////////////////////////////////////
Login.js
import React from 'react';
import { View, BackHandler } from 'react-native';
import { Card, Button, FormLabel, Text, FormInput } from 'react-native-elements';
import { createStackNavigator, navigate } from 'react-navigation';
export default class Login extends React.Component
{
static navigationOptions = {
title: 'Iniciar sesión',
headerLeft: null,
}
componentDidMount()
{
BackHandler.addEventListener('hardwareBackPress', function()
{
return true;
});
}
render()
{
return (
<View style={{ paddingVertical: 20 }}>
<Card>
<FormLabel>Nombre de Usuario</FormLabel>
<FormInput placeholder='NombreUsuario' />
<FormLabel>Contraseña</FormLabel>
<FormInput secureTextEntry placeholder='Contraseña' />
<Button
buttonStyle={{ marginTop: 20 }}
backgroundColor='#03A9F4'
title='Entrar'
onPress={() => this.props.navigation.navigate('Home')}
/>
</Card>
<View style={{ paddingVertical: 20 }}>
<Button
title="¿Olvidó su contraseña?"
onPress={() => this.props.navigation.navigate('ForgotPass')}
/>
</View>
</View>
);
}
}`
you have to pass navigation props in App.js file
componentWillMount()
{
this.setState({
view: <Splash />
})
setTimeout(() => {
this.setState({
view: <Login navigation={this.props.navigation} />
})
}, 3000)
}
or you can use withNavigation in Login.js file
import { withNavigation } from 'react-navigation';
export Default withNavigation(Login);
https://reactnavigation.org/docs/en/with-navigation.html this link will help you to learn more about withNavigation in react navigation
recently started working on an app using https://github.com/start-react/native-starter-kit
Heres my component:
import React, { Component } from "react";
import { TouchableOpacity } from "react-native";
import { connect } from "react-redux";
import BlankPage2 from "../blankPage2";
import DrawBar from "../drawBar";
import TopNav from "../topNav";
import { DrawerNavigator, NavigationActions } from "react-navigation";
import {
Container,
Header,
Title,
Content,
Text,
Button,
Icon,
Left,
Body,
Right,
Image,
} from "native-base";
import { Grid, Row } from "react-native-easy-grid";
import { setIndex } from "../../actions/list";
import { openDrawer } from "../../actions/drawer";
import styles from "./styles";
class News extends Component {
static navigationOptions = {
header: null
};
render() {
return (
<Container style={styles.container}>
<Header>
<Left>
<Button
transparent
onPress={() => DrawerNav.navigate("DrawerOpen")}>
<Icon active name="menu" />
</Button>
</Left>
<Body>
<Title>News</Title>
</Body>
<Right>
</Right>
</Header>
<Content scrollEnabled={false}>
<TopNav navigation={this.props.navigation}></TopNav>
<Grid style={styles.mt}>
{this.props.list.map((item, i) => (
<Row key={i}>
<TouchableOpacity
style={styles.row}
onPress={() =>
this.props.navigation.navigate("BlankPage", {
name: { item }
})}>
<Image source={{uri: 'https://i.vimeocdn.com/portrait/58832_300x300.jpg'}} />
<Text style={styles.text}>{item}</Text>
</TouchableOpacity>
</Row>
))}
</Grid>
</Content>
</Container>
);
}
}
function bindAction(dispatch) {
return {
setIndex: index => dispatch(setIndex(index)),
openDrawer: () => dispatch(openDrawer())
};
}
const mapStateToProps = state => ({
name: state.user.name,
list: state.list.list
});
const NewsSwagger = connect(mapStateToProps, bindAction)(News);
const DrawNav = DrawerNavigator(
{
News: { screen: NewsSwagger },
BlankPage2: { screen: BlankPage2 }
},
{
contentComponent: props => <DrawBar {...props} />
}
);
const DrawerNav = null;
DrawNav.navigationOptions = ({ navigation }) => {
DrawerNav = navigation;
return {
header: null
};
};
export default DrawNav;
And of course, heres my error:
And i have no clue why this is happening. As soon as i remove the Image tag, error goes away. I can't really export the News Component, becouse i am using the Drawer thingy(check starter-kit-demo).
Edit: Error happens on IOS. Iphone 6 emulator.
You are importing Image from native-base when you should be importing it from react-native
import {
Container,
Header,
Title,
Content,
Text,
Button,
Icon,
Left,
Body,
Right,
Image // remove this one
} from "native-base";
And add
import {
TouchableOpacity,
Image
} from "react-native";
Also you'll have to add a height & width for a proper render.
<Image
style={{width: 300, height: 300}}
source={{uri: 'https://i.vimeocdn.com/portrait/58832_300x300.jpg'}}
/>
I'm using react navigation for my app development. When i run log-android, it keeps logging something like this.
Navigation Dispatch: Action: {...}, New State: {...}
which is from createNavigationContainer.js line 150.
I've run through github and document said it could be done by by setting onNavigationStateChange={null} on a top-level navigator.
How can i achieve this by setting onNavigationStateChange={null} and where should i set it?
I've try to set like below, but it the page will not be able to redirect to other page.
export default () => {
<App onNavigationStateChange={null} />
}
Below are my app.js code
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import { StackNavigator,DrawerNavigator } from 'react-navigation';
import DrawerContent from './components/drawer/drawerContent.js';
import News from './components/news/home.js';
const drawNavigation = DrawerNavigator(
{
Home : {
screen : News ,
navigationOptions : {
header : null
}
}
},
{
contentComponent: props => <DrawerContent {...props} />
}
)
const StackNavigation = StackNavigator({
Home : { screen : drawNavigation,
navigationOptions: {
header: null
}
}
});
export default StackNavigation;
This is my drawerContent.js
import React, {Component} from 'react'
import {View,Text, StyleSheet,
TouchableNativeFeedback,
TouchableOpacity,
TouchableHighlight
} from 'react-native'
import { DrawerItems, DrawerView } from 'react-navigation';
import Icon from 'react-native-vector-icons/Octicons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
class DrawerContent extends Component {
constructor(props){
super(props);
console.log('DrawerContent|testtttttt');
}
render(){
return (
<View style={styles.container}>
<Text>Hi darren</Text>
<TouchableOpacity style={{ marginBottom:5 }} onPress={() => this.props.navigation.navigate('RegistrationScreen') } >
<View style={styles.nonIconButton}>
<Text style={{ color: 'black',fontSize: 13 }} >Sign Up</Text>
</View>
</TouchableOpacity>
<Text>Hi darren</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default DrawerContent;
First, make sure you are using the latest release of react-navigation as the comment noting that the fix was committed is fairly recent.
Based on your code example, to disable logging for all navigation state changes, you would want to replace this code:
export default StackNavigation;
with:
export default () => (
<StackNavigation onNavigationStateChange={null} />
);
as StackNavigation appears to be your root navigator.
React navigation is great, but this logging is really bad. Solution
const AppNavigator = StackNavigator(SomeAppRouteConfigs);
class App extends React.Component {
render() {
return (
<AppNavigator onNavigationStateChange={null} />
);
}
}