HOW TO: QR Code Scanner

There is already a great tutorial on how to use the Expo Camera function with Draftbit with Custom Code.  In this How To we dive in a bit deeper using the same concepts but we are going to do two things different:

  1. We are going to scan for a QR Code (actually it scans many other types which you can find here in the Expo Bar Code Scanner documentation)
  2. After getting a scan we want to push that information to another screen so we can use it for things like pulling up customer data, inventory etc...

Remember that Draftbit is based on the Expo managed workflow, which offers constraints that help you make more efficient apps, that being said you can extend it with React Native; however please note that at any time this functionality can change, so make sure you keep your code well documented and follow Expo documentation.

Before we get started I want to make a note about Custom Code, it can get very confusing as it is just 1 file with lots that can go on, especially if you have multiple Custom Components.  This is a friendly reminder to just check and see what you have already imported in for packages and also to always comment your code so it is clean and easy to see. 

STEP 1


Let's start off by adding the Package we are going to need in the Custom Code section.

  1. Click on Custom
  2. Click on Packages
  3. Add expo-barcode-scanner and keep version as latest



STEP 2


We need 2 screens, a Camera screen and then second a Detail screen.  The Detail screen will be where the barcode goes to.

Let us add those now.

1. Add 2 screens
2. On the detail screen add a parameter called 'barcode' or anything you like that you will use to pass the data to



STEP 3


Now we add the Custom Code to our Camera screen and then we will add in our code to make it function.

Watch the animation and check for the code below each one!


<CustomCode.SnapComponent navigation={props.navigation} />

And now we just need to add the code in for making the Component work and we are all set.  Remember to check if you have anything else in your Custom Code if you do then you will need to merge them, if not then this will work out of the box by copying and pasting.

*REMEMBER* To change your variable names just like I do here but use whatever you used in the steps above.


A few things to remember:

  • Custom Code will not render in your preview, especially a camera you need to run that in the Expo app at minimum - Here is How to Live Preview
  • Change your variable names, and for the Screen, Draftbit will always add the word 'Screen' to the end of your Screen name and all Screen names will be camel cased regardless of your naming, so what that means is that 'Barcode Scan' will be 'BarcodeScanScreen' and like wise 'barcode scan' will also be 'BarcodeScanScreen'

Have any issues? questions? just leave a comment!
Like Comment

HOW TO: Change Stack Navigation Per Screen

Stack Navigation is a great way to get control of your app to have levels (when you click a screen and can see the "< Back" button).  Draftbit comes with this ability straight out of the box, but sometimes you just need more control.

Say you want to change the title of a specific screen to display some data or say you want to change the right or left button function. You can do that very easily with a Custom Component

Remember that Draftbit is based on the Expo managed workflow, which offers constraints that help you make more efficient apps, that being said you can extend it with React Native; however please note that at any time this functionality can change, so make sure you keep your code well documented and follow Expo documentation.

STEP 1

Create a custom component that will take one parameter in which is our props.  Props are the way we pass data through React components; if you want to learn more about that, read here.


export function ChangeStackNavigation(props) {
  const { navigation } = props;

  React.useLayoutEffect(() => {
    navigation.setOptions({
      title: 'Shipment Progress',
      headerRight: () => <Button title="Done" onPress={() => navigation.navigate('DashboardScreen')} />,
    });
  }, [navigation]);

  return null;
}

In the above example, we changed the screen's title and also changed the Right button functionality.

Now all that is left is to call the Component and pass the props.

STEP 2

Add custom component and pass the Navigation prop (that is how React controls the navigation!)


<CustomCode.ChangeStackNavigation navigation={props.navigation} />

And you are done!
Like Comment