CODEWITHSUNDEEP
reactjsreact-native
Minoru
Minoru

Reputation: 1730

Position one <Image> on center and one <Image> on right in React Native?

I need to place two images on the Appbar of my application built in React Native, but I can't make it work properly. The first image must be positioned in the middle of the Appbar, while the second one must be positioned in the right of it. The following image shows how it should be:

Example of positioning

Currently, I'm trying this way:

<View style={viewStyle}>
    <Image source={require('../images/rank.jpg')} style={styles.imageStyle} />\
    <Image source={require('../images/ic_notifications.png')} style={styles.notificationStyle} />
</View>

const styles = {
  viewStyle: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#022436',
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    elevation: 2,
    position: 'relative'
  },
  imageStyle: {
    height: 35,
    width: 120
  },
  notificationStyle: {
    height: 24,
    width: 24,
    justifyContent: 'flex-end'
  }
};

But both images are centered in the Appbar. Also tried to create a View in the same level of the rank.jpg image, but nothing changed.

SOLUTION (provided by @Travis White):

<View style={viewStyle}>
    <View style={{ flex:1 }} />
    <View style={{ flex:1, flexDirection: 'row', justifyContent: 'center' }}>
      <Image source={require('../images/rank.jpg')} style={styles.imageStyle} />
    </View>
    <View style={{ flex:1, flexDirection: 'row', justifyContent: 'flex-end' }}>
      <Image source={require('../images/ic_notifications.png')} style={styles.notificationStyle} />
    </View>
  </View>

const styles = {
  viewStyle: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#022436',
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    elevation: 2,
    position: 'relative'
  },
  imageStyle: {
    flex: 1,
    height: 35,
    width: null
  },
  notificationStyle: {
    height: 24,
    width: 24,
    margin: 12
  }
};

I still have a doubt about a performance issue that may arise with the inclusion of empty <View>s. If anyone can explain it.

Upvotes: 2

Views: 6672

Answers (2)

Syed Zain Ali
Syed Zain Ali

Reputation: 1226

enter image description here 

<View style={{
                flexDirection: "row",
                justifyContent: "space-between"
              }}
            >
              <View style={{ alignItems: "center", flex: 1 }}>
                <Image
                  style={{ width: 50, height: 50 }}
                  source={{
                    uri:
                      "https://facebook.github.io/react-native/docs/assets/favicon.png"
                  }}
                />
              </View>
              <View style={{ alignItems: "center", marginRight: 10 }}>
                <Image
                  style={{ width: 50, height: 50 }}
                  source={{
                    uri:
                      "https://facebook.github.io/react-native/docs/assets/favicon.png"
                  }}
                />
              </View>
            </View>

Upvotes: 3

Travis White
Travis White

Reputation: 1977

This looks like you want to divide the top into 3 equal parts. Why not use a View as placeholder to the first section. Give all three components flex: 1, and you should be in good shape. If the images give you an issue, you can simply make them children of a View with flex: 1 set, so all children of the viewStyle view are being divided equally with flex: 1 set.

Upvotes: 1

Related Questions