i want to create a reusable button component but i am having some issues. I get back undefined is not an onject evaluting '_nativebase.stylrsheetcreate'. I tried destructing the onPress and title but no luck. Can someone give a clear explanation on how to resolve this? thanks
import React from 'react';
import { View, Text, Button, StyleSheet } from 'native-base';
export const StyledButton = props => {
return (
<View style={styles.button}>
<Button
block
full
bordered
light
onPress={this.props.onPress}
>
<Text
style={{
color: '#FFFFFF',
}}
>
{this.props.title}
</Text>
{this.props.children}
</Button>
</View>
);
};
const styles = StyleSheet.create({
button: {
flex: 1,
padding: 10,
}
});
to Render
<StyledButton
title='Cancel'
onPress={this.somefunction}
/>
Remove this use props.someprop
import React from 'react';
import { StyleSheet } from 'react-native';
import { View, Text, Button } from 'native-base';
export const StyledButton = props => {
return (
<View style={styles.button}>
<Button block full bordered light onPress={props.onPress}>
<Text
style={{
color: '#FFFFFF',
}}>
{props.title}
</Text>
{props.children}
</Button>
</View>
);
};
const styles = StyleSheet.create({
button: {
flex: 1,
padding: 10,
}
});
Related
import { StyleSheet, Text, View, ImageBackground, SafeAreaView } from 'react-native';
import react, {useState} from 'react';
import InputComponent from './sharedComponent/InputComponent';
import ButtonComponent from './sharedComponent/ButtonComponent';
export default function App() {
const[text, setText] = useState('');
const[todoList, setToDoList] = useState([]);
return (
<ImageBackground
source={require('./assets/todoimages.png')}
style={{width: '100%', height: '100%'}}
>
<SafeAreaView>
<View style={styles.container}>
<InputComponent onchangeValue={setText}
/>
<ButtonComponent
addItem={setToDoList}
itemToAdd={text}
/>
</View>
<View>
{todoList.length > 0 && todoList.map((value) => <Text>{value}</Text>)}
</View>
</SafeAreaView>
</ImageBackground>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'baseline',
justifyContent: 'center',
paddingBottom:'10%'
},
});
I am getting the error :
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
can anyone tell me why I am getting the error and what is the solution for that?
below is the button component:
import {View,Button, StyleSheet} from 'react-native';
const ButtonComponent = (props) =>{
return(
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Button
onPress={props.addItem(prevArray=> [...prevArray, props.itemToAdd])}
title="ADD"
/>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
buttonContainer: {
margin: 20
},
})
export default ButtonComponent;
below is the input component:
import { Text, TextInput, View } from 'react-native';
const InputComponent = (props)=>{
return(
<TextInput
style={{height: 40, backgroundColor:'white'}}
placeholder="add the item in to do list"
onChangeText={newText => props.onchangeValue(newText)}
/>
)
}
export default InputComponent;
You must use arrow-functions in the onPress method of your buttonComponent like this:
onPress={()=>props.addItem(...)}
i am new here and stuck because of this error. please help me to solve this error.
import React from "react";
import { View, Image, StyleSheet, Text, TouchableOpacity } from "react-native";
function ListItem({ image, title, subtitle }) {
return (
<TouchableOpacity>
<View style={styles.container}>
{image && <Image style={styles.img} source={image} />}
<View>
<Text>{title}</Text>
<Text>{subtitle}</Text>
</View>
</View>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
container: {
flexDirection: "row"
},
img: {
width: 70,
height: 70,
borderRadius: 35
}
});
export default ListItem;
and invoke it in other component with passing arguments
import * as React from "react";
import Icon from "./Components/Icon";
export default function App() {
return (
<SafeAreaView style={styles.screen}>
<ListItem
title="My title"
subtitle="subtitle"
imgComponent={<Icon name="email" />}
/>
</SafeAreaView>
);
}
and i am facing this error
I have an ItemForm component in a react-native expo app I would like to use for both Creates and Updates. It is a functional component which I am trying to pass a handler from a parent component to either create a new item or update an existing item. I am having trouble understanding how to pass the onPress handler down from the parent Class Component down to the functional child form Component.
Parent Component:
import React, { Component } from "react";
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import ItemForm from './components/ItemForm';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default class App extends Component {
handleSubmit = ({ name }) => {
alert(name);
// todo: get form data and create or update database
}
render() {
return (
<View style={styles.container}>
<Card>
<ItemForm onSubmit={() => this.handleSubmit}/>
</Card>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
ItemForm.js
import React, { useState } from "react";
import { View, Text, StyleSheet } from "react-native";
import { Button, Card, Icon, Input } from "react-native-elements";
export default function ItemForm({ onSubmit }) {
const [name, setName] = useState("");
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}>Add an Item</Text>
</View>
<Card
containerStyle={{
height: "80%",
margin: 0,
elevation: 1,
borderWidth: 0,
shadowOpacity: 0,
shadowRadius: 0,
}}
>
<Input
label="Item Name"
labelStyle={styles.itemText}
placeholder="Name Here"
onChangeText={(name) => setName(name)}
/>
<Button
icon={
<Icon
name="check-circle"
size={20}
style={{ paddingRight: 10 }}
onPress={onSubmit({name: name})}
/>
}
title="Save Item"
/>
</Card>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
},
header: {
alignItems: "center",
paddingTop: 40,
},
headerText: {
fontSize: 32,
},
itemText: {
fontSize: 25,
}
});
This is currently throwing:
onSubmit is not a function. (In 'onSubmit({name: name})', 'onSubmit' is undefined)
I've tried various different syntaxes of passing or calling the function by reading the docs here but I run into a lot of errors like Please attach a method to this component and I can't seem to get past this?
onPress should be a function that calls onSubmit, not the return value of calling onSubmit (onPress={onSubmit({name: name})}).
onPress needs to be on the Button.
You need to pass down this.handleSubmit from the parent component, and not a function that returns this.handleSubmit (onSubmit={() => this.handleSubmit}):
So in App:
<ItemForm onSubmit={this.handleSubmit}/>
In ItemForm:
<Button
onPress={() => onSubmit({name: name})}
icon={
<Icon
name="check-circle"
size={20}
style={{ paddingRight: 10 }}
/>
}
title="Save Item"
/>
demo
I am using React Navigation to create custom NavigationDrawer with a header on top this is how my code looks
import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
import AboutScreen from './modules/screens/About/index'
import ContactScreen from './modules/screens/Contact/index'
import HomeScreen from './modules/screens/Home/index'
import { createDrawerNavigator, DrawerItems } from "react-navigation";
import { Image, ScrollView, SafeAreaView, Dimensions } from 'react-native';
class NewDrawer extends Component {
render() {
return (
<AppDrawer />
);
}
}
const AppDrawer = createDrawerNavigator({
HomeScreen: HomeScreen,
AboutScreen: AboutScreen,
ContactScreen: ContactScreen,
},
//Commenting below part makes my code work
{
contentComponent: CustomDrawer
}
)
const CustomDrawer = (props) => (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ height: 150, backgroundColor: 'white' }}>
<Image source={require('./modules/images/header.jpeg')}
style={{ height: 120, width: 120 }}>
</Image>
</View>
<ScrollView>
<DrawerItems {...props}>
</DrawerItems>
</ScrollView>
</SafeAreaView>
)
export default NewDrawer;
If I remove contentComponent i see my drawer items.
How can I get Header with custom drawer item?
I am using:-
npm > v6.4.1
Node > v8.12.0
react-navigation > v2.17.0
I am following this tutorial
You are not sending props to CustomDrawer . Try code below.
contentComponent: props => <CustomDrawer {...props} />
Drawer.js
<SafeAreaView style={{ flex: 1 }}>
<View style={{ height: 150, backgroundColor: 'white' }}>
<Image source={require('./modules/images/header.jpeg')}
style={{ height: 120, width: 120 }}>
</Image>
</View>
<ScrollView>
<DrawerItems {...props}>
</DrawerItems>
</ScrollView>
</SafeAreaView>
App.js
import CustomDrawer from './Drawer' // Import the file
const AppDrawer = createDrawerNavigator({
HomeScreen: HomeScreen,
AboutScreen: AboutScreen,
ContactScreen: ContactScreen,
},
{
contentComponent: <CustomDrawer />
}
)
This should work tested on android device
I have a button in my app that needs to navigate to another screen and change a value in redux simultaneously. Of course, export default cannot be used twice but - when I mark one of the exports as a constant, the code will fail. In this case, connect(null, mapDispatchToProps) is failing. How can I get the two exports working?:
import React, { Component } from 'react';
import { View, Image, StyleSheet } from 'react-native';
import { person } from "../../assets/people";
import { withNavigation } from 'react-navigation';
import { connect } from 'react-redux';
export class ProfileCard extends Component {
updateMarkerState = (x) => {
this.props.updateMarkerState(x)
this.props.navigation.navigate("map");
}
render() {
return (
<Card >
<CardItem cardBody>
<Image source={this.props.data.values.photoId} style={{ height: 200, width: null, flex: 1 }} />
</CardItem>
<CardItem>
<Text>{this.props.data.values.altName}</Text>
</CardItem>
<CardItem>
<Text>{this.props.data.values.personIntroText}</Text>
</CardItem>
<CardItem style={styles.buttonContainer}>
<Button transparent
onPress={() =>
this.updateMarkerState(this.props.data.values.id)
}>
<Icon active name="pin" />
</Button>
<Button transparent
onPress={() => {
this.props.navigation.navigate("YouTubeScreen", {id: this.props.data.values.id});
}}>
<Icon active name="play"/>
</Button>
</CardItem>
</Card>
);
}
}
const styles = StyleSheet.create({
buttonContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
}
});
const mapDispatchToProps = (dispatch) => {
return {
updateMarkerState: (id) => {
dispatch(updateMarkerState(id))
}
}
}
export const conn = connect(null, mapDispatchToProps)(ProfileCard)
export default withNavigation(ProfileCard);
You can concatenate HOCs, like
export default withNavigation(connect(null, mapDispatchToProps)(ProfileCard));