# Pipeline specific branch improvment, webview height fix - Tues-Fri 9th-12th Feb, 2021

### Pipeline

Few interesting things this week. Created some *testbuild* pipelines for C+, that work for either staging or prod environments. If you pass a branch name as an env variable it will build from that, otherwise it will just take the latest master commit. They then create a new TestFlight build on iOS or simply an .apk on Android.

The logic to use a custom branch is as follows:

if [ ! -z "${BRANCH_NAME}" ] && [ "${BRANCH_NAME}" != "master" ] ; then
  echo "Creating new build from ${BRANCH_NAME}"
  git checkout ${BRANCH_NAME};
else
  echo "Creating new build from MASTER...\n\n Did you mean to pass a branch name?";
fi;

### WebView

I also had a bug with my height-adjusted webview. It was sometimes setting the height of the webview wrong, meaning blog articles would get "cut-off" mid-way through. This was because when the height was getting passed back to the React side, some elements (such as images) had not fully loaded in, meaning they eventually occupied more vertical height.

The fix was to pass my `INJECTED_JAVASCRIPT` function (which just passes back the height of the HTML body) `onLoadEnd`:

const [webViewHeight, setWebViewHeight] = useState(0)

// get height of webview
const onWebViewMessage = useCallback((event: WebViewMessageEvent) => {
    setWebViewHeight(Number(JSON.parse(event.nativeEvent.data).height) ?? 500)
}, [])

const INJECTED_JAVASCRIPT = `(function() {
  window.ReactNativeWebView.postMessage(JSON.stringify({
    height: document.body.scrollHeight,
  }));
})();`

const webviewRef = useRef<NativeWebView>(null)

return (
    <Wrapper height={webViewHeight || undefined} flexGrow={1}>
        <NativeWebView
            ref={webviewRef}
            style={{
                ...(style as object),
                height: '100%',
            }}
            onMessage={onWebViewMessage}
            injectedJavaScript={INJECTED_JAVASCRIPT}
            onLoadEnd={() => {
                // Need to set height again onLoadEnd in cases where there is a delay loading large images which can alter the height of the webview.
                webviewRef.current?.injectJavaScript(INJECTED_JAVASCRIPT)
            }}
            startInLoadingState
            {...props}
        />
    </Wrapper>

###### tags: `programmingjournal` `2021` `C+` `pipelines` `webview` `branch`