Good afternoon everyone, I am facing a problem using react-native-image-slider-box library
I want to show 2 banners at a time, and when I click on one it takes me to a place and when I click on another, it takes me to another place
But when I click on the second image it has the same index as the first so I can't differentiate the click to be able to take it to 2 different places, can someone help me with this problem?
<SliderBox
firstItem={0}
initialScrollIndex={0}
getItemLayout={(i, index) => ({
length: dimensions.width,
offset: dimensions.width * index,
index,
})}
itemWidth={dimensions.width}
sliderWidth={dimensions.width}
slideStyle={{ width: dimensions.width / 2}}
contentContainerCustomStyle={{
width: dimensions.width * banners.length / 2,
}}
inactiveSlideOpacity={1}
inactiveSlideScale={1}
sliderBoxHeight={100}
ImageComponentStyle={{ width: '95%', borderRadius: 5, marginTop:8, marginBottom: 8 }}
resizeMode="stretch"
images={banners}
imageLoadingColor="#fff000"
dotStyle={{
width: 0,
height:0,
}}
onCurrentImagePressed={onPress}
lockScrollWhileSnapping
ImageComponent={FastImage}
{...settings?.customProps}
/>
image showing when i click in a banner image and the index is the same
i tried to change the width properties, but no succes
i want to click on a image
Related
At this moment the library https://www.npmjs.com/package/#miblanchard/react-native-slider does not have a solution to be able to change the height of the left and right track of the thumb.
How to implement it?
I found a workaround:
The container in which the Slider is should have overflow style: "hidden"
I use renderThumbComponent to display the thumb left line to the left
renderThumbComponent={() => (
<>
<View style={styles.thickerLine} />
<View style={styles.thumb} />
</>
)}
I set the style for thickerLine to be as long as possible, so that it goes beyond the container.
thickerLine: {
position: "absolute",
top: 8,
right: 0,
backgroundColor: "blue",
height: 4,
width: window.width,
},
Yes, I know it's wild, but it works!
Right now, I am using the CountdownCircleTimer as my "progress bar", but need one that counts up instead of down.
It looks like this, with a touchable image button in the middle that starts a recording.
<CountdownCircleTimer
isPlaying={progressCircle}
size={74}
strokeWidth={5}
duration={60}
colors={[["#000000", .001], [feedScreen ? "#F777B1" : "#64A6EC", .999]]}
trailColor={"transparent"}
>
<TouchableOpacity
style={tw.style(`rounded-full overflow-hidden justify-center items-center`, {
width: 62,
height: 62,
backgroundColor: "#000000",
})}
onPress={(e) => onPress(e)}
>
{children}
</TouchableOpacity>
</CountdownCircleTimer>
I'm trying to implement the CircularProgress component, but it hides the image/button. The top is the old countdown timer in the picture above, the bottom is the new circular progress bar, hiding the image/button.
<CircularProgress
value={duration}
delay={progressCircle}
radius={37}
activeStrokeWidth={5}
activeStrokeColor={feedScreen ? "#F777B1" : "#64A6EC"}
textColor={'transparent'}
>
<TouchableOpacity
style={tw.style(`rounded-full overflow-hidden justify-center items-center`, {
width: 62,
height: 62,
backgroundColor: "#000000",
})}
onPress={(e) => onPress(e)}
>
{children}
</TouchableOpacity>
</CircularProgress>
How can I put the image and button in the middle, like I did with the countdown circular?
You will have to use some form of absolute positioning.
Add something like this to your circular progress bar styling:
position: 'absolute',
alignSelf: 'center',
bottom: 0
You can adjust the absolute positioning via the top, left, and right proeprties as well.
I have a ScrollView with some Views inside it, but I want to start an animation when the user gets to specific View and after it starts my animation.
Example:
<ScrollView style={{ width: DeviceWidth, height: DeviceWidth * 0.5 }}>
{/* When user position scroll is here,
is where I want to start the animation,
not since the page is loaded */}
<View style={{
width: DeviceWidth * 0.4,
height: DeviceWidth * 0.4,
resizeMode: "contain",
}}>
<ProgressBarAnimated
width={barWidth}
value={65}
backgroundColor="#F68D29"
height={40}
barAnimationDuration={6000}
/>
</View>
</ScrollView>
Instead of using a ScrollView you can instead use a FlatList, this gives you a lot more support for the type of indexing you're trying to do.
To detect when a user reaches a specific point you can use onViewableItemsChanged and the define which viewable items need to be on screen in order to trigger your animation.
FlatLists also support a number of build in animations like scrollToEnd or ScrollToIndex which may be helpful.
I want to make a little game when some circles comes from the top of the screen. After they appear they will drag down until they go out of the screen.
To make that i have a flatlist which contains all of the circles
<FlatList scrollEnabled={false}renderItem={this.renderItem}data={this.state.elements} />
Then in the render item I insert the circle item view
renderItem = ({item}) => (
<Circle
apparitionTime={new Date().getTime() / 1000}
id={item.id}
removeCircle={this.removeCircle}
updateScore={this.updateScore}/>
);
A circle item looks like this :
<Animated.View style={[/*this.moveAnimation.getLayout(),*/ styles.animatedView]}>
<TouchableOpacity style={styles.circleStyle} onPress={() => this.prepareToSend()}>
<View style={styles.absoluteView}>
</View>
<Image style={styles.image} source={require('../assets/images/music.png')}/>
</TouchableOpacity>
</Animated.View>
I use the animated view to make them scrolling all over the view.
I want the animated view to be on position absolute,but no matter what i've tried after sending the animated view to position absolute, the element disappear
animatedView: {
top: 0,
zIndex: 100,
width: 75,
height: 75,
position: "absolute", // does not work
},
Any Ideas ? Thank you
Position absolute didn't work inside a flatlist.
Now how to render positional elements inside it !!!!!!!....
Alternatively, you can use alignSelf: 'flex-end' or alignSelf:
'flex-start' and further you can place it by using margin/padding
inside the view. More you can read here about absolute not working in
their official docs
I'm trying to create a chat view in React Native similar to the Whatsapp UI.
What I can't wrap my head around is - how to do the time. Here is how it looks in Whatsapp:
Notice that the time is not on a completely new line by itself, but half a line.
At the same time in the last comment you can see that if the text is long enough, the time is being pushed to a new line.
I've tried several things:
Make the bubble relative and then use absolute positioning on the time element. Unfortunately if the text is long enough my time overlaps the text.
Make the bubble flexDirection: "row", and then have the text in 1 view and the time in another view. But I can't figure out how to force a wrap when the text is "long enough".
Any ideas how to achieve this?
I managed to kind of get what I want. It's not 100% the same as whatsapp, but good enough.
I had the following code:
<View style={{
margin: 10, marginTop: 10, marginBottom: 0,
padding: 10, borderRadius: 5, paddingBottom: 10,
backgroundColor: cropType ? '#93D14C' : '#F1F0F5'
}}>
{this.renderContent(comment)}
<Text
style={[styles.muted,
{
color: constants.FJMUTEDLIGHT,
backgroundColor: 'transparent',
alignSelf: 'flex-end',
fontSize: 12,
marginBottom: -5,
marginTop: 2
}]}>{moment.utc(comment.created).local().format('HH:mm')}</Text>
</View>
The renderContentHere() function can render Text, but it also can render a complex View containing text. Initially I wanted to figure out how many lines a text has and to figure the width of the lines. This doesn't seem to be possible with React Native since the onLayout property on a Text node can only tell you the width and height of the element, but not if the Text is 2 lines or 3 lines.
So I decided to just measure the View that contains the comment and figure out if it has one or more lines. If it has one line I'm assuming that I can place the time a little higher than normally.
This is what I ended up doing:
<View style={{
margin: 10, marginTop: 10, marginBottom: 0,
padding: 10, borderRadius: 5, paddingBottom: 10,
backgroundColor: cropType ? '#93D14C' : '#F1F0F5'
}}>
<View style={this.state.oneLine ? {
// Since we don't know how long the one line is, just in case add 25px padding on the right
// this way even if we are dealing with a long line of text it won't end up over the time
paddingRight: 25
} : {}}
onLayout={(e) => {
let {height} = e.nativeEvent.layout
// if height is less than 30px, then we are dealing with a single line of content
if (height < 30) {
this.setState({'oneLine': true})
}
}}>
{this.renderContent(comment)}
</View>
<Text
style={[styles.muted,
{
color: constants.FJMUTEDLIGHT,
backgroundColor: 'transparent',
alignSelf: 'flex-end',
fontSize: 12,
marginBottom: -5,
// If one line, move the time up - there is enough space
marginTop: this.state.oneLine ? -10 : 2
}]}>{moment.utc(comment.created).local().format('HH:mm')}</Text>
</View>
If we have a single line it still possible that the text will end up behind the time, so that's why I'm applying a right padding on the Text of 25 px. This breaks long lines and we end up with a view like this: