Components
Action Card
Action Card component for React Native.
Installation
npx rn-glow add action-card⚙️ Props
ActionCard Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The content to be rendered inside the card. |
className | string | - | Additional CSS classes to apply to the card. |
style | StyleProp<ViewStyle> | - | Additional styles to apply to the card. |
ActionCardTitle Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The title text to be displayed. |
className | string | - | Additional CSS classes to apply to the title. |
style | StyleProp<TextStyle> | - | Additional styles to apply to the title. |
ActionCardSubtitle Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The subtitle text to be displayed. |
className | string | - | Additional CSS classes to apply to the subtitle. |
style | StyleProp<TextStyle> | - | Additional styles to apply to the subtitle. |
ActionCardWrapper Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The content to be wrapped. |
className | string | - | Additional CSS classes to apply to the wrapper. |
style | StyleProp<ViewStyle> | - | Additional styles to apply to the wrapper. |
🚀 Example
import {
View,
Text,
ScrollView,
SafeAreaView,
TouchableOpacity,
useWindowDimensions,
} from "react-native";
import React from "react";
import {
ActionCard as ActionCardView,
ActionCardTitle,
ActionCardSubtitle,
ActionCardWrapper,
VerticalDivider,
Row,
} from "@/components/index";
import { SymbolView } from "expo-symbols";
const ActionCard = () => {
const handlePress = (cardType: any) => {
console.log(`${cardType} card pressed`);
};
const width = useWindowDimensions().width;
return (
<ScrollView
style={{
flex: 1,
backgroundColor: "#141414",
}}
contentContainerStyle={{
flexGrow: 1,
padding: 16,
}}
showsVerticalScrollIndicator={false}
scrollEnabled={true}
contentInsetAdjustmentBehavior="always"
>
<SafeAreaView style={{ flex: 1 }}>
<View style={{ marginBottom: 24, marginTop: 24 }}>
<Text
style={{
fontSize: 28,
fontWeight: "bold",
color: "#e6e6e6",
marginBottom: 8,
}}
>
Action Cards
</Text>
<Text
style={{
fontSize: 16,
color: "#9e9e9e",
lineHeight: 24,
}}
>
Beautiful, interactive cards for your React Native application
</Text>
</View>
<TouchableOpacity
onPress={() => handlePress("Primary")}
activeOpacity={0.95}
>
<ActionCardView
style={{
marginBottom: 16,
backgroundColor: "#212121",
borderRadius: 16,
shadowColor: "#000",
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.1,
shadowRadius: 12,
elevation: 6,
}}
>
<ActionCardWrapper
style={{
padding: 20,
borderLeftWidth: 4,
borderLeftColor: "#3b82f6",
}}
>
<View
style={{
flexDirection: "row",
alignItems: "center",
marginBottom: 12,
}}
>
<View
style={{
width: 12,
height: 12,
borderRadius: 6,
backgroundColor: "#10b981",
marginRight: 8,
}}
/>
<Text
style={{
fontSize: 12,
fontWeight: "600",
color: "#10b981",
textTransform: "uppercase",
letterSpacing: 1,
}}
>
Active
</Text>
</View>
<ActionCardTitle
style={{
fontSize: 25,
fontWeight: "bold",
color: "#ffffff",
marginBottom: 8,
}}
>
Welcome to Action Cards
</ActionCardTitle>
<ActionCardSubtitle
style={{
fontSize: 15,
color: "#bdbdbd",
lineHeight: 24,
marginBottom: 16,
textAlign: "left",
}}
>
Create stunning, interactive cards with smooth animations and
customizable styling. Perfect for dashboards, notifications, and
feature highlights.
</ActionCardSubtitle>
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
<View
style={{
flexDirection: "row",
alignItems: "center",
}}
>
<Text
style={{
fontSize: 14,
color: "#8b5cf6",
fontWeight: "600",
}}
>
Learn More →
</Text>
</View>
<View
style={{
backgroundColor: "#f1f5f9",
paddingHorizontal: 12,
paddingVertical: 6,
borderRadius: 8,
}}
>
<Text
style={{
fontSize: 12,
color: "#475569",
fontWeight: "500",
}}
>
v2.1.0
</Text>
</View>
</View>
</ActionCardWrapper>
</ActionCardView>
</TouchableOpacity>
</SafeAreaView>
</ScrollView>
);
};
export default ActionCard;