Реагировать на родной, трансформировать текст для поворота i

Я должен повернуть текст, чтобы он мог выглядеть так, но он не идет в одну строку, как на изображении 2, я пробовал много вещей, чтобы решить эту проблему, но ничего не получилось.

Я могу повернуть его, но он не идет в одну линию

Я пробовал много вещей, но все равно получаю тот же результат, ниже мой код

 <FlatList
    data = {this.state.coupons}
    keyExtractor = {(coupons) => coupons.id.toString()
    renderItem = {({item}) => (
        <View style = {styles.couponContainer}>
          <View
            style = {{
            width: moderateScale(56),
                    backgroundColor: item.colors,
           }}>
           <Text
              style = {{
                     ...commonStyles.fontSize16Med,
                      color: colors.white,
                      transform: [{rotate: '270deg'}],
                      marginTop: moderateScaleVertical(20),
                      height: 56,
            }}>
            {strings.DISCOUNT}
            </Text>
            <View style = {styles.circle}></View>
            </View>
             <View>
              <View style = {{flexDirection: 'row'}}>
               <Image
                source = {item.icon}
                style = {{
                        marginLeft: moderateScale(16),
                        marginTop: moderateScale(16),
                      }}
                />
           <Text
             style = {{
                        ...commonStyles.fontsize14,
                        color: colors.blackM,
                        marginLeft: moderateScale(10),
                        marginTop: moderateScaleVertical(20),
                        marginRight: moderateScale(115),
                }}>
                 {item.text}
                </Text>
                  </View>
                  <View
                    style = {{
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                    }}>
                    <View>
                      <Text
                        style = {{
                          ...commonStyles.fontSize14Med,
                          color: colors.blackM,
                          marginLeft: moderateScale(16),
                          marginTop: moderateScaleVertical(25),
                        }}>
                        {strings.EXPIRES}
                      </Text>
                      <Text
                        style = {{
                          ...commonStyles.fontSize14Bold,
                          marginLeft: moderateScale(16),
                          marginTop: moderateScaleVertical(5),
                          marginBottom: moderateScaleVertical(10),
                        }}>
                        {item.expireDate}
                      </Text>
                    </View>
                    <AppButton
                      color = {colors.white}
                      title = "Redmee"
                      style = {{
                        width: moderateScale(100),
                        height: moderateScaleVertical(30),
                        backgroundColor: colors.primary,
                        marginRight: moderateScale(130),
                        marginTop: moderateScaleVertical(30),
                      }}
                      textStyle = {commonStyles.fontSize12}
                    />
                  </View>
                </View>
                <View style = {styles.circle2}></View>
              </View>
            )}
          />

Может кто-нибудь, пожалуйста, скажите мне, как это исправить?