I tried to get only first element [0] of array and print in UI.
I will get only first lesson in the array and then print.
{route.params.Lessons.map((lessons) => {
return (
<View>
<Text style={styles.lessonTitle}>Lesson 1</Text>
<Text style={styles.lessonDescription}>{lessons.lessonName}</Text>
</View>
)
})}
Thanks
You could use something like this code:
<View>
<Text style={styles.lessonTitle}>Lesson 1</Text>
<Text style={styles.lessonDescription}>{route.params.Lessons[0].lessonName}</Text>
</View>
If you only want to display only one element of array, you don't need to use the .map() function
You can try this instead
const lesson1 = route.params.Lessons[0]
return (
<View>
<Text style={styles.lessonTitle}>Lesson 1</Text>
<Text style={styles.lessonDescription}>{lesson1.lessonName}</Text>
</View>
)
Simply solved!
const LessonList = route.params.Lessons;
return (
<View>
<Text style={styles.lessonTitle}>Lesson 1</Text>
<Text style={styles.lessonDescription}>{Lessons[0].lessonName}</Text>
</View>
)
I hope you find an answer :D
Related
As I have multiple data that need to be display in the screen that will exceed the screen limit and I cannot scroll down to look at the other data. I researched and found that SafeAreaView and FlatList helps in solving the issue.
I tried to apply to my code:
<SafeAreaView style = {styles.container}>
<FlatList>
<Text style = {styles.header}>{paramKey} results:</Text>
{
todoData.map((item,index) => {
return(
<View key ={index}>
<Text style ={styles.text}>{item.Halal}</Text>
<Text style ={styles.text}>{item.OH}</Text>
<Text style ={styles.text}>{item.Description}</Text>
<Text style ={styles.text}>{item.Location}</Text>
</View>
)
})
}
</FlatList>
</SafeAreaView>
After applying, my data cannot be displayed anymore. So I referred to the document: https://reactnative.dev/docs/flatlist
It seems like <FlatList> ends with /> and not <FlatList> ends with </FlatList>.
Example from the docs:
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={({item}) => <Item title={item.title} />}
keyExtractor={item => item.id}
/>
</SafeAreaView>
I tried ending <FlatList> with /> but it seems to be a syntax error in my IDE (Visual Studio code). How do I properly use <FlatList> in this case?
Flatlist do not accept children prop. Use renderItem prop instead:
<SafeAreaView style = {styles.container}>
<Text style = {styles.header}>{paramKey} results:</Text>
<FlatList
data={todoData}
renderItem={({ item }) => (
<View>
<Text style ={styles.text}>{item.Halal}</Text>
<Text style ={styles.text}>{item.OH}</Text>
<Text style ={styles.text}>{item.Description}</Text>
<Text style ={styles.text}>{item.Location}</Text>
</View>
)}
/>
</SafeAreaView>
I am trying to diplay a specific value from the render method in flatlist but when i use {item.Name[0]} it shows me all the first letters from all the Name values but i want the whole first Name.
return (
<View style={styles.container}>
<FlatList
horizontal
data={this.state.data}
renderItem={({ item,index }) => (
<View style={styles.card_template} >
<View style={styles.text_container}>
<Text style={styles.card_title}>{item.Name[1]}</Text>
<Text style={styles.card_subtitle}>{item.Phone} </Text>
</View>
</View>
)}
/>
</View>
);
}
}```
After the alert on markerClick do this:
var temp = this.state.data.filter(x=> x.Name != marker.Name);
temp.unshift(marker);
this.setState({data:temp});
And on the renderitems just use item.Name
You are moving the selected marker to the first place in the array and selected item will be always on top
I think Problem is resolved if you following solution:
<Text style={styles.card_title}>{item.Name}</Text>
then try.
I have created an autoconplete search field which displays the places using mapbox API. I am using the ListView for sugesstions list. when list appears and I tap on the address i need to select, on the first tap keyboard hides and onPress works in the second tap.
I am trying to figure out what's wrong.
<View style={styles.container}>
<View style={styles.searchContainer}>
<View style={styles.mapMarkerContainer}>
{mapMarkerIcon}
</View>
<View style={styles.inputContainer}>
<TextInput
style={styles.textinput}
onChangeText={this.searchLocation}
placeholder="Type your address here"
underlineColorAndroid='rgba(0,0,0,0)'
value={this.state.inputVal}
placeholderTextColor="#fff"
/>
</View>
</View>
<View keyboardShouldPersistTaps='always' style={styles.listViewContainer}>
<ListView
dataSource={ds.cloneWithRows(this.state.searchedAdresses)}
renderRow={this.renderAdress}
style={styles.listView}
renderSeparator={this.renderSeparator}
enableEmptySections
/>
</View>
</View>
renderAddress
renderAdress = (address) => {
return (
<TouchableOpacity onPress={() => this.onListItemClicked(address)} style={styles.listItem}>
<View>
<Text>{address.place_name}</Text>
</View>
</TouchableOpacity>
);
};
onListItemClicked
onListItemClicked= (address) => {
this.props.onAddressGet(address);
console.log(address);
this.setState({
searchedAdresses: [],
inputVal: address.place_name
});
}
You should move the keyboardShouldPersistTaps-property to the ListView as it is a property from ScrollView and will be inherited to ListView:
Instead of
<View keyboardShouldPersistTaps='always'
<ScrollView ...>
You need:
<View
<ScrollView keyboardShouldPersistTaps='always' ...>
https://facebook.github.io/react-native/docs/scrollview.html#keyboardshouldpersisttaps
I am developing an App using react native. I want to pass a parameter to a function in my flatlist for a specific record. But, the flat list ignore this line of code:
onPress={ () => {console.log("TEST1"); this.onPressTopUp()} } />
Here is my code:
<FlatList
ItemSeparatorComponent={ () => <View style={ styles.rowSep } /> }
horizontal={false}
data={this.state.result}
renderItem={
({item}) => (
<View style={styles.containerrow}>
<View style={styles.viewPark}>
<Text style={styles.itemBold}> {I18n.t('Data_e_ora_inizio')}:
<Text style={styles.itemNormal}>{item.start}</Text></Text>
<Text style={styles.itemBold}> {I18n.t('Data_e_ora_termine')}:
<Text style={styles.itemNormal}>{item.end}</Text></Text>
<Text style={styles.itemBold}> {I18n.t('Energia')}: <Text style={styles.itemNormal}>{item.energy_delivered}</Text></Text>
<Text style={styles.itemBold}> {I18n.t('Colonna')}: <Text style={styles.itemNormal}>{item.column_id}</Text></Text>
<Text style={styles.itemBold}> {I18n.t('Costo_della_ricarica')}:
<Text style={styles.itemNormal}>€ {item.amount}</Text></Text>
<Text style={styles.itemBold}> {I18n.t('Aggiornamento_del')}:
<Text style={styles.itemNormal}>{item.last_update}</Text></Text>
</View>
<View style={styles.rowCenter}>
<Button label={I18n.t('Via_questa_ricarica')} color={defStyleValues.RechargeElectricCar} onPress={ () => {console.log("TEST1"); this.onPressTopUp()} } />
</View>
</View>
)
}
keyExtractor={item => item.id}
/>
Also here is my function:
onPressTopUp(columnID){
console.log("TEST2, ", columnID);
}
In other words, My problem is that I need to pass columnID of each specific row to the onPressTopUp(columnID) function in the FlatList. I checked the console log, even it dose't show both TEST1 and TEST2. Can you help me to do that?
Just use Arrow Function , it will take care of binding.
your function is :-
onPressTopUp(columnID){
console.log("TEST2, ", columnID);
}
Replace with Arrow Function :- and it will work for you.
onPressTopUp = (columnID) => {
console.log("Test, ", columnID);
}
and change your label Property with title inside your Button
You can use Button like this below :-
import { Button } from 'react-native';
...
<Button
onPress={onPressLearnMore}
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
I think the problem is you had not bind the onPressToUp function, try this:
onPressTopUp = (columnID) => {
console.log("Test, ", columnID);
}
Is Button component imported from React Native? Because react native Button component doesn't have label property.
Did you try call function with column id like this this.onPressTopUp(15).
Hope this help.
Hello I have this Lisview and on the renderRow I have this return statement :
<TouchableHighlight onPress={this._onPressWidget(rowData)}>
<View>
<View style={style}>
<Text style={styles.text}>
{rowData}
</Text>
</View>
</View>
</TouchableHighlight>
The thing is that the onPress function is launched automatically without pressing the button. Can anyone tell me why is that? I'm doing this with react native
Thank you in advance!
You are calling the _onPressWidget during rendering. What you need to do is pass a callback function that calls it, once the callback executes.
<TouchableHighlight onPress={() => this._onPressWidget(rowData)}>
seriously save my hours!! thx a lot.
I should share the tips here:
let returnView = this.props.item.map((v,i ) => {
return <TouchableHighlight onPress={() => this._fireEventToParent(v.id)}>
<View style={ListItemStyles.liPiece}>
<Image style={[ListItemStyles.liPieceImage} source={{uri: v.itemImage }} />
<Text style={ListItemStyles.liPieceTxt}>{v.itemName}</Text>
</View>
</TouchableHighlight>;
});
only map can work here, I tried forEach, cannot work.