React-native: Layout a view next to a centered one

user_2417724 0
Viewed 33

I want to achieve the following:

enter image description here

I want to display a label next to a centered value. As far as I can see that's not possible with flexbox, right? How could I achieve that?

Additionally I'd like to have the base-aligned, but currently this option is not working on Android. Therefore I'm using hardcoded paddings for the smaller text boxes. Any other Idea for that?

flexbox react-native layout
2 Answers

Another suggestion, if you don't want to use empty Views, is to position Value to the center, and then have the unit positioned absolute (so it goes off the flex) and to the bottom so you ensure it's base-aligned to Value.

enter image description here

<View style={styles.container}>
  <Text style={styles.value}>
    Value
    <Text style={styles.unit}>unit</Text>
  </Text>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'lightgrey',
  },
  value: {
    backgroundColor: '#eee',
    textAlign: 'center',
    fontSize: 20,
    position: 'relative',
  },
  unit: {
    fontSize: 12,
    position: 'absolute',
    bottom: 0,
  },
});
user_18037760

You can use use 3 flex boxes placed horizontally to get a similar effect. Leave the left box blank.

enter image description here

(Ive added background colors for reference)

<View style={styles.container}>
    <View
      style={{
        flexDirection: 'row',
      }}>
      <View style={{ flex: 1}} /> {/* blank view */}
      <View
        style={{
          flex: 1,
          justifyContent: 'flex-end',
          alignItems: 'center',
        }}>
        <Text style={{ fontSize: 30 }}>Value</Text>
      </View>
      <View
        style={{
          flex: 1,
          justifyContent: 'flex-end',
          alignItems: 'fllex-start',
        }}>
        <Text style={{ fontSize: 12 }}>Unit</Text>
      </View>
    </View>
  </View>
user_32629830
Related