Simple Snapchat Clone
In part one of the tutorial series, we scaffold a new React Native application and get everything running on our local environment, and extract our content to a single component that can be rendered by both IOS and Android.
In the next part of the series, we learn about different component types (presentation/layout/container), create a header component that we can reuse in our different screens, and create some static data in a React Native FlatList Component and render that on the screen. We also do a bit of styling so our app is visually appealing as we prepare ourselves for retrieving data from the network instead of the previous static data we have been working with.
Integrating Real DataRegister or Log In to View
In part 3 of our app, we move our static data to a server and retrieve that data via HTTP request and dynamically render that data. We also create a floating create message button and can create messages and send them to the server and learn to keep our local app data in sync with the server data via the react lifecycle methods.
User Registration, LoginRegister or Log In to View
In part 4 of our app, we setup a modal so that a user must login to access the application. We touch on the React Native Modal and TextInput Components, and learn how to handle user registration, login, and error handling through Turbo User Management.
Sending and Receiving MessagesRegister or Log In to View
In part 5 of our series, we use our new login information to automatically add an attribute to our messages so they are tagged with the proper sender’s information. We then change our data model so we receive messages for our own individual user account from the backend, as previously we were retrieving all messages. Finally, we create text inputs so we can share custom messages between different accounts.
Delete MessagesRegister or Log In to View
In part 6 of our series, we finally tie in the most important feature of what make’s our Snapchat Clone a true Snapchat Clone, all messages are deleted once they are opened and read. We implement this using Turbo Remove Function to delete the messages from the server, and we update our local message queue with the callback to keep the server and client side application in sync.