Working with third-party components
Nick Janssen
It is often desirable to use third-party components in an application. Consider a date picker or  Google Maps component which you don't want to write from scratch. With some manual work (for now), you can preview these components in Laska as well. See this example DatePicker component which demonstrates these capabilities.

Native components usually do not have a way of rendering in a browser (e.g. a Camera or Google Maps component) and need custom rendering logic for the editor. In other words, whatever you create in the editor needs to roughly match the native output of the third-party component.

In most cases, a rough representation of the third-party component in the editor is enough for you to continue your work, since the final result on a real device is what matters most. 📱

Let's walk through the steps needed to add a third-party component, such as this date picker in Laska.
An animation of react-native-datepicker
Step 1: Create the component in Laska
We can start out by creating a mockup of the third-party component inside Laska. 
You'll want to use the same name as the original component.
Once created, try mimicking the original component as much as you find necessary. The most important things in the beginning to get right are the dimensions, since you don't want your component to have a different width or height and mess up your existing layout.
A rough representation.
Next, let's take a look at the props which our third-party component expects:
DatePicker.defaultProps = {
  mode: 'date',
  androidMode: 'default',
  date: '',
  // component height: 216(DatePickerIOS) + 1(borderTop) + 42(marginTop), IOS only
  height: 259,

  // slide animation duration time, default to 300ms, IOS only
  duration: 300,
  confirmBtnText: '确定',
  cancelBtnText: '取消',
  iconSource: require('./date_icon.png'),
  customStyles: {},

  // whether or not show the icon
  showIcon: true,
  disabled: false,
  allowFontScaling: true,
  hideText: false,
  placeholder: '',
  TouchableComponent: TouchableHighlight,
  modalOnResponderTerminationRequest: e => true
};
Notice how our third-party component expects many props. One particularly important prop is the date that is currently selected. 

Add a custom prop called date through your component's Settings.
Adding "date". As the default value, we'll use today.
Select the inner Text element, and modify its Text Content like so:
Switch to Code Mode, and type props.date.
That's starting to look better! 😊
Note that there are lot of other props left. Again, depending on your requirements you may stop here or continue mocking the style of the third party component.
To make sure that our component in the editor matches our end component, let's take some final steps. Looking at the code of the third-party component, the first node that is being rendered appears to be a TouchableHighlight which gets passed in a style prop.

We can emulate this behavior using a custom prop of type Style.
A custom prop with a type of Style allows us to pass in styles of any common component like View or TouchableHighlight into a node in our custom component. We then have to tell our custom component to use this Style prop by altering the Custom Styling attribute of a selected node in the component.

Select the outer TouchableHighlight, and we can set Custom Styling in the Advanced section:
Now, let's add our DatePicker component somewhere in our app and see what we can now do.
We can now freely pass any styles that are valid on a TouchableHighlight and pass it into DatePicker.

Note that in this case, the third-party component expects style but there may be additional props that also expect this structure (e.g. contentContainerStyle). In that case, you can simply rename the custom prop to the desired prop name.
Step 2: Editing the code template
Now that we have a rough representation of the third-party component, we'll have to get our hands dirty and write some code.

From your component's Settings, go to Advanced and notice the Code Template field. Laska uses this template to generate final code for your component. You can choose to use or remove any of these directives, and add custom NPM modules in here. Custom NPM modules will be automatically installed once you run or export your app.
Change the code to use our native date picker component.
import DatePicker from 'react-native-datepicker';

export default DatePicker;
Let's recap. While the editor uses a visual representation of the third-party component, we'll render the component natively when we actually run or export our app.

In the rest of our app, we can now use DatePicker as if it were a normal Laska component, which it is. But when we run on our device, we'll see the real thing.

We're done! Try running the app on your device, and try changing properties of your DatePicker component while the app is running. You may feel that additional tweaking is required, or that you're happy with the result.

If you'd like to see the end result of this tutorial, check out the demo app. To try it on your own device, make sure to clone the project first.
Nick Janssen
Questions? Comments? Let us know! 😊