CODEWITHSUNDEEP
react-nativelayoutflexbox
cwiesner
cwiesner

Reputation: 952

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

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?

Upvotes: 2

Views: 53

Answers (2)

appostolis
appostolis

Reputation: 2303

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,
  },
});

Upvotes: 3

LonelyCpp
LonelyCpp

Reputation: 2673

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>

Upvotes: 0

Related Questions