im using database in my RN app so im selecting datas and datas in my db are with html tags for an example : <p>Hello world</p> and thats why im using react-native-render-html
my question is that i want to select data to react native alert and i can do it already but how can i put element to alert value?
<Button title="Arka Yaprak" onPress={() => Alert.alert(`${this.state.arkayaprak}`)} />
it is working but i should render it
<Button title="Arka Yaprak" onPress={() => Alert.alert(<HTML html={this.state.gununolayi} />)} />
like this
You cannot put a component into Alert.alert().
Alert.alert() takes the following arguments:
Alert.alert(title: string, message?: string, buttons?: AlertButton[], options?: AlertOptions)
You can clearly see that it accepts only string values for title and message.
HTML component of react-native-render-html renders a View and not a string. Hence, it cannot be used inside Alert.alert().
However, you can use Modal to achieve something similar to alert.
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 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'm new in react-admin and I need to create a custom field.
I want to get from an endpoint a list of information (for instance 3 objects).
Then I need to create on my custom Field (a component) 3 NumberInput (based on the list)
const CustomInput = () => (
<div>
<NumberInput source="foo" label="bar" />
<NumberInput source="foo2" label="bar2" />
<NumberInput source="foo3" label="bar3" />
</div>
);
I'd like to replace this 3 NumberInput to render them dynamically from my endpoint list.
How to do that with react-admin:
Call my endpoint to get the list
Use the list to loop and create NumberInput dynamically
Thanks ;)
react-admin is just a bunch of react components. You can do this like you would in any react applications. Call fetch on your API in your componentDidMount method for example.
and of course sorry if the question is somewhat dumb.
In the app I'm developing a user should be able to swipe on the TextInput. Since TextInput only listens to taps I used this gist: https://gist.github.com/MikeShi42/87b65984f0a31e38d553cc056fcda017
(BTW #Michael Shi thanks a ton)
However, once I changed TextInput to SlideTextInput the Clear button ceased to work.
clearInput() {
this.setState({text: ''});
}
render() {
return (
<Button name='clear' action={this.clearInput} />
<SlideTextInput
style={styles.input}
ref='input'
onChangeText={(text) => this.setState({text: text})}
placeholder={this.state.placeholder}
value={this.state.text}
multiline={true}
returnKeyType='done'
blurOnSubmit={true} />
)
}
I also tried this.refs.input.setNativeProps({text: ''}); instead of just passing a new value prop (that should be — and was — sufficient for normal TextInput), and calling forceUpdate(), but again to no avail. I don't see much changes in SlideTextInput.js compared to the original TextInput component, but I must be missing something that would explain such bad behaviour?
UPD: the answer was pretty simple in the end. Instead of linking the component to its native counterpart (ref={this._setNativeRef}) like original TextInput does, SlideTextInput has it ref'ed to a string (ref="input"). I changed it back and voila.
Looking at the code it seems that the value props is not being sent to the original TextInput. It is extending the TextInput but it is returning another component without sending the value prop.
Try:
this.refs.input.setText('');
The answer was pretty simple in the end. Instead of linking the component to its native counterpart (ref={this._setNativeRef}) like original TextInput does, SlideTextInput has it ref'ed to a string (ref="input") (it's not about props in my code it's about SlideTextInput.js file itself). I changed it back and voila.
I have a function that loops through and grabs the year of of a year property in an object. I'm trying to render it in the title prop of my list view but I get this error.
Error: raw text "1997" must be wrapped in an explicit <text> component
My function
renderRow = (year) => {
return (
<ListItem
key={year.id}
title={year.year}
onPress={() => this.props.dispatch(storeUserYear(year))}
underlayColor='#eceeef'
/>
)
}
I saw something similar on stackoverflow but it had to do with whitespace React Native error: Raw " " must be wrapped in an explicit <Text> Component
How do I get rid of this error?
Thanks!
The error is in your ListItem component, not here. Make sure the year is wrapped in a <Text>...</Text> wherever you're calling props.title.