Search code examples
react-nativereact-native-paper

how to flex space-between 2 elements in react native paper card.actions

Using: https://callstack.github.io/react-native-paper/card-actions.html

How I can position 2 buttons with flex space between? Nothing I am trying is working.

<Card.Actions
    style={{
      display: 'flex',
      justifyContent: 'space-between',
      flexDirection: 'row',
    }}>
    <Text>Lead booker:{'\n'}Benn King</Text>
    <AppButton label="View Booking" width="50%" size="small" />
  </Card.Actions>

enter image description here

Try fix here: https://snack.expo.dev/?name=Card.Actions&description=https%3A%2F%2Fcallstack.github.io%2Freact-native-paper%2Fcard-actions.html&code=import%20*%20as%20React%20from%20%27react%27%3B%0Aimport%20%7B%20Card%2C%20Button%20%7D%20from%20%27react-native-paper%27%3B%0A%0Aconst%20MyComponent%20%3D%20()%20%3D%3E%20(%0A%20%20%3CCard%3E%0A%20%20%20%20%3CCard.Actions%3E%0A%20%20%20%20%20%20%3CButton%3ECancel%3C%2FButton%3E%0A%20%20%20%20%20%20%3CButton%3EOk%3C%2FButton%3E%0A%20%20%20%20%3C%2FCard.Actions%3E%0A%20%20%3C%2FCard%3E%0A)%3B%0A%0Aexport%20default%20MyComponent%3B&dependencies=react-native-paper%405.0.0,@expo/vector-icons%40%5E13.0.0,react-native-safe-area-context

Solution

  • Looks good to me. I'm not familiar with the these react-native-paper components. But the css style properties and nesting looks good to me.

    What I suspect, is that the react-native-paper components do not treat the style props as you expect and maybe override or enforce some styles overriding yours.

    So to give you a bit of sanity back it would suggest to give this space-between flex layout a try with just vanilla react-native components View & Text. Probably a width: '100%' would be needed as well on the outermost container.

    <View style={{width:'100%', display:'flex', flexDirection:'row', justifyContent:'space-between'}}>
  <View>
    <Text>Left</Text>
  </View>
  <View>
    <Text>Right</Text>
  </View>
</View>

    Here is the example using the snack.expo.dev - https://snack.expo.dev/w1ATX401_

    Basically just don't use Card.Actions as it seems to override the justifyContent style which you set. You can see it as a "bug" or a feature of the library being opinionated about this.