Creating a WooCommerce Mobile App with React Native

Creating a WooCommerce Mobile App with React Native Laccadive IO

Muhammad Muhsin Colombo, Sri Lanka Co-Founder, Laccadive IO Author, Smashing Magazine muhammadmuhsin.com @muhsinlk m-muhsin Laccadive IO

About today’s app Built with React Native Powered by WooCommerce Runs on iOS and Android Shopping cart functionality Laccadive IO

First, what is React? An open-source JavaScript library built by Facebook Helps you build User Interfaces Replaces the view layer of your application Declarative, Composable and Reusable Components Write HTML (JSX) within JavaScript Virtual DOM Laccadive IO

“Write programs that do one thing and do it well.” - Doug McIlroy Laccadive IO

What is special about React Native? Aimed for web developers who want to get into mobile apps Build truly native apps running on iOS and Android Learn once, write anywhere Build with your favorite language (JavaScript) Native performance & look-and-feel Oh, and it has MIT License! Laccadive IO

Features Cons RN Components map to Native Components Not all components are mapped Flexbox for styling Can’t use all CSS properties Native development, when you need it New and rapidly evolving Use other JS libraries along with RN Live Reloading and Hot Reloading Props and State Lifecycle Hooks Laccadive IO

A React Component A Hello World component with React Laccadive IO

A React Native Component The same component in React Native Laccadive IO

Laccadive IO

Who is using React Native Facebook Skype Uber Eats SoundCloud Laccadive IO

Future of React Native iOS Android Windows React Component React Native Tizen macOS Web Laccadive IO

WooCommerce One of the most popular WordPress plugins Powers 28% of the online stores in the world Easily set up your e-commerce store REST API ready https://docs.woocommerce.com/document/woocommerce-rest-api/ https://woocommerce.github.io/woocommerce-rest-api-docs/ Laccadive IO

Let’s Code Laccadive IO

Setting things up Install WooCommerce and SSL Follow the wizard and import sample products WooCommerce Settings > API > Keys/Apps > Add key Note down the Consumer key and Consumer secret https://woocommerce-store.on-its-way.com/ Laccadive IO

Context API Pass down data without using props React.createContext Provider Consumer Laccadive IO

Starting a React Native project npm install -g expo-cli expo init woosesh-store Select ‘tabs’ cd woosesh-store expo start Install and run Expo on your phone and scan QR code OR Run on iOS simulator / Android emulator Laccadive IO

Installing Dependencies npm install -S axios react-native-htmlview Laccadive IO

Home screen A simple image slider Button Laccadive IO

Products page React Native FlatList CSS Flexbox https://woocommerce-store.on-its-way.com/wp-json/wc/v2/ products?consumer_key=ck_286be1c0fd553c4b803ba2b 12c72593eb4676f8d&consumer_secret=cs_d4cc172fabae ef203a78f119518df0453753db65 Laccadive IO

Single product Item and quantity count maintained in state Add to cart button Laccadive IO

Cart page React Context API Laccadive IO

Where to find this project ⭐Star on GitHub: https://github.com/m-muhsin/woosesh-store Read the article: Google for ‘react native wordpress’ https://www.smashingmagazine.com/2018/05/building-mobile-apps-using-react-na tive-wordpress/ Laccadive IO

Go ahead and try! It’s not that hard. Laccadive IO

Thank You! Laccadive IO

Questions? @muhsinlk Laccadive IO