Let’s say you take our quick-start app out for a spin and are looking to just get your feet wet in making your own point of sale app.

You can open up reader-sdk-react-native-quickstart/app/screens/CheckoutScreen.js and start modifying some of the buttons to adjust the amounts that you’re charging.

Then add some additional buttons that look like this:

See the full examples of these modified files here: https://gist.github.com/mootrichard/6d34a09f965d203a7eb4813b73d9bcbd

The above is just a modified version of the provided CustomButton component to look a little different. We then add in our own function for adding a value:

See the full examples of these modified files here: https://gist.github.com/mootrichard/6d34a09f965d203a7eb4813b73d9bcbd

and add a currentValue array to the state of our CheckoutScreen component:

See the full examples of these modified files here: https://gist.github.com/mootrichard/6d34a09f965d203a7eb4813b73d9bcbd

You now have your own keypad to enter amounts to charge.

Here you can see what a final custom keypad looks like. We have buttons for every number, we can clear values, and we’re just storing the current value we want to charge in the main CheckoutScreen component. The state even persists if we back out of the charge.

It’s so easy to modify these interfaces! You can change the text, add in some additional state, or create custom functions to tailor the application to do whatever you need. The key benefit here is that you can then deploy this to iOS and Android using the same core components.

This is really just scratching the surface, since these are only simple modifications to the quick-start application. We are looking forward to seeing what the React Native community creates with this new plugin. Whether you want to make the next self-ordering kiosk, create a whole new point of sale for your favorite industry, or just be the first to build a React Native application with it — we want to hear about it!

Tweet us at @SquareDev or join us in our slack community over at https://squ.re/slack.

Also, if you just want to contribute to the open-source project on GitHub, feel free to give it a fork and submit a PR to us!