When user adds new data to the list I want to add icon dynamically(social icons commonly) in react native. For example,when user adds item that has name facebook then facebook icon should be added in background to the list(item name may be face,fcb etc) How can I achieve this logic ?
Your question is quite vague but I'm guessing you're looking for what's called "conditional rendering".
<View>
{someCondition &&
<FacebookIcon />
}
</View>
The FacebookIcon component will only be rendered if someCondition is true.
So in your case, you probably wanna have a variable that is true or false based on whether your "list" contains the data you want, and use that variable to determine whether to show the icon.
If you want the icon to be dynamic (eg, be able to have Facebook, Insta, Whatsapp), you have another variable that holds the social network you've identified, and pass that as a prop to the icon component:
const listSocialNetwork = 'facebook' // or whatever you find in your list
const showIcon = !!listSocialNetwork // true if a social network was found in the list
// in your render
<View>
{showIcon &&
<SocialIcon socialNetwork={listSocialNetwork} />
}
</View>
Related
I need to use a callback function for the mouse click event. Below code is working in React web app:
const checkAnswer = (e: React.MouseEvent<HTMLButtonElement>) => {
const answer = e.currentTarget.value // here .value property is undefined and gives error in React-Native. Just e.currentTarget is defined.
const correct = questions[number].correct_answer === answer
if(correct) setScore(prev => prev + 1)
}
But I couldn't apply it on React Native (mobile) for Pressable or TouchableOpacity.
This is the render part of React web app's code:
<button value={answer} onClick{checkAnswer} />
and I try to apply it on React Native. The value will be passed to button's value. But there is no "value" option in native's Pressable component. Therefore I am confused
Any help?
you can determine touch events by following
<View onTouchStart={(e) => {console.log('touchMove',e.nativeEvent)}} />
Here is some similar scenario what I could able to understand from the question.
There is a Score state which will store the user's score of a quiz game.
There is a array of question where all the options and correct option are given.
There will be a button for the option, if user choose a option, and based on that it will validate if user is correct or not.
It might not be the exact scenario of you. But this could definitely help to solve your scenario.
Here is a solution for the scenario => solution.
If you click on the solution link you will be redirect to a page which is similar to the screenshot attached below. On very right you will find "My Device", "Android", "ios", choose any and run. Run via "my device" with expo app installed in your mobile if you don't want to be in queue for some certain time.
Note: from your code this is for React web:
<button value={answer} onClick{checkAnswer} />
but in React Native you have to use a click event like this:
<TouchableOpacity onPress={()=>buttonHandler()}></TouchableOpacity>
Here ()=> and () extra need to be added to work a function properly.
Also instead of .map() function you can use FlatList to improve your app. FlatList support lazy loading.
I have a Google places autocomplete input and need to populate address related fields based on selected place as below:
<GPAutocompleteInput
source="address_full"
placeholder="Find address"
onPlaceSelected={onPlaceSelected}
gaOptions={{ types: ["address"] }}
/>
<TextInput source="address_street" disabled label="Ulica" />
<TextInput source="address_postcode" disabled label="Kod pocztowy" />
<TextInput source="address_city" disabled label="Miasto" />
Now I would like the 3 disabled inputs to be filled in with the address components from the selected place but can't figure out how to do this.
I've tried providing initialValues to the SimpleForm component and this works ok in the create view but not in the edit because those fields already have a value the values are not being updated.
react-final-form provides a simple hook allowing me to change values
import { useForm } from "react-final-form";
const form = useForm();
form.change("address_city", components?.address_city);
There may be a better way as this requires building a custom component to use form context required by the hook.
I know that the practice of react native is to use onChangeText for change value as follow.
<TextInput
onChangeText = {(text)=> this.setState({myText: text})}
value = {this.state.myText}
/>
However, I wonder if i could do something like this. To summarise, I want to loop through all the TextInput and get the ref and value. I just want to do things in javascript way as follow. Is that possible to be done?
<TextInput id="id1" ref={ref => (this.remark = ref)} />
<TextInput id="id2" ref={ref => (this.remark1 = ref)} />
onSubmit = () => {
forEach(TextInput in component) {
console.log(TextInput.id) <- note id is custom property
console.log(TextInput.refName)
console.log(TextInput.value)
}
}
Yes, but I wouldn't recommend this approach. You could simply create an array of refs and loop through it in your onSubmit function.
forEach(TextInput in component) {
This is not possible in any javascript environment (not only because forEach and for..in syntax is different but also you can't expect to be able to loop over component elements by type (?) and get them)
What you want to do is not javascript way but old style browser way:
there are no ids in react-native
technically you could get uncontrolled TextInput's value like you would do in plain react in browser environment (via this.textInputRef._lastNativeText) but it's discouraged in react-native, most likely because because instead of DOM react native has to render to native views which all differ depending on the platform (iOS, Android, Windows, etc) but have to work the same
So it's not only impossible in react native but in plain react as well. It looks to me like you want to create a form, and sooner or later you will find out that you want validation or transformation on your inputs and switch back to controlled components anyway
I have 3 pages that will be interacting with each other. a Login page, a Settings page, and a HomeScreen page. The login page contains a toolbar which has a clickable back arrow image(uses goBack()) and a clickable settings image which redirects to a settings page where a language can be picked.
There is no problem detecting a language change on the settings page because state is updated upon a change in language. However, if the user taps the backarrow image, the login page does NOT detect a change in state. How do I make sure that the login page can detect if the language has been changed(on the Settings page)?
I found on question that is similar to my problem here however, the answer provided uses navigate, whereas I'm using goBack. I know they're similar, but I'm unsure as to how/where I could pass a callback function on my settings page, and where to use refresh() on my Login page.
I use this method on my Login page
componentWillMount() {
AsyncStorage.getItem('language', (err, result) => {
langCode = result;
this.setState({
currLang: result,
})
});
}
On my Settings page:
onLangChange(value, index){
Config.langCode = value;
this.setState({ currLang: Config.langCode });
AsyncStorage.setItem('language', value)
console.log( 'here is your new lang ' + Config.langCode);
}
and then
render(){
const {navigate} = this.props.navigation;
const {goBack} = this.props.navigation
const langText = Config.langText[this.state.currLang]; // Object that has text in current language.
return(
<ScrollView style={styles.mainContainer}>
<View style={styles.headerContainer}>
<View style={styles.iconContainer}>
<TouchableOpacity onPress={ () => goBack('') } >
<Image source={Config.images.leftArrowIcon} style={styles.leftArrowIcon} />
</TouchableOpacity>
Use redux for global states like language in your example. It's just much simpler. If you have like 30 screens in your app, and every screen must display texts in correct language, this means that you have to send language back and forth between 30 screens, that's just horrible. redux is a state container, it's strongly recommended that you put those global states (states that many screens share) in redux and send them to each screen. If you don't know how to use redux yet, don't worry, it's not hard to understand, there're plenty good tutorials online. Here is the LanguagePickerExample I wrote for this question using redux, simply
npm install
or
yarn
then
react-native link
The result looks like this:
I am working on React Native Project, I am using react-native-flip-card this component.
My requirement is to make clickable false on initial start and on click of button make clickable true for the flip cards.
In the case you want to modify a behaviour inside a Component, the State Component seems like the things you need.
You can set a state property such as :
this.state = {
isClickable: false,
}
by default in your Component Constructor.
And then assign this value to your FlipCard component, such as :
<FlipCard
*Your other properties*
clickable={this.state.isClickable}
>
Finally, just update your state property when another event such as a button click happens :
<Button
onPress={() => this.setState({isClickable: true})}
title="Make Flipcard clickable"
color="#841584"
/>
That's it ! Do not hesitate to ask more question if something isn't clear enough.