@uiw/react-native/lib/Card/Card.Actions.js

UIW for React Native

import React, { Fragment } from 'react';
import { View, Text, StyleSheet, Platform, TouchableOpacity } from 'react-native';
import Divider from '../Divider';
import map from 'lodash/map';
import { colors } from '../utils';
const CardActions = ({
  actions = [],
  actionsContainerStyle,
  children,
  driver = true
}) => {
  return <Fragment>
      {driver && <Divider style={StyleSheet.flatten({
      marginTop: 15
    })} lineStyle={{
      backgroundColor: '#e6e6e6'
    }} />}
      {React.isValidElement(children) ? React.cloneElement(children) : null}
      <View style={[styles.actionsContainer, actionsContainerStyle]}>
        {map(actions, (item, index) => {
        return <TouchableOpacity style={[styles.actionsTitleContainer, {
          marginLeft: index === 0 ? 0 : 10
        }]} key={index} onPress={event => item.onPress && item.onPress(event, index)}>
              {item.icon && item.icon}
              {item.text && <Text style={[styles.actionsTitle, item.actionsTextStyle]}>{item.text}</Text>}
            </TouchableOpacity>;
      })}
      </View>
    </Fragment>;
};
const styles = StyleSheet.create({
  actionsContainer: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-end',
    paddingTop: 15
  },
  actionsTitleContainer: {
    display: 'flex',
    flexDirection: 'row',
    fontSize: 16
  },
  actionsTitle: {
    color: colors.colorsPalette.violet30,
    ...Platform.select({
      android: {
        fontFamily: 'sans-serif',
        fontWeight: 'bold'
      },
      default: {
        fontWeight: 'bold'
      }
    }),
    textAlign: 'center'
  }
});
export default CardActions;