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>
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 want to display an array as a string which is seperated by commas in react native. This is my code.
let currentWorkout = this.props.currentWorkout;
// tools is an array. want to display it as valueOne, valueTwo, valueThree etc.
let tools = JSON.stringify(currentWorkout.tools);
return (
<View style={styles.container}>
<WorkoutDetail
workout={this.props.currentWorkout}
workoutImage={currentWorkout.workoutImage}
onPressWorkout={() => alert("CONTINUE WORKOUT")}
/>
<View style={styles.workoutInfo}>
<KeyValueText header="Tools" value={tools} /> ////
</View>
</View>
How can I achieve this?
You could do
let tools = currentWorkout.tools.join(', ');
instead of JSON.stringify and I think you'll got the results you want.
Check the documentation for the join method.
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
<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.
I have an issue in my app with TextInput for a bank card numbers digit (error because user not type all number 16 digits).
So I would like to cut CB number on 4 TextInputs and focus automatically on next field after filled the 4 digits. (as already seen it in the web app)
But when I focused the next field, the current became empty, even if the state is correctly set.
Do you have an idea about how can I do that or is it impossible ?
ie. see the onChangeText on this example (exp date actually) :
<TextInput
ref='card_exp_date_mm'
style={[styles.inputTxt, {width: 30, flex: 0}]}
value={this.state.cardExpDateMonth}
keyboardType='numbers-and-punctuation'
placeholder='MM'
returnKeyType='next'
clearTextOnFocus={false}
autoCorrect={false}
placeholderTextColor={Constants.placeholderTextColor}
maxLength={2}
enablesReturnKeyAutomatically={true}
blurOnSubmit={false}
onChangeText={text => {
this.setState({cardExpDateMonth: text})
//console.log('onChangeText', this.refs.card_exp_date_mm)
if(text && text.length == 2){
this.refs.card_exp_date_aa.focus();
}
}}
onSubmitEditing={()=>this.refs.card_exp_date_aa.focus()}/>
you could do something like in this example:
this.refs[nextField].focus()
You should really check this example out, it covers what you are searching for.