<Text>aircraft</Text>
I need to get aircraft in Text, and change the value of Text dynamically. How could I do?
You can access it like this (example: https://rnplay.org/apps/ACHJEQ)
<Text ref={(elem) => this.textElem = elem}>Hello world!</Text>
and then:
console.log('textElem content', this.textElem.props.children);
But you can't set it since it's a (read-only) prop.
Well... various ways to do this.
For example:
<Text>{this.state.aircraftText}</Text>
and then just change the state variable. You could also implement it sth like:
<Text>{ (this.state.checkIfTrue) ? 'Boeing787' : 'Airbus 320' } </Text>
this checks if this.state.checkIfTrue results to true and displays either 'Boeing787' or 'Airbus 320'.
This should give you a first idea.
Related
I have a TextInput field that when a user is editing, they have the option to cancel. The goal is to revert the TextInput value back to the original value before the user started editing, however, even though the previous value is stored and the screen is re-rendering, the text on the screen stays however the user left it. I'm assuming I'm just misunderstanding how the TextInput component works.
This is the input in question:
<TextInput
style={styles.workoutheader}
editable={editableWorkout == workout.id}
onChangeText={(workoutName) => setWorkoutName(workoutName)}
>
{workout.name}
</TextInput>
and this is the cancel button:
<TouchableOpacity
style={styles.workoutheadericon}
onPress={() => {
console.log('Reverting to: ' + prevWorkoutName, prevWorkoutType, prevWorkoutWeight, prevWorkoutReps);
setWorkoutName(prevWorkoutName);
setWorkoutType(prevWorkoutType);
setWorkoutWeight(prevWorkoutWeight);
setWorkoutReps(prevWorkoutReps);
setEditableWorkout('');
setIsEditing(!isEditing);
setActionCounter(actionCounter + 1);
}}
>
{workout.name} is coming from a firestore database, but I don't think that's related.
I don't think the variable workout gets updated when you call setWorkoutName, try replacing {workout.name} with workoutName or whatever variable name you used where you declared your useState function that created the setWorkoutName setter function, e.g.
const [workoutName, setWorkoutName] = useState(workout.name)
return (
<TextInput
style={styles.workoutheader}
editable={editableWorkout == workout.id}
onChangeText={(workoutName) => setWorkoutName(workoutName)}
>
{/* should be `workoutName` here, not `workout.name` */ workoutName}
</TextInput>
)
SOLUTION
I needed to target the workout being edited with
editableWorkout == workout.id ? workoutName : workout.name} which let me differentiate between the workouts using Leon Si's answer.
I insert dropdown list component from extra file
"<Option_Gender />""import Option_Gender from "../components/OptionBar/Option_Gender";"
like this.
I only know to return value for TextInput:
<TextInput
placeholder = "Name:"
value = {name}
onChangeText = {(text) => setName(text)}
style = {styles.BlockStyle}
placeholderTextColor= 'grey'
/>
But I don't know how to return value for this optionbar...
I have tried to return value in the Option_Gender file directly but it seems will cause a conflict...
I can only solve it by directly copying the code in Option_Gender to this page...Hope to have it this way because it puts the option function in a separate file.
I have a field where I only want the length to be 3 numbers long max. I am using Yup, however, it only notifies the user of the error, it doesn't stop the user from entering a number longer than desired.
To fix this I created a function that slices the input value. This looks like it works, it keeps the length in the form field to what I want, however, when I click submit the value for the field is the unsliced version.
Here is my code...
<TextInput
style={styles.text}
value={_checkLength(values.number, 3)}
onChangeText={handleChange('number')}
onBlur={() => setFieldTouched('number')}
placeholder="Number"
/>
My _checkLength function is simple...
_checkLength = (value, length) => {
return value.slice(0, length)
}
Why is this not working?
Leaving this answer so people can see how to use setFieldValue, but #Carlos had the correct and obvious answer. That is to simply use maxLength={num}
Credit to #MohammedAshfaq . His answer is correct but I wanted to provide exact code that needs to be updated. The answer was to run setFieldValue by putting it in the onChangeText field. I had to pass in the value and then run my function using that passed in value. Now, when I submit it submits the proper value returned from the _checkLength function.
<TextInput
style={styles.text}
value={values.number}
onChangeText={(value) => setFieldValue('number', _checkLength(value, 3))}
onBlur={() => setFieldTouched('number')}
placeholder="Uniform Number"
/>
I'm using react-native-simple-dialogs for taking confirm. but I have a problem and I don't know any solution for this. I trying to change the font family, and it doesn't change. what is the solution?
I don't know if you can give the right answer.
because you don't share the code, but I'll write down my answer on the assumption that you registered your custom font.
If you are trying to resolve something with one button, use the status value.
And it can be solved using the Conditional operator.
this.state = {
buttontext : "nomal"
}
<TouchableOpacity
style={styles.button}
onPress={this.onPress}
>
<Text style={{ fontFamily: this.state.buttontext == "positive" ? "customfont" : this.state.buttontext == "negative" ? "customfont" : "nomalfont"}}>
{this.state.buttontext}
</Text>
</TouchableOpacity>
I'm new to smartphone programming and have joined a project using React Native and NativeBase.
I'd like to include an image/icon in each Item in a Picker, which doesn't seem like an exotic concept, but it doesn't seem to be supported and I can't find anyone discussing doing it on SO or by Googling.
I've tried a couple ways of adding things inside the <Picker.Item> and </Picker.Item> but anything put there seems to simply be ignored.
Is it possible or is there a different approach to do what I want using these frameworks?
You can try this package
https://github.com/sohobloo/react-native-modal-dropdown
the complete example you can check here
https://github.com/sohobloo/react-native-modal-dropdown/blob/master/example/index.js
the use is something like this
_dropdown_2_renderRow(rowData, rowID, highlighted) {
let icon = highlighted ? require('./images/heart.png') : require('./images/flower.png');
let evenRow = rowID % 2;
return (
<TouchableHighlight underlayColor='cornflowerblue'>
<View style={[styles.dropdown_2_row, {backgroundColor: evenRow ? 'lemonchiffon' : 'white'}]}>
<Image style={styles.dropdown_2_image}
mode='stretch'
source={icon}
/>
<Text style={[styles.dropdown_2_row_text, highlighted && {color: 'mediumaquamarine'}]}>
{`${rowData.name} (${rowData.age})`}
</Text>
</View>
</TouchableHighlight>
);
}
the end product example is look like this :
all copyrights belongs to :
https://github.com/sohobloo