0

I am using react-native-snap-carousel.

How can I have the text on the image?

        <View style={styles.item}>
          <ParallaxImage
            source={{ uri: item.illustration }}
            containerStyle={styles.imageContainer}
            style={styles.image}
            parallaxFactor={0.35}
            {...parallaxProps}
          />
        </View>
        <View style={styles.textContainer}>
          <Text styke={styles.title}>{item.title}</Text>
          <Text style={styles.subtitle}>{item.subtitle}</Text>
        </View>

Styles:

const styles = StyleSheet.create({
  item: {
    width: screenWidth - 60,
    height: screenWidth - 250
  },
  imageContainer: {
    flex: 1,
    marginBottom: Platform.select({ ios: 0, android: 1 }), // Prevent a random Android rendering issue
    backgroundColor: 'white',
    borderTopLeftRadius: 5,
    borderTopRightRadius: 5
  },
  image: {
    ...StyleSheet.absoluteFillObject,
    resizeMode: 'cover'
  },
  textContainer: {
    justifyContent: 'center',
    paddingTop: 20 - 8,
    paddingBottom: 20,
    paddingHorizontal: 16,
    borderBottomLeftRadius: 5,
    borderBottomRightRadius: 5,
    backgroundColor: colors.gray3
  },
  title: {
    color: colors.black,
    fontSize: 13,
    fontWeight: 'bold',
    letterSpacing: 0.5
  },
  subtitle: {
    marginTop: 6,
    color: colors.gray,
    fontSize: 12,
    fontStyle: 'italic'
  }
});
Alvin
  • 8,219
  • 25
  • 96
  • 177

2 Answers2

2

Add a bottom of a value such as

 return (
      <View style={styles.item}>
        <ParallaxImage
          source={item.thumbnail}
          containerStyle={styles.imageContainer}
          style={styles.image}
          parallaxFactor={0.4}
          {...parallaxProps}
        />
        <View style={{bottom: 40}}>
        <Text style={{color:'white', fontSize: scale(20), }}>
          {item.title}
        </Text>
        </View>

      </View>
Justin Priede
  • 444
  • 6
  • 30
1

Could you try this?

        <View style={styles.item}>
          <ParallaxImage
            source={{ uri: item.illustration }}
            containerStyle={styles.imageContainer}
            style={styles.image}
            parallaxFactor={0.35}
            {...parallaxProps}
          />
          <Text styke={styles.title}>{item.title}</Text>
          <Text style={styles.subtitle}>{item.subtitle}</Text>
        </View>
....
            <Carousel
                ...
                itemWidth={screenWidth - 60}
            />
...
 item: {
    width: screenWidth - 60,
    height: screenWidth - 60
  }
hong developer
  • 13,291
  • 4
  • 38
  • 68