I was able to create a search bar, where you can filter the characters, for my directory. However, when I click on that particular profile, the profile image and the text for it do not appear. It was there before I created the searchbar, now it disappeared. Anyone know why that may be?
Prior to having this problem, this is how I had it set up. This is with the searchbar present, but not being able to filter out.
{characters.map((data, index) => (
<Button
text={data.name}
key={data.name}
title={`${data.name}`}
onPress={() => {
this.props.navigation.navigate("CharacterProfiles", {
item: data
});
}}
/>
))}
Then I made some changes to be able to filter out my options and I switched it to this:
{this.state.data.map((data, index) => (
<Button
text={data.name}
key={data.name}
title={`${data.name}`}
onPress={() => {
this.props.navigation.navigate("CharacterProfiles", {
item: data
});
}}
/>
))}
After the above happened, now the data such as the image and text will not appear dynamically anymore. Anybody know why?
In android some times image not load beacause of memory issue..
In Androidmanifest application tag set..
<application
...
android:largeHeap="true"
android:hardwareAccelerated="true"
...
Related
I want to test a checkbox that has no label. The point is that there are other checkboxes as well so I cant use getByRole.
I have tried to use data-testid, but apparently, it's not working.
How am I supposed to check if that checkbox is checked(toBeChecked())?
<Checkbox
data-testid={item?.id}
key={item?.id}
id={item?.id.toString()}
color="secondary"
checked={item?.checked}
disabled={hasAll}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
if (item) {
item.checked = e.target.checked;
setFinalData(updateItemInArray(finalData, {
item,
index,
}));
}
}}
/>
The proper way to do this would be to add an aria-label to your checkbox, so it's announced correctly by screen readers:
<Checkbox inputProps={{ 'aria-label': 'Select row 1' }} />
This way, you'll be able to select it in your tests using getByLabelText.
If you want to use data-testid, you can place it on the checkbox similarly to aria-label:
<Checkbox inputProps={{ 'data-testid': 'checkbox1' }} />
Note that if you're using Typescript, you'd have to cast the inputProps to React.InputHTMLAttributes<HTMLInputElement> as data attributes are not a part of InputHTMLAttributes:
<Checkbox inputProps={{ 'data-testid': 'checkbox1' } as React.InputHTMLAttributes<HTMLInputElement>} />
Hi friends I hope you are doing very well ^^
I am struggling to get a TextInput value when a user enters it in a simple basic form I've created, here is the field :
<TextInput placeholder='latitude' name='lat'/>
<Button style={styles.signIn}
title="Show my entered text"
onPress={() => {
alert(this.state.lat)}}
/>
I tried so many methods to get the value of this field but unfortunately none works.. I am new to react native so I really don't know how can this be done properly (is there any variable I need to define) because in javascript I used to get it only by the GetElementById quite simple right XD
I tried creating a variable exactly bellow the imports like this :
value={this.state.lat}
So I can get the above textInput actual value entered by the user but it isn't working at all and my alert function is not returning anything (I actually don't know if alert() is a react native integrated function or I need to define it from scratch :/), please help I am really lost I tried many solutions on the web but nothing resolves my problem. Thanks in advance
Try this sample code
class Example extends React.Component {
state = { lat: "" };
render() {
return (
<View>
<TextInput
placeholder="latitude"
name="lat"
value={this.state.lat}
onChangeText={(text) => this.setState({ lat: text })}
/>
<Button
style={styles.signIn}
title="Show my entered text"
onPress={() => {
alert(this.state.lat);
}}
/>
</View>
);
}
}
I have this code in my React Native app that renders a list of types. Selected and not selected types have different backgrounds. Is it okay to make accessibility label text conditional?
<View style={styles.typesList}>
{types.map(type => {
return (
<TouchableOpacity
key={type}
style={[
styles.type,
{
backgroundColor: filterTypes.includes(type)
? Colors.white
: Colors.lightYellow
}
]}
onPress={() => {
handleFilterTypesChange(type);
}}
testID='type'
accessibilityLabel={`${
filterTypes.includes(type) ? 'Unselect' : 'Select'
} ${type} filter`}
>
<Text>{type}</Text>
</TouchableOpacity>
);
})}
</View>
The screen readers by default read-out if a checkbox is selected or not. So no need to put conditional text to just read out it. If you have multiple select boxes it is advised to use fieldsel and legend which will give details to visually challenged persons.
<fieldset>
<legend>Select your pizza toppings:</legend>
<input id="ham" type="checkbox" name="toppings" value="ham">
<label for="ham">Ham</label><br>
<input id="pepperoni" type="checkbox" name="toppings" value="pepperoni">
<label for="pepperoni">Pepperoni</label><br>
</fieldset>
The contains the group of checkboxes, and the labels the group. Screen readers may repeat the legend for each control in the group, so the legend text should be brief and descriptive.
<Dialog.Container visible={this.state.dialogSendEmailVisible}>
<Dialog.Title>Password Recovery</Dialog.Title>
<Dialog.Input label="Email"></Dialog.Input>
<Dialog.Button label="OK" onPress={this.handleSendEmail} />
</Dialog.Container>
I have this simple dialog, this is being used for password recovery purposes. I am not a FE developer, and I am not finding how can I pass the value typed on Email field to handleSendEmail function. Github and npm pages do not have any example.
Github page: https://github.com/mmazzarolo/react-native-dialog
PS: This can be a very react native basic feature, but I am not findindg a way...
Assuming that the Dialog Inputs/Button extend React Native's own - then you can call:
onSubmitEditing and onChangeText
From the docs:
onSubmitEditing
Callback that is called when the text input's submit button is
pressed. Invalid if multiline={true} is specified.
TYPE REQUIRED
function No
And
onChangeText
Callback that is called when the text input's text changes. Changed
text is passed as an argument to the callback handler.
TYPE REQUIRED
function No
It means something like below:
<Dialog.Input label="Email"
onChangeText={email => this.setState({email})}
value={this.state.email}
onSubmitEditing={
(event) => this.doSomethingWithSubmit(event)
}
>
</Dialog.Input>
UPDATE
So I have tested this, and it works as below - side note - I'm using Typescript so just remove the types ( : string) etc:
In Render
return (
<View>
<View>
<Button onPress={this.showDialog}>
<Text>Show Dialog</Text>
</Button>
<Dialog.Container visible={true}>
<Dialog.Title>Password Recovery</Dialog.Title>
<Dialog.Input label="Email" onChangeText={(email : string) => this.handleEmail(email)}
></Dialog.Input>
<Dialog.Button label="OK" onPress={this.handleSendEmail} />
</Dialog.Container>
</View>
</View>
)
handleEmail:
private handleEmail = (email : string) => {
console.log("email");
console.log(email);
}
Result:
Further
As a side note of this project, I noticed when I used Live reload - that the Dialog was never re-rendered rather, rendered on top of the old Dialog. I would take this into consideration. Perhaps it was my environment, but everything else worked fine.
So that's what my render list looks like:
renderEvent(){
return this.props.eventList.map(listedEvent=>
<CardSection key={listedEvent._id}>
<EventListItem>
{listedEvent.eventName}
</EventListItem>
<DeleteButton
onClick={this.deleteEvent(listedEvent._id)}
key={listedEvent._id}
/>
</CardSection>
);
}
and here the rendering of the whole list
render(){
if (this.props.eventList !== undefined) {
return(
<Card>
{this.renderEvent()}
</Card>
)
}else{
return(
<View>
<Spinner/>
</View>
)
}
}
}
So far so good, the list and the delete button appear correctly, yet when I try to delete one line, it addresses all. I created my event handler which for now, only logs the passed id.
deleteEvent(eventID){
console.log(eventID)
}
Yet when called, it logs all the _ids on the list. What am I doing wrong? How can I make sure I'm passing one single id of the list item I'm clicking on?
Thank you!
Problem is that you are rather than passing a deleteEvent function to onClick prop you are executing it. This causes to deleteEvent fire for each item while rendering.
You can sort this out by changing this,
onPress={this.deleteEvent(listedEvent._id)}
to this
onPress={() => this.deleteEvent(listedEvent._id)}
This will also assure that deleteEvent is bind with this.