Skip to content

Commit

Permalink
Complete Day 22
Browse files Browse the repository at this point in the history
  • Loading branch information
hewad-mubariz committed Jul 4, 2024
1 parent 7c35696 commit dcf9e3b
Show file tree
Hide file tree
Showing 14 changed files with 14,984 additions and 0 deletions.
6 changes: 6 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -136,3 +136,9 @@ https://github.com/hewad-mubariz/reactnative-50-days/assets/32339404/2f2b8729-89
The Accordion Component brings an organized and interactive way to display expandable content within your application. This component is designed to reveal or hide content sections dynamically, based on user interaction. Each accordion item smoothly transitions between its expanded and collapsed states, ensuring a seamless user experience. The animation is enhanced with customized spring physics to make the transitions feel natural and responsive, minimizing bounce during collapse and providing quick expansion. This component is ideal for FAQs, settings menus, and any content-heavy sections where users need to access detailed information without navigating away from the main page.

https://github.com/hewad-mubariz/reactnative-50-days/assets/32339404/bb224593-46aa-4c31-b366-a29a8713a004

# Day 22 Animated Collapsible Card

The Animated Collapsible Card component provides a sleek and modern way to display expandable content within your application. This component features smooth animations for expanding and collapsing card content, enhancing the user experience by offering an interactive way to access detailed information. The card header includes an animated icon and dynamic content that transitions seamlessly. The component leverages React Native Reanimated for performant animations and Lucide icons for visually appealing graphics. Perfect for displaying notifications, updates, and expandable lists.

https://github.com/hewad-mubariz/reactnative-50-days/assets/32339404/38f50e2a-dc16-4cb4-bd2a-6fb1025814a3
19 changes: 19 additions & 0 deletions collapsible-card/App.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { StyleSheet, View } from "react-native";
import { CollapsibleCard } from "./src/components/CollapsibleCard";

export default function App() {
return (
<View style={styles.container}>
<CollapsibleCard />
</View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
paddingHorizontal: 16,
justifyContent: "center",
},
});
27 changes: 27 additions & 0 deletions collapsible-card/app.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
"expo": {
"name": "collapsible-card",
"slug": "collapsible-card",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"userInterfaceStyle": "light",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#ffffff"
}
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}
Binary file added collapsible-card/assets/adaptive-icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added collapsible-card/assets/favicon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added collapsible-card/assets/icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added collapsible-card/assets/splash.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions collapsible-card/babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins:['react-native-reanimated/plugin']
};
};
Loading

0 comments on commit dcf9e3b

Please sign in to comment.