In this documentation, we are going to describe step by step how to make a buy & sell app in React Native, starting with our premium Universal Listings app template. This will be a fully functional app, with complete backend integration (Firebase), so you can submit it to the App Store and Google Play today. Let’s see what needs to be done.
While the app is extremely complex, with a ton of awesome features, the setup of our app template is actually pretty straightforward, especially if you already have some basic knowledge of how to run React Native projects.
On a high-level, here are the steps you need to follow in order to get the app template up and running in no-time:
- Run the app template on iOS and Android devices
- Link your Firebase account to the listings app template
- Add your categories and filters to Firebase Firestore database
- (Optional) Customize the UI, by changing colors, branding, icons, fonts, etc.
- (Optional) Set up certificates with Apple to enable push notifications on iOS
- Publish your app to the App Store and Google Play
For each section, we are providing you with resources where you can dive into more detailed instructions on how to achieve certain steps (since they are generic and apply to all of your React Native templates), so simply click the links if you feel like there’s not enough high-level information for you.
Running the Buy & Sell React Native App Template
Running our React Native apps on iOS is slightly different than Android. Android can be run on both Windows and MacOS, while for iOS, you need Xcode, and therefor MacOS.
Assuming you already have React Native set up, in order to run our buy and sell app template on Android, you simply need to run
npm install && react-native run-android
in the Terminal.
On iOS, you need to run the following commands first
npm install && cd ios/ && pod install
When this finishes, you can open the generated .xcworkspace file in Xcode, and press “Build & Run“.
If these instructions don’t make sense, no worries. For more details, follow these detailed tutorials for iOS and Android which include way more details, such as setting up your development environment and step by step instructions.
Link Firebase Account to Buy & Sell App Template
Please go to this Firebase integration detailed tutorial and complete the 3 quick steps described there. Once you’ve replaced the Google services files (google-services.json for Android, and GoogleServices-Info.plist for iOS) with your own, come back to this tutorial and read on.
Once you’ve switched to your new Firebase database, the app will display just empty content. Think about it – you haven’t added any categories or listings into your database, so there’s nothing to display. Let’s fix this.
Add Your Categories and Filters to Firestore
You need to add two collections: categories and filters. Once you have these two collections, you can open the app and start adding listings, by using the in-app listing composer.
These two collections must have a precise format and name, so please add all the fields that are showcased in the following screenshots.
- universal_categories: for each category specify id, name, order and photo
- universal_filters: for each filter, specify id, name, and options
The filter showcased in this screenshot is a generic filter: it applies to all categories. We also have the notion of specialized filters, which apply only to a set of categories, predefined by you. This comes in very handy, especially if your categories for the buy & sell app are very diverse. For example, in order to add a square feet filter for Real Estate categories only, you can specify a specialized filter like this:
Notice how we listed all the categories (their IDs) where the “Square feet” filter is valid. It won’t show up in any other categories. You can get the IDs of the categories from the universal_categories table.
Once you’ve added a few categories and filters, re-run your mobile app. They should show up in in the app, finally.
Now it’s time to actually post some new listings, so that the app doesn’t feel empty anymore. Tap the “Add Listing” button to open up the listings composer, and start adding items for sale.
That’s it. Now you have a fully working buy and sell app in React Native, completely integrated with Firebase backend. Hooray!
To customize the color scheme of the React Native theme, you can open the src/AppStyles.js file and change the colors to your desire.
It’s that simple.
You can change the name of the app, by editing app.json file:
You can give any user admin privileges, by setting up the isAdmin flag to true in Firestore, in the “users” table.
Once an admin, a user can find an Admin Module in the app (in the side bar navigation drawer), where they can see all the listings that are currently pending approval.
As an administrator, a user can:
- See all listings that are pending approval
- Approve listings from any user
- Remove listings from any user
- Edit their own listings
By default, all newly added listings require approval. Approval can be obtained from an admin, or by simply updating the “is_approved” flag to true in Firestore, for each listing.
If you want all new listings to be automatically approved, go to ServerConfiguration.js file, and update the flag isApprovalProcessEnabled to false. This will skip the approval process and all new listings posted by your users will instantly be available in the app.
Publish Your App to the App Store and Google Play
There are plenty of online tutorials that can help you with your submissions to the app stores, so we are going to skip it in this documentation, since it falls out of scope for now. Don’t hesitate to reach out if you encounter any issues with your submissions. We’ve published this app to both App Store and Google Play already, so there shouldn’t be any surprises.