Simple Snapchat Clone
road to startups
In this introduction to React Native, we create a snapchat clone that allows users to share messages and imaged with other users, which are deleted after they are opened. We will set up a react native development environment and build an application from scratch, and then build both an IOS and Android Application from a single React Native code base. We will learn how to register and log in users with react native through the Turbo 360 user management system, and then restrict the application to only those users who are authorized. We will learn about some more advanced React Native Components such as FlatList and Modal, which will give our app some more advanced functionality. We will also learn about styling in React Native with React Native StyleSheets and JSX, so our app actually looks presentable.
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 Data
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, Login
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 Messages
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.
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.