how to style text component to the right of view?

Question

Hi, I want the date shown above to be on the right side of the view, however am unable to do it, could anyone suggest anything?

My code:

 <View style={{padding: 10}}>
      {props.data.data.content != undefined &&
        props.data.data.content != null &&
        props.data.data.content.map((item) => {
          return (
            <View
              style={{
                flexDirection: 'row',
                padding: 10,
                backgroundColor: '#fff',
                elevation: 3,
                margin: '2%',
                borderRadius: 5,
              }}>
              <View>
                <Image
                  source={require('../assets/atbirth.jpg')}
                  style={{height: 40, width: 50}}
                  resizeMode="contain"
                />
              </View>
              <View>
                <View style={{flexDirection: 'row'}}>
                  <Text
                    key={item.id}
                    style={{
                      fontFamily: 'Roboto',
                      fontSize: 18,
                      fontWeight: 'bold',
                    }}>
                    {item.name}
                  </Text>

                  <View >
                    <Text style={{color: 'grey', fontSize: 12,}}>
                      {item.display_date}
                    </Text>
                  </View>
                </View>
                <View style={{flexDirection: 'row'}}>
                  {item.vaccine_list.map((i) => {
                    return (
                      <View style={{flexDirection: 'row'}}>
                        <Text style={{fontFamily: 'Roboto', fontSize: 15}}>
                          {i.name},
                        </Text>
                      </View>
                    );
                  })}
                </View>
              </View>
            </View>
          );
        })}
    </View>

Let me know, where am going wrong and how do I implement the above shown behavior, any suggestions would be great.

Maybe this can help you https://stackoverflow.com/questions/32030050/how-can-you-float-right-in-react-native — zahra zamani, Sep 30 '20 at 13:50

score 0 · Accepted Answer · answered Sep 30 '20 at 15:18

You can align your elements by using Flex.

 <View style={{padding: 10}}>
      {props.data.data.content != undefined &&
        props.data.data.content != null &&
        props.data.data.content.map((item) => {
          return (
            <View
              style={{
                flexDirection: 'row',
                padding: 10,
                backgroundColor: '#fff',
                elevation: 3,
                margin: '2%',
                borderRadius: 5,
              }}>
              <View>
                <Image
                  source={require('../assets/atbirth.jpg')}
                  style={{height: 40, width: 50}}
                  resizeMode="contain"
                />
              </View>
              <View style={{flex:1}}>
                <View style={{flexDirection: 'row', flex: 1}}>
                  <Text
                    key={item.id}
                    style={{
                      fontFamily: 'Roboto',
                      fontSize: 18,
                      fontWeight: 'bold',
                    }}>
                    {item.name}
                  </Text>

                  <View style={{alignItems: 'flex-end'}}>
                    <Text style={{color: 'grey', fontSize: 12,}}>
                      {item.display_date}
                    </Text>
                  </View>
                </View>
                <View style={{flexDirection: 'row'}}>
                  {item.vaccine_list.map((i) => {
                    return (
                      <View style={{flexDirection: 'row'}}>
                        <Text style={{fontFamily: 'Roboto', fontSize: 15}}>
                          {i.name},
                        </Text>
                      </View>
                    );
                  })}
                </View>
              </View>
            </View>
          );
        })}
    </View>

Using Flex you are going to take all the available space and then you will be able to align the date to the right

how to style text component to the right of view?

1 Answers1