Client SDK (API Reference) - Mobile

BILDIT enables you build a scalable Ecommerce App with ReactNative in no time. This is the API Reference for the BILDIT Client SDK for Mobile applications.

Getting Started

1. Initial Setup

• Install as dependency: yarn add @bildit/sdk
• Depending on the state management your app uses:
  • yarn add @bildit/query react-query to install hooks based API
  • yarn add @bildit/redux redux redux-saga [...] to install redux based state management

2. Initialize BilditClient

import { BilditClient } from '@bildit/sdk';
import { BilditProvider } from '@bildit/query';

const client = new BilditClient({
  apiKey: 'YOUR API KEY',
  clientId: 'YOUR CLIENT ID',
});

3. Connect to your React Native App

import { BilditClient } from '@bildit/sdk'
import { BilditProvider } from '@bildit/query'

const client = new BilditClient({
  apiKey: 'YOUR API KEY',
  clientId: 'YOUR CLIENT ID',
})

const App = () => {
  return (
      <BilditProvider client={client}>
      // ... your code
      </BilditProvider>
      )
}

4. Use BILDIT queries and mutations

import { useLoginMutation, useShoppingCart } from '@bildit/query'
import { Button } from 'react-native'

const LoginForm = () => {
  const mutation = useLoginMutation();
  const handleLogin = () => {
      mutation.mutate({ email: values.email, password: values.password });
  }

  return (
      <Button label="Login" disabled={mutation.isLoading} onPress={handleLogin} />
  );
}

const ShoppingCartScreen = () => {
  const cart = useShoppingCart();

  // ...
}

API Reference

Remote

To use BILDIT Remote component, you need to provide a list of dependencies your component will use internally.

const DEPENDENCY_MAP = {
'react-native-fast-image': require('react-native-fast-image')
};

<BilditProvider client={client} dependencyMap={DEPENDENCY_MAP} />

//...

<Remote source={banner.source} image={banner.image} />

// banner.source code
import FastImage from 'react-native-fast-image';
import { StyleSheet } from 'react-native'

const styles = StyleSheet.create({
stuff: {}
});

const BannerImage = ({ image }) => {
return <FastImage style={styles.stuff} source={{ uri: image }} />
}

export default BannerImage;

BilditClient

interface BilditConfig {
apiKey: string,
clientId: string,
sandbox?: boolean
// other configs
}

class BilditClient {
constructor(options: BilditConfig) {}

// API Calls
login()...
logout()...
filterProducts()...
cart()...
}

Using hooks (using react-query)

Redux + Sagas