First, you will need to start Metro, the JavaScript bundler that ships with React Native.
To start Metro, run the following command from the root of your React Native project:
# using npm
npm start
# OR using Yarn
yarn start
Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project. Run the following command to start your Android or iOS app:
# using npm
npm run android
# OR using Yarn
yarn android
cd ios && pod isntall
# using npm
npm run ios
# OR using Yarn
yarn ios
If everything is set up correctly, you should see your new app running in your Android Emulator or iOS Simulator shortly provided you have set up your emulator/simulator correctly.
This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.
You've successfully run this React Native App 😌
Exercise: You need to develop a simple Bookshelf application using React Native. The application should allow users to view the list of books and add new books to the library.
Requirements: Create a book list screen that displays the title and author of each book. The book list should be implemented using a FlatList or other suitable component to display a large amount of data.
Implement the ability to add a new book. Create a separate screen or modal window where the user can enter the title and author of the book. After adding a book, it should appear in the list.
Implement the functionality to remove a book from the list. The user should be able to swipe on a list item and delete the book.
Develop a simple application design, including basic user interface elements (such as buttons, text fields, etc.). You can use the standard React Native styles or add your own styles with CSS.
The application must be developed using functional components and hooks.
To manage application state, use a suitable library such as Redux, MobX or Context API, Zustand.
Additional tasks (optional): Implement functionality for editing book information. Add the ability to filter the list of books by author or title. Design animations for smooth screen transitions or other custom actions. Include and use third party libraries such as react-navigation to improve navigation and user experience.
Try to develop clean and organized code following React Native development best practices. At the end of the assignment, provide the source code for the project, along with instructions for running it.