javascript - React Native parent view size is changing when adding a child view

Question

I have a settings for language selection in my app. As you can see below, when I choose another language, the row height of the selected language is increasing a little bit. I would like to keep it fixed, and choosing a language should not have an effect on the row height. How can I achieve this?

      <FlatList
        data={availableLanguages}
        ItemSeparatorComponent={this.renderSeparator}
        renderItem={({ item }) => {
          return (
            <TouchableOpacity onPress={() => this.onChangeLang(item)}>
              <View style={styles.flatlistItem} >
                <Text style={styles.languageListitem} >{t('settings:' + item)}</Text>
                {appLanguage === item ? <View style={styles.listIconRightEnd}><CheckActiveLightMode width={25} /></View> : null}
              </View>
            </TouchableOpacity>
          )
        }}
        keyExtractor={(item, index) => index}
      />

Styles:

  flatlistItem: {
    margin: 4,
    paddingLeft: 10,
    paddingVertical: 7,
    backgroundColor: '#FFF',
    width: '100%',
    flex: 1,
    alignSelf: 'center',
    flexDirection: 'row',
    borderRadius: 0,
  },

  languageListitem: {
    color: 'rgb(48,49,147)',
    fontSize: 16,
    paddingLeft: 10,
    flex: 1,
  },

  listIconRightEnd: {
    paddingRight: 20,
  },

Answer 1

Solved with maxHeight:

 listIconRightEnd: {
   paddingRight: 20,
   maxHeight: 10,
 },