Centering container but not the components inside the container RN

user_6754598 0
Viewed 37

I've applied the correct css attributes to center the container but the container is still not centering. Specifically justifyContent and alignItems. I don't want to center the stuff inside but just the container. How can I achieve this?

function CardLesson({title, description}){
  return <View style={styles.cardLesson}>
    <LinearGradient
          colors={['rgba(0,0,0,0.1)', 'transparent']}
          style={{
            position: 'absolute',
            left: 0,
            borderRadius: 10,
            right: 0,
            top: 0,
            height: 10,
          }}
        />
    <Text style={styles.title}>{title}</Text>
    <Text>{description}</Text>
  </View>
}

cardLesson: {
    flexDirection: 'column',
    height: '30%',
    borderRadius: 10,
    marginVertical: 10,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'lightblue',
    width: '80%',
  }

enter image description here

react-native
2 Answers

Change your code like below, that solve your issue,

function CardLesson({title, description}){
      return <View 
    style={{display:'flex',
    alignItems: 'center',
    justifyContent:'center'
    }}>
    <View style={styles.cardLesson}>
        <LinearGradient
              colors={['rgba(0,0,0,0.1)', 'transparent']}
              style={{
                position: 'absolute',
                left: 0,
                borderRadius: 10,
                right: 0,
                top: 0,
                height: 10,
              }}
            />
        <Text style={styles.title}>{title}</Text>
        <Text>{description}</Text>
      </View>
    </View>
    }
    
    cardLesson: {
        flexDirection: 'column',
        height: '30%',
        borderRadius: 10,
        marginVertical: 10,
        backgroundColor: 'lightblue',
        width: '80%',
      }
user_119110620

Try by adding this :

cardLesson: {
    flex:1,
    flexDirection: 'column',
    height: '30%',
    borderRadius: 10,
    marginVertical: 10,
    alignSelf: 'center',

    backgroundColor: 'lightblue',
    width: '80%',
  }

Hope it helps. feel free for doubts

user_113553030
Related