I have country codes from a file, I render it like that,
it returns all country names and codes perfectly.
<TouchableOpacity
style={st.oneCode}
onPress={selectItem}>
<View
style={[
st.filterCheckMarkWrapper,
check === false &&
st.filterCheckmarkInactiveColor,
]}>
{check === true && (
<View style={st.filterCheckmark} />
)}
</View><Text style={st.CodeText}>
{item.countryName}: +{item.phoneCode}
</Text>
</TouchableOpacity>
but when check is true, all of the text are checked, how can i fix it?
Instead of using check variable/state, you can either add a checklist or checked property in the Country object.
Note: I'll only explain the second one.
So, you have to add checked property to your Country object.
Then your source will be:
<TouchableOpacity
style={st.oneCode}
onPress={selectItem}>
<View
style={[
st.filterCheckMarkWrapper,
item.checked === false &&
st.filterCheckmarkInactiveColor,
]}>
{item.checked === true && (
<View style={st.filterCheckmark} />
)}
</View><Text style={st.CodeText}>
{item.countryName}: +{item.phoneCode}
</Text>
</TouchableOpacity>
And inside your onPress event you have to toggle the checked property.
E.g:
function selectItem(item: Country) {
item.checked = !item.checked;
//your other works
}
Related
I'm trying to pass a date object as a prop in react native, and access its methods to render data.
The prop is passed as following:
<Task
text={item["text"]}
date={item["date"]}
time={item["time"]}
reminder={item["reminder"]}
completed={item["completed"]}
/>
It is accessed as:
<View>
<View
style={[
styles.item,
completed
? { backgroundColor: "#98CBB4" }
: { backgroundColor: "#CCC9DC" },
]}
>
<View style={styles.ciricleTitle}>
<View style={styles.circular}></View>
<Text style={styles.itemText}>{text}</Text>
</View>
<Text style={styles.itemText}>{console.log(date.date)}</Text>
{/* <Text style={styles.itemText}>{date.getDay()}</Text> */}
</View>
{completed && <View style={styles.line} />}
</View>
i tried expanding the prop with {...item['date']} but it is not working
We have to convert string to date object, You can use new Date(date).getDay()
Let's clarify your doubt first.
sending date which is a string as a prop
sending date which is an object as a prop
So, you have made the mistake here. You have sent the date string rather than as the date object and trying to access the properties.
<div>
{
itemList.map(({ text, date, time, reminder, completed }) => (
<Task {...{ text, date, time, reminder, completed }} />
))
}
</div>
The date you are passing here undoubtedly is a string(which is item.date)
One way to acheive what you want is, send it as a date object..
<Task
{...{
text,
time,
reminder,
completed,
date: new Date(date)
}}
/>
So that,
<Text style={styles.itemText}>{date.getDay()}</Text>
would become valid.
I'm doing a project in react native (typescript) and here is my issue : I have this error Argument of type 'GestureResponderEvent' is not assignable to parameter of type 'SetStateAction<string>'.ts(2345) with this part of my code, at the i of setSelected :
<View style={{}}>
<Text style={styles.texteti}>Heading, paragraphe, lien</Text>
{state.map((i) => (
<TouchableOpacity onPress={(i) => setSelected(i)}>
<Text>{i} Here</Text>
</TouchableOpacity>
))}
{selected == "v1Visible" && (
<View>
<Text>View 1</Text>
</View>
)}
{selected == "v2Visible" && (
<View>
<Text>View 2</Text>
</View>
)}
{selected == "v3Visible" && (
<View>
<Text>View 3</Text>
</View>
)}
{selected == "v4Visible" && (
<View>
<Text>View 4</Text>
</View>
)}
</View>
Anyone has an idea of how to resolve this
You are reusing the variable with name i in the callback function passed to onPress of the TouchableOpacity. You are using the same variable name in your map function of state. Since the setter setSelected is called in the local scope of the callback function of onPress, the event passed to this callback function will be used (it is stored in i of the local scope of the callback function).
The easiest fix would be to either rename the variable or not declare it at all since you are not using it anyway.
{state.map((i) => (
<TouchableOpacity onPress={() => setSelected(i)}>
<Text>{i} Here</Text>
</TouchableOpacity>
))}
If you actually want to store the event of the onPress action (which seems to be unlikely judging from your current code), you need to either change the typing of your state or access whatever you want to access from the event.
I'm using react-native FlatList to render out a punch on elements the data of which comes from an external API.
I want to prevent the user from picking the same item twice. So the way I'm going about this it hiding the item after they pick it.
If, let's say, I have a state picked like so
const [ picked, setPicked ] = useState(false);
changing it will of course hide all the elements.
<FlatList
{/*some other props*/}
data={allCards}
renderItem={(card: ListRenderItemInfo<CardsProps>) => (
<TouchableOpacity
style={[ styles.holder, { display: picked ? "none" : "flex" } ]}
onPress={() => handleChoice(parseInt(card.item.id))}
>
<Card
{/*some card props*/}
/>
</TouchableOpacity>
)}
/>
How can I go about changing the state for only one element inside the FlatList??
Is there a better approach you would recommend to do the same job?
try it like this, it will work,
<FlatList
{/*some other props*/}
data={allCards}
renderItem={(card: ListRenderItemInfo<CardsProps>) => picked ? (
<TouchableOpacity
style={[ styles.holder, ]}
onPress={() => handleChoice(parseInt(card.item.id))}
>
<Card
{/*some card props*/}
/>
</TouchableOpacity>
): undefined}
/>
The easiest way to do this is if you create an object with all the ids and while inserting it you can check it whether it's in that list or not
it'll cost u O(1) time to check.
<FlatList
{/*some other props*/}
data={allCards}
renderItem={(card: ListRenderItemInfo<CardsProps>) => picked ? (
<TouchableOpacity
style={[ styles.holder, ]}
onPress={() => handleChoice(parseInt(card.item.id))}
>
<Card
{/*some card props*/}
/>
</TouchableOpacity>
): undefined}
/>
const map=new Map();
const handleChoice=(id)=>{
if(Map.get(id)===undefined){
Map.set(id,true)
//add the element to ur list where u need it to
}
}
I have a TextInput that will render a ListView prompting text to AutoComplete however the TouchableOpacity requires 2 clicks to trigger (first to dismiss the keyboard)
Adding keyboardShouldPersistTaps="always" to the ListView does not fix the problem.
Code:
render() {
const { selected, searched } = this.state;
return (
<View>
<TextInput
onChangeText={this.searchedText}
underlineColorAndroid="transparent"
onBlur={this.blurInput}
/>
<ListView
keyboardShouldPersistTaps="handled"
style={styles.autoCompleteListView}
dataSource={ds.cloneWithRows(searched)}
renderRow={this.renderRow.bind(this)}
/>
</View>
);
}
...
renderRow = (rowData) => (
<TouchableOpacity
onPress={this._onPressRow.bind(this, rowData)}
>
<Text>{ rowData }</Text>
</TouchableOpacity>
);
https://github.com/facebook/react-native/issues/10138#issuecomment-304344283
All nested components need the keyboardShouldPersistTaps property
I am using React-Navigation but I guess You don't really need to have a prior knowledge about it.
So I have a header Component which looks like this
const Header = (props) => {
return (
<View style={headerContainer}>
<View>
<Button onPress={() => props.navigation.navigate('Home')}
title="Go Back"/>
</View>
<Text style={header}> Knicx
<Text style={headerSecondary}> Crypto Ticker </Text>
</Text>
</View>
)
}
Now, In the above notice the button, Which I am currently showing on all the pages
<Button onPress={() => props.navigation.navigate('Home')}
title="Go Back"/>
But I don't want it to be there on some specific pages, like HomeScreen to say the least.
Now, One solution is to remove the <Header /> component in my homepage, Copy the above code snippet, past it in my HomeScreen and remove the Component ( sort of like hardcoding ) or two create two Header component, one with button and one without button
[Question:] But I was thinking if we could toggle the visibility of button dynamically or stack it on the top of <Header /> ? Can someone please tell me how can we do it? (No, We can set the opacity of the button to zero and change it whenever we need it)
[Update:] We can use redux to manage/pass the state but the problem is that in React-native we do not have display: none and I don't want to change use the opacity
Send showHomeButton: boolean as a prop to header
const Header = props => (
<View style={headerContainer}>
{this.props.showHomeButton && (
<View>
<Button onPress={() => props.navigation.navigate('Home')} title="Go Back" />
</View>
)}
<Text style={header}>
{' '}
Knicx
<Text style={headerSecondary}> Crypto Ticker </Text>
</Text>
</View>
);