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

Using:

Try fix here: https://snack.expo.dev/?name=Card.Actions&description=https://callstack.github.io/react-native-paper/card-actions.html&code=import * as React from 'react'; import { Card, Button } from 'react-native-paper'; const MyComponent = () => ( ); export default MyComponent;&[email protected],@expo/vector-icons@^13.0.0,react-native-safe-area-context

CodePudding user response：

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.