CODEWITHSUNDEEP
react-native
Isaac David Chavez Perez
Isaac David Chavez Perez

Reputation: 145

react native, how to make a limited view by another view?

I have this problem and I have not been able to solve it, how can I make view 1 limited by view 2?

I need view 1 not to leave the edges of view 2, the image is on the outside, it should be cropped limited by view 2, I don't know if I make myself understood

enter image description here

<View style={styles.container}>
    <View style={styles.progressBar}>
      <Animated.View style={[styles.absoluteFill, { borderRadius: 30, backgroundColor: colors.blue2, width }]} />
    </View>
    <Text style={styles.progressText}>
      {`${progress}%`}
     </Text>
  </View>
  
  const styles = StyleSheet.create({
    absoluteFill: {
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        
    },
    progressText: {
        position: 'absolute',
        color: colors.white,
        fontFamily: "OpenSans-Regular"

    },
    container: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        height: 30,
        borderRadius: 30,
        
    },
    progressBar: {
        //alignSelf: 'baseline',
        height: 30,
        width: '100%',
        backgroundColor: colors.blue3,
        borderRadius: 30
    }
})

thank you

Upvotes: 2

Views: 77

Answers (1)

Deivison Sporteman
Deivison Sporteman

Reputation: 2382

You need to add an overflow: hidden at your progressBar style.

progressBar: {
      height: 30,
      width: '100%',
      overflow: 'hidden',
      backgroundColor: colors.blue3,
      borderRadius: 30
  }

I did this live demo for you: https://codesandbox.io/s/vibrant-fermi-49ztl?file=/src/App.js

Upvotes: 1

Related Questions