CODEWITHSUNDEEP
javascriptreactjsreact-native
Kanwarjeet Singh
Kanwarjeet Singh

Reputation: 745

React native, tranfrom text to rotate i

I am from to rotate text so it can look like this, but it's not coming in one line like in the image 2, I tried a lot of things to solve it but nothing worked

enter image description here

I able to rotate it but it's not coming in one line

enter image description here

I tried a lot of things but still getting same result, below is my code

 <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>
            )}
          />

Can someone please tell me how to fix this?

Upvotes: 1

Views: 246

Answers (2)

Leri Gogsadze
Leri Gogsadze

Reputation: 3093

As I can see the problem is that Text is as long as its wrapper (red rectangle). Then you rotate it but it has the same width that's why it's wrapped automatically. You can set the red rectangle's height as width to that Text component.

Upvotes: 1

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

Try this way

<View
  style={{
    width: moderateScale(56),
    backgroundColor: colors.red,
    transform: [{ rotate: "270deg" }], // add here
  }}
>
  ...
</View>

Upvotes: 0

Related Questions