This is a React Native app that displays news articles fetched from the NewsAPI. The app features a swipeable card interface, allowing users to swipe to load the next article.
- Node.js (v12 or later)
- React Native development environment set up (follow the official React Native setup guide)
-
Clone the repository:
git clone https://github.com/your-repo/news-app.git -
Navigate to the project directory:
cd news-app -
Install dependencies:
npm install
-
Start the Metro bundler:
npm start -
Run the app on your preferred platform:
-
For Android:
npm run android -
For iOS:
npm run ios
The app is built using React Native and follows a modular architecture. Here's an overview of the main components:
-
NewsFeed.tsx: This is the main component that handles data fetching using the SWR library and the
fetcherfunction. It renders theNewsCardcomponent with the current article data and handles the swipe gesture using theSwipeButtoncomponent. -
NewsCard.tsx: This component displays the details of a news article, including the image, title, source, and description.
-
SwipeButton.tsx: This component provides a swipeable button with an animated gradient and swipe gesture handling using React Native Reanimated.
-
fetcher.ts: This file contains the
fetcherfunction, which is a custom fetcher used with SWR to fetch news articles from the NewsAPI. -
index.ts: This file exports the API key and the API URL for fetching news articles.
- axios: Used for making HTTP requests to the NewsAPI.
- react-native-fast-image: A high-performance image component for React Native.
- react-native-gesture-handler: Provides a native-driven gesture system for building better touch-based experiences.
- react-native-linear-gradient: A React Native library for creating linear gradients.
- react-native-reanimated: A React Native library for creating fluid animations.
- swr: A React Hooks library for data fetching, caching, and revalidation.