I want to create a carousel like the one shown below. The center item will have a higher elevation to indicate that this is the current item and whenever the user scrolls, the next item will be elevated and so on. The center item will be overlapping the left and the right item. I tried to use react-native-snap-carousel with the stack option, but that only shows the left item and in case of ios, only the right item. I tried tinder, but that is quite same as well. I tried default, but there are gaps in between each item which I do not want. I tried react-native-anchor-carousel. But, this makes the center item transparent for some reason.
<Carousel
style={styles.carousel}
data={review}
renderItem={renderitem}
itemWidth={240}
activeSlideAlignment="center"
sliderWidth={windowWidth - 20}
separatorWidth={-100}
itemContainerStyle={{
alignItem: 'center',
marginTop: 18,
}}
inActiveOpacity={0.1}
ref={carouselRef}
loop={true}
/>
Render Item is below
const renderitem = ({item}) => {
return (
<View
style={[styles.item]}
onPress={() => {
this._carousel.scrollToIndex(index);
}}>
<View style={styles.circle}>
<Image
style={styles.image}
source={{uri: item.serviceImage}}
resizeMode="cover"
/>
</View>
<Text style={styles.serviceNameText}>{item.serviceName}</Text>
<Text style={styles.name}>{item.reviewerName}</Text>
<Text style={styles.content}>{item.content}</Text>
</View>
);
};
Related
In my app i'm using ScrollView for showing images. Below my ScrollViewcomponent i have two buttons like prev and next. I want to add custom pagination with the buttons. Also my images are coming from an array in a loop. I want 4 images to show at a time. So, the next button should show next 4 images if there are any and prev button should take 4 previous images if there are any. My ScrollView is currently like this:
<View>
<View style={{width:width,paddingHorizontal:10,paddingVertical:20}}>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false} >
{list.map((item, i)=>(
<Image key={i} source={{uri: item}}
style={{width: 80, height: 80,marginLeft:5}} />
)
)}
</ScrollView>
</View>
</View>
Below this i have two buttons.I have created two different fuctions for those. Here's what it's like now:
<View>
<Button
title="Prev"
color="#841584"
onPress={handleClickBackward}
/>
</View>
<View>
<Button
title="Next"
color="#841584"
onPress={handleClickForward}
/>
</View>
How can i manipulate with my list array so that the custom pagination works. I have tried array slice method on next but it removes the first images and i don't find those after pressing prev button.
you can use onNextPress function and add ref in scrolview
const scrollRef = useRef<ScrollView>();
const onNextPress = () => {
scrollRef.current?.scrollTo({
y : 0,//you must increase x or y
animated : true
});
}
return (
<View style={{width:width,paddingHorizontal:10,paddingVertical:20}}>
<ScrollView
ref={scrollRef}//ref
horizontal={true}
showsHorizontalScrollIndicator={false} >
{list.map((item, i)=>(
<Image key={i} source={{uri: item}}
style={{width: 80, height: 80,marginLeft:5}} />
)
)}
</ScrollView>
</View>
);
Kind of surprised at the lack of information I can find about this question, feel like its something that you be done pretty often? I know with a standard dropdown it's pretty easy, you set up a hook that controls state with a boolean, when that boolean is true, you show the dropdown, when it's false, you show the closed version.
The Issue that I discovered when trying to do this with each render item is that the hook state control needs to be in the global context, because of this whenever you click on Flatlist item, all of the items open because they are all using the same state control. How would you make it so that each rendered item has its own dropdown state when you can't set a state hook inside each render item?
Here's my code to give you a better idea of what I'm talking about, be sure to read the comments:
<FlatList
contentContainerStyle={{ alignItems: 'center', marginVertical: 10, minHeight: 200 }}
data={notes}
keyExtractor={(item, index) => item.key}
ListFooterComponent={() => <AddNoteFooter onPress={addSpecificNote} />}
renderItem={({ item }) => {
//would need something similar to a hook right here,
// to manage the state of each item individually
//change "isOpen" state when button is pressed
return (
<View>
{!isOpen &&
<TouchableOpacity onPress={null} style={styles.flastliststyle}>
<Text style={styles.flastlistItemText}>{item.note}</Text>
</TouchableOpacity>
}
{isOpen &&
<TouchableOpacity>
/* extended dropdown code */
</TouchableOpacity>
}
</View>)
}
Looking to do something similar to this video but where each item is a flatlist item (also using hooks):
https://www.youtube.com/watch?v=awEP-pM0nYw&t=134s
Thank you!
SOLUTION:
flatlist:
<FlatList
contentContainerStyle={{ alignItems: 'center', marginVertical: 10, minHeight: 200 }}
data={notes}
keyExtractor={(item, index) => item.key}
ListFooterComponent={() => <AddNoteFooter onPress={addSpecificNote} />}
renderItem={({ item }) => {
return (
<NoteItem noteitem={item} />
)
}}
/>
then the component rendered for each item:
const NoteItem = (props) => {
const [isOpen, updateDrop] = useState(false)
return (
<View>
{!isOpen &&
<TouchableOpacity onPress={() => updateDrop(prev => !prev)} style={styles.flastliststyle}>
<Text style={styles.flastlistItemText}>{props.noteitem.note}</Text>
</TouchableOpacity>
}
{isOpen &&
<TouchableOpacity onPress={() => updateDrop(prev => !prev)} style={styles.flastliststyle}>
<Text style={styles.flastlistItemText}>pressed</Text>
</TouchableOpacity>
}
</View>
)
}
I have a 'touchableOpacity' where each time its pressed it shows the selected value, but when a value is selected every item gets that value.
I need to do it this way:
item 1 -> selectedValue3
item 2 -> selectedValue1...
{ this.state.proyectosConTodo.map((item,index)=>{ return (
<View style={{paddingBottom:12}}>
<Grid>
<Col>
<View style={{height:40,justifyContent: 'center'}}>
<Text numberOfLines={1} allowFontScaling={false} style={{color: '#45526e',fontFamily: 'Roboto-Regular',fontSize:15, alignSelf: 'flex-start'}}>{item.proyecto.titulo}</Text>
</View>
</Col>
<Col>
<TouchableOpacity style={{ height:40,borderWidth:1, borderRadius:4, borderColor: '#e0e4eb', justifyContent: 'center',backgroundColor: '#f3f4f6'}} onPress={()=>{ this.setAgentesReasignarEnviar(item,index) }}>
<Text allowFontScaling={false} style={{color: '#45526e',fontFamily: 'Roboto-Medium',fontSize:15, marginLeft:10,marginRight:10}}>{this.state.txt_agenteProyecto}</Text>
<Icon style={{position: 'absolute',top:13,right:10}} name={ 'chevron-down'} size={10} color={ '#45526e'}/>
</TouchableOpacity>
</Col>
</Grid>
</View>
) }) }
From your snippet it seems that your structure is that one screen with a FlatList or something similar that renders multiples of your TouchableOpacity components. The problem is that every time a single TouchableOpacity is clicked it changes the state of the screen(not just itself) causing all touchable opacities to have that value.
One possible solution is the create another component which renders your list item and has its own state. The item used to render it can be passed as a prop and then calling setState inside that component will not affect the other list items.
I think this is what you need:
setAgentesReasignarEnviar(item, index) {
const result = this.state.proyectosConTodo.map(() => return item);
this.setState({
proyectosConTodo: result
});
}
For more detail, check this out: How to replace all undefined values in an array with "-" ?
The search is perfect and it's all looks fine, but gets this warning.
I get this warning when I press any key to start the search method.
"Song_ID", "Song_Name" and "Image" are of the variable names from the SQL Database.
- I looked on other question as this, but it didn't help me at all.
This is the code where the error is :
return (
<View>
<ScrollView>
{musicList.map(songObj => {
return (
<View style={styles.resultsContainer}> /// Its written that the erorr in this line
<TouchableOpacity onPress={this.GetListViewItem.bind(this, songObj.Song_Name)}>
<Text style={{ fontSize: 16 }} key={songObj.Song_ID}>
{songObj.Song_Name}</Text>
<Image source={{ uri: songObj.Image }} style={styles.img} />
</TouchableOpacity>
</View>
);
})}
</ScrollView>
</View>
);
}
I don't understand where to put the key and/or what does it mean, I tried so many times but it didn't went well.
If more details is needed please tell me and I'll insert the right code.
You should add the key onto the outermost component inside the map. In your case, this is the View. Try this:
return (
<View>
<ScrollView>
{musicList.map(songObj => {
return (
<View style={styles.resultsContainer} key={songObj.Song_ID}>
<TouchableOpacity onPress={this.GetListViewItem.bind(this, songObj.Song_Name)}>
<Text style={{ fontSize: 16 }}>
{songObj.Song_Name}</Text>
<Image source={{ uri: songObj.Image }} style={styles.img} />
</TouchableOpacity>
</View>
);
})}
</ScrollView>
</View>
);
}
Adding the key prop lets react optimize rendering which is why it recommends you add it. Read the docs for more info.
I wanted to update the List based on the 'address' and attach more
codes to it.
I wanted to update the existing Flistlist that is already populated with new incoming data
ANSWER: I got it now. I need to update my list using state change and FlatList Renders my list as new list everytime I update it, therefore data will remain updated everytime.
like:
if(address=='xyz')
{ code= code+newCode; }
<FlatList
extraData={this.state}
data={this.state.TESTDATA}
keyExtractor={(item, index) => item.Code.toString()}
renderItem={({ item}) => (
<TouchableOpacity
onPress={() => console.log('pressed TouchableOpacity')}
style={{
height: 75,
}}
>
<View style={styles.listItem}>
<Text style={styles.baseText}>
Stop Address: {item.Address}{'\n'}
codes: {item.Code}
</Text>
</View>
</TouchableOpacity>
)}
/>