# Display Text when swipe card like tinder

[safalpatel-nl]

Hi ,

I Used this library i want to display text when card swipe like tinder show. Help!!!!!!!!

[saibendalam]

have you found any solution for that?

[safciplak]

+1 ? any solution?

[georgeMorales]

anyone?

[joego2124]

I managed to recreate the tinder effect by adding in animated views for the text inside of the CardStack.js's render() function where it creates the 2 animated views for the two visible cards.

Example for cardB: <Animated.View {...this._setPointerEvents(topCard, 'cardB')} style={{//...styles}}> {cardB} {(topCard === 'cardB') ? likeLabel : null} {(topCard === 'cardB') ? nopeLabel : null}

And here's a text label component example: const likeLabel = <Animated.View style={{ transform: [{ rotate: "-22.5deg" }], opacity: likeOpacity, position: "absolute", top: '10%', left: '10%', zIndex: 1000 }} > <Text style={{ backgroundColor: 'dodgerblue', color: "white", fontSize: 48, fontWeight: "200", paddingHorizontal: 10, paddingVertical: 5, borderRadius: 15, overflow: 'hidden', }} >Y E S</Text> </Animated.View>

Here's how I'm setting the opacity: const likeOpacity = drag.x.interpolate({ inputRange: [-width / 3, width * .025, width / 3], outputRange: [0, 0, 1], extrapolate: 'clamp', });

This is all inside of the render() function, hope it helps!

[georgeMorales]

And put a cardIndex props? It would be very good to be able to control the index...

[joego2124]

I'm pretty sure that CardStack keeps track of the index internally (same index as the array of child card components), you can create additional wrapper functions around the existing functions (goBack, etc) to jump to a card with a specific index.

[georgeMorales]

@joego2124 True, I've been testing this morning, sindex is one of them ... Thank you!

[denisonfer]

I managed to recreate the tinder effect by adding in animated views for the text inside of the CardStack.js's render() function where it creates the 2 animated views for the two visible cards.

Example for cardB: <Animated.View {...this._setPointerEvents(topCard, 'cardB')} style={{//...styles}}> {cardB} {(topCard === 'cardB') ? likeLabel : null} {(topCard === 'cardB') ? nopeLabel : null}

And here's a text label component example: const likeLabel = <Animated.View style={{ transform: [{ rotate: "-22.5deg" }], opacity: likeOpacity, position: "absolute", top: '10%', left: '10%', zIndex: 1000 }} > <Text style={{ backgroundColor: 'dodgerblue', color: "white", fontSize: 48, fontWeight: "200", paddingHorizontal: 10, paddingVertical: 5, borderRadius: 15, overflow: 'hidden', }} >Y E S</Text> </Animated.View>

Here's how I'm setting the opacity: const likeOpacity = drag.x.interpolate({ inputRange: [-width / 3, width * .025, width / 3], outputRange: [0, 0, 1], extrapolate: 'clamp', });

This is all inside of the render() function, hope it helps!

have one code link, i am newbie.. i am trying too... thx