piug-07 / codefobe

Create React Native App

Create React Native apps with no build configuration.

npx create-react-native-app

Once you're up and running with Create React Native App, visit this tutorial for more information on building apps with React Native.

A brief overview of the project

• User Data Fetching & Data Handling:

  • Utilizes the Axios library to make HTTP requests.
  • Fetches user data from the 'https://random-data-api.com/api/users/random_user' API endpoint.

• User Profile Screen:

  • Displays user profile information in a ScrollView.
  • Background image is set using ImageBackground component with a specified image source.
  • User details such as ID, username, avatar, full name, email, gender, phone number, date of birth, and UID are shown.

• Refresh Functionality:

  • Provides a "Refresh" button to fetch a new random user's data.
  • Utilizes the fetchData function to fetch and update the user data on button press.

• Navigation:

  • Utilizes React Navigation for navigation within the app.
  • Navigates back to the previous screen when the "arrow-back" button is pressed.

• Styling and UI Elements:

  • Applies styles to format and present the UI elements.
  • Uses various components such as Text, Image, ScrollView, View, TouchableOpacity, and Ionicons for a rich user interface.

• Error Handling:

  • Implements error handling for API requests, logging errors to the console.

• Code Quality:

  • Clean, organized, and well-commented code

• React Native Usage:

  • Efficient use of React Native components and navigation

• Expo Usage:

  • Developed using Expo, including Expo-specific components and features.

Features

• Native project ready to be built on to your device.
• Support for unimodules and auto-linking.
• OTA updates, and Gestures out of the box.
• Full support for React Native web.
• TypeScript by default.
• Works with the Expo Client app.

Usage

• npx create-react-native-app Create a new React Native app.
• yarn ios -- (react-native run-ios) Build the iOS App (requires a MacOS computer).
• yarn android -- (react-native run-android) Build the Android App.
• yarn web -- (expo start:web) Run the website in your browser.

Sections

• Usage with Expo Client App
• Support and Contact
• FAQs
• Contributing

Usage with Expo Client App

Expo Client enables you to work with all of the Components and APIs in React Native, as well as the JavaScript APIs that the are bundled with the Expo App.

Expo Client supports running any project that doesn't have custom native modules added.

• Download the "Expo Client" app from the Play Store or App Store.
• Start your project with Expo
  • Install the CLI npm i -g expo-cli
  • Install the CLI npm i
  • Start the project npm expo start --tunnel
• Open the project:
  • Sign in to expo and the project will appear in the app.
  • Or point your phone's camera at the QR code in the terminal (press "c" to view it).

Support and Contact

If you're having issues with Create React Native App, please make sure:

• The issue is not covered in the Expo Docs
• There is not already an open issue for your particular problem

If you've checked the documentation and currently open issues, please either open a new GitHub issue or ask a question on Expo forums.

Contributing

Please see Contributing guide in the Expo CLI monorepo for instructions on contributing to Expo CLI.

Happy?? Star ⭐ this Repo. 🤩

Made By Piyush with ❤️

---

Connect with us