I am using React Native.I am trying to change the button when it is clicked. I want to show the add item component by default and when it is clicked I want it to change to remove item.
const Products = () => {
const [added,notAdd]=useState(false);
function changeIT(){
console.log(added);
notAdd(!added);
console.log(added);
}
return (
{added?<Remove index={index} onPress={()=>changeIT()}/> :<Add item={item} onPress={()=>changeIT()}/> }
)}
Nothing happens after I click on the buttons.
I believe you have only included the onPress event when the component is being executed, not in the actual component itself, for example.
Execution:
<Add item={item} onPress={()=>changeIT()}/>
Declaration:
import React, {useState} from 'react';
import { Pressable, Text} from 'react-native';
export default function Add({ item , onPress}) {
return (
<Pressable onPress={onPress}>
<Text>Add</Text>
</Pressable>
);
}
Related
Here whenever i click the icon it doesnt show anything. It supposed to be showing some text and when clicked again it should hide the text. Im using react native.
import React, { useState } from 'react';
import { View, Text, StyleSheet, Button, Image, TouchableOpacity} from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
export default function Edit(props, { navigation }) {
const [slide, setSlide] = useState(false);
const toggle = () => {
setSlide(!slide);
console.log('clicked');
return (
<View>
<Text>random</Text>
<Text>random</Text>
</View>
);
}
return (
<View>
<FontAwesome name="sliders" size={30} color="#000" onPress={() => toggle()}/>
</View>
}
After testing the only thing it shows is the console.log('clicked') message. It does not display anything else. Also the icon displays normally. Everything is working except the and the content in those tags.
Rather than returning the View from your toggle function, you actually need to display that view your view hierarchy (eg what is returned from your component).
I've demonstrated in the example by using a ternary expression -- if slide is true, it gets shown, otherwise it does not.
export default function Edit(props, { navigation }) {
const [slide, setSlide] = useState(false);
const toggle = () => {
setSlide(!slide);
console.log('clicked');
}
return (
<View>
<FontAwesome name="sliders" size={30} color="#000" onPress={() => toggle()}/>
{slide ? <View>
<Text>random</Text>
<Text>random</Text>
</View> : null}
</View>
);
}
Snack example: https://snack.expo.io/7lVezwWs7
I have a component and import it in specific screen, in this screen i have a button when clicks i open modal contain component it's a "recorder" so after i record voices i want to take this voice and save them into Parent screen as a state or something!
in the recorder component, I save voices data into state! but how can i pass it to other parent screens!?
so how can I handle it?
here is shots
Parent Screen "after click add voice I show the modal"
Parent Screen
Here's a modal contain a recorder component
Modal
CODE
Component
" I pass data to PassDataToModal state inside componentDidMount "
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {AudioRecorder, AudioUtils} from 'react-native-audio';
import Sound from 'react-native-sound';
import Icon from 'react-native-vector-icons/MaterialIcons';
class RecorderScreen extends Component {
state = {
PassDataToModal: null,
};
componentDidMount() {
AudioRecorder.requestAuthorization().then(isAuthorised => {
this.setState({hasPermission: isAuthorised});
AudioRecorder.onFinished = data => {
console.log('data', JSON.stringify(data));
this.setState({PassDataToModal: data});
};
});
}
render() {
return (
<View style={styles.container}>
<View style={styles.controls}>
{this._renderPlayButton(() => {
this._play();
})}
{this._renderRecordButton(this.state.recording)}
{this._renderStopButton('Stop', () => {
this._stop().then(() => this.setState({currentTime: 0}));
})}
</View>
<Text style={styles.progressText}>{this.state.currentTime}s</Text>
</View>
);
}
}
export default RecorderScreen;
Parent Screen
import Modal from 'react-native-modal';
import RecorderScreen from './Recorder';
class Order extends Component {
constructor(props) {
super(props);
this.state = {
isModalVisible: false,
};
}
toggleModal = () => {
this.setState({isModalVisible: !this.state.isModalVisible});
};
render() {
return (
<View style={styles.container}>
<TouchableOpacity
onPress={this.toggleModal}
>
<Icon name="mic" color="#333" size={20} />
<Text style={{paddingHorizontal: 5}}>Add Voice</Text>
</TouchableOpacity>
<Modal
style={{margin: 0}}
isVisible={this.state.isModalVisible}
>
<View>
<TouchableOpacity onPress={this.toggleModal}>
<Icon name="close" color="#000" size={25} />
</TouchableOpacity>
<RecorderScreen /> // Component
</View>
</View>
)
}
}
In your parent component pass a function to your RecorderScreen component that will send the necessary data up. Docs on lifting state up.
So in your parent you'd have something like:
setData = (data) => {
// Set this to whatever you need it to be named
this.setState({childData: data});
}
Then pass the function as a prop:
<RecorderScreen setData={this.setData} />
And finally, call it in the child however needed (If I'm following the code something like this):
componentDidMount() {
AudioRecorder.requestAuthorization().then(isAuthorised => {
this.setState({hasPermission: isAuthorised});
AudioRecorder.onFinished = data => {
this.props.setData(data);
};
});
}
Then your parent component will have access to the child's data that you have lifted up.
I've created a custom alert as a component in React Native. I used Modal to create this custom alert. My problem is, how to use it? Instead of using Alert.alert in React Native, I want to display my own alert.
Here is my Custom Alert Modal.
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import Modal from 'react-native-modal';
import styles from './style';
import Button from '../../components/Button';
export default class CustomAlert extends Component {
renderModalContent = () => (
<View style={styles.content}>
<Text style={styles.contentTitle}>{this.props.title}</Text>
<Text style={styles.contentInfo}>{this.props.content}</Text>
<View style={styles.buttonContainer}>
<Button
color={this.props.buttonColor}
text={this.props.buttonText}
onPress={this.props.buttonOnPress}
/>
</View>
</View>
);
render() {
return (
<View style={styles.container}>
<Modal
isVisible={this.props.isVisible}
backdropColor="#000000"
backdropOpacity={0.9}
animationIn="zoomInDown"
animationOut="zoomOutUp"
animationInTiming={600}
animationOutTiming={600}
backdropTransitionInTiming={600}
backdropTransitionOutTiming={600}
>
{this.renderModalContent()}
</Modal>
</View>
);
}
}
This is how I want to use it. I want to display this alert through a function. That means when function catches up with an error, I want to show my custom alert.
myFunction()
.then(() => // do something)
.catch(() => // show my custom alert);
Can you help me please to solve this problem?
set isVisible true in your catch block.
myFunction()
.then(() => // do something)
.catch((e) => this.setState({ isVisible: true }))
I made a button component which I render in my Parent component. Been stuck for a while now on trying to fire a function on the onPress event of this child component that is used in my Parent.
I've been looking through some of the recommended questions and answers but I need some specific advice.
I simplified my code as much as possible, please have a quick look.
Thanks in advance!
// PARENT COMPONENT
export class Home extends Component {
constructor(props) {
super(props);
this.onPress = this.onPress.bind(this);
}
onPress = () => {
console.log("Hey");
};
render() {
return (
<View style={styles.container}>
<PrimaryButton text={"Sign up"} onPress={this.onPress} />
</View>
);
}
}
// CHILD COMPONENT
const PrimaryButton = ({ text }) => {
return (
<TouchableOpacity style={style.container} >
<Text style={style.text}>{text}</Text>
</TouchableOpacity>
);
};
export default PrimaryButton;
You need to pass onPress to TouchableOpacity as a prop. I don't know the props for TouchableOpacity but should be bound as either onPress or onClick. Event handlers always need to be passed to the root component (or as close to it as you can get, ie TouchableOpacity is from a 3rd party). Most, if not all, 3rd party components will have props for the proper events.
// CHILD COMPONENT
const PrimaryButton = ({ text, onPress }) => {
return (
<TouchableOpacity style={style.container} onClick={onPress} >
<Text style={style.text}>{text}</Text>
</TouchableOpacity>
);
};
I have started learning react native 2 days back only. I am using list item component from Native Base UI framework.
According to their docs and examples to catch a click event on ListItem you need to add onPress and button option to the ListItem. But in my case its not working.
I have another element with also tracks click event, it works fine, but list element isn't catching click event.
Strange this is that if I trigger a alert, it works
<List button onPress={() => { Alert.alert('Item got clicked!') } }>
Below id my complete code
import React from 'react';
import {
Content,
List,
ListItem,
Body,
Thumbnail,
Text,
Badge,
View
} from 'native-base';
import { ActivityIndicator, TouchableHighlight, TouchableOpacity, Alert } from 'react-native';
export default class Questions extends React.Component{
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
Alert.alert("I am clicked");
// Call method from parent
this.props.onPress();
}
render() {
var items = this.props.items;
return (
<Content>
<List button onPress={() => { this.handleClick } }>
{Object.keys(items).map(function(eachQuestion) {
return (
<ListItem avatar key={items[eachQuestion].id} button onPress={() => { this.handleClick } } >
<Body>
<Text>{items[eachQuestion].question}</Text>
</Body>
</ListItem>
)
})}
</List>
<TouchableOpacity onPress={this.handleClick}>
<View><Text>Click me</Text></View>
</TouchableOpacity>
</Content>
);
}
}
Edit 1
render() {
var questions = {
"1" : "James",
"2" : "Smith",
"3" : "Doe",
"4" : "Smith"
};
return (
<Container>
<Content>
<List>
{Object.keys(questions).map(function(key) {
return (<ListItem button={true} onPress={this.handleClick}>
<Text>{questions[key]}</Text>
</ListItem>
)
})}
</List>
</Content>
</Container>
);
}
** Final Solution **
handleClick(){
Alert.alert("I got clicked");
}
render() {
var questions = this.props.questions;
return (
<Content>
<List>
{Object.keys(questions).map((eachQuestion) => {
return (
<ListItem key={questions[eachQuestion].id} button={true} onPress={this.handleClick} >
<Body>
<Text>{questions[eachQuestion].question}</Text>
</Body>
</ListItem>
)
})}
</List>
</Content>
);
}
Two errors:
You should brush up on your ES6 arrow function expressions. You aren't calling your handleClick function which is why nothing is happening vs your Alert example where it does work (since you are actually doing something).
You don't define the value for the button prop. The docs say that there is no default value, so it's good practice to define it as true or false.
So to fix your code, you should define your props for ListItem like so:
button={true}
onPress={() => { this.handleClick() }}
OR to make it shorter:
button={true}
onPress={this.handleClick}
I'm also not sure why you are defining button and onPress props on your List component since it's the ListItems that you are trying to click, not the entire List itself. But since that isn't part of the question, I won't address that.
Full example of working code:
import React, { Component } from 'react';
import { Container, Content, List, ListItem, Text } from 'native-base';
import { Alert } from 'react-native';
export default class App extends Component {
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
Alert.alert("I am clicked");
// Call method from parent
//this.props.onPress();
}
render() {
return (
<Container>
<Content>
<List>
<ListItem button={true} onPress={this.handleClick}>
<Text>Simon Mignolet</Text>
</ListItem>
<ListItem button={true} onPress={() => { this.handleClick() }}>
<Text>Nathaniel Clyne</Text>
</ListItem>
<ListItem button={true} onPress={this.handleClick}>
<Text>Dejan Lovren</Text>
</ListItem>
</List>
</Content>
</Container>
);
}
}