CtrLog

<WebView     source={{url: 'https://www.google.com'}}     style={{         height: webviewHeight     }} injectedJavaScript={'window.location.hash = 1;              var calculator = document.createElement("div");              calculator.id = "height-calculator";              while (document.body.firstChild) {                 calculator.appendChild(document.body.firstChild);              }              document.body.appendChild(calculator);              document.title = calculator.clientHeight;'}     javaScriptEnabled ={true}     scrollEnabled={false}     onNavigationStateChange={(navStates) => {         if (navStates.title && !isNaN(navStates.title)) {             const htmlHeight = Number(navStates.title) //convert to number             setWebViewHeight(htmlHeight);                      }     }} />

Assumption: You have some Ionic project already developed and you want to reuse that in react-native project. Idea: Idea is to copy your ionic build (www folder) to react-native project, create local server in react-native to serve those files. Then create a webview and open that url in webview. Another part is taking care or device back button to drive navigation. Step 1:   Add platform browser to your ionic project. Make browser build Create zip (www.zip) of your ionic browser build. (Folder to zip is platforms/browser/www) Step 2: Copy zip created in step 1 to your-react-native-project-root/android/app/src/main/assets Step 3: Creating component in react-native which will  unzip www.zip,  create and start local server to serve files from unzipped folder create webview to open url of local server. To create such component we will need to add below npm dependencies to your react-native project react-native-static-server rn-fetch-blob react-native-

export function DropDownCell (props) { const [dropDownVal , setDropDownValue] = useState (props?. cellInfo ?.cell?. value ) ; useEffect (() => { if (props?. cellInfo ?.cell?. value && (dropDownVal !== props?. cellInfo ?.cell?. value )) { setDropDownValue(props?. cellInfo ?.cell?. value ) ; } } , [props?. cellInfo ?.cell?. value ]) ; const handleChange = (e) => { setDropDownValue(e. target . value ) ; props. updateHandler (props?. cellInfo ?. row ?. index , props?. cellInfo ?. column ?. id , e. target . value ) ; } ; return <div> <Form.Group className = { 'm-0' } > <Form.Control as = { 'select' } id = {props?. cellInfo ?. row ?. index + '_' + props?. cellInfo ?. column ?. id } value = {dropDownVal ? dropDownVal : '' } required = {props?. required } onChange =

Angular 2,..,7 provides several ways to add classes conditionally: type one [ class . my - class ]= "step=='step1'" type two [ ngClass ]= "{'my-class': step=='step1'}" and multiple option: [ ngClass ]= "{'my-class': step=='step1', 'my-class2':step=='step2' }" type three [ ngClass ]= "{1:'my-class1',2:'my-class2',3:'my-class4'}[step]" type four [ ngClass ]= "(step=='step1')?'my-class1':'my-class2'"

In your angular ionic projects angular.json file look for "sourceMap" field, make it true. This will generate source map for you every time you build your project whether its prod or non prod build. Now we dont want this source map files to go in build because of security risk and also your build size will increase drastically. To resolve this we can write two custom scripts which will copy your soruce map files to some other folder. We need to call script using before build and after build hooks provided by Ionic. So alter your ionic.config.json as follows: { "name": "list-creator-app", "integrations": { "cordova": {} }, "type": "angular", "hooks": { "build:before": "./scripts/ionic-before-build.js", "build:after": "./scripts/ionic-post-build.js" } } Create scripts folder in your directory and put below script files in it. ionic-po

#assuming source maps as present in 'source-map' directory in your project for f in www/*.js ; do f= $ {f#"www/"}; minifiedUrl= "http://localhost/" $f; sourceMap= "@source-map/" $f ".map" #echo $sourceMap; curl --http1.1 https://upload.bugsnag.com/ -F apiKey=<your-key-here> -F appVersion=<your-app-version-here> -F minifiedUrl=$minifiedUrl -F sourceMap=$sourceMap; done

@ViewChild ( 'img' , { static : true }) img : any; zoomLevel : number = 100 ; scaling : boolean; pinchZoom () { let oldDist = undefined; this . renderer . listen ( this . img . nativeElement , 'touchstart' , (e) => { if (e. touches . length === 2 ) { this . scaling = true; } }) ; this . renderer . listen ( this . img . nativeElement , 'touchmove' , (e) => { if ( this . scaling ) { let newDist = Math . hypot ( e. touches [ 0 ]. pageX - e. touches [ 1 ]. pageX , e. touches [ 0 ]. pageY - e. touches [ 1 ]. pageY ) ; this . zoomBy ( this . img . nativeElement , (newDist > oldDist)) ; oldDist = newDist ; } }) ; this . renderer . listen ( this . img . nativeElement , 'touchend' , (e) => { if ( this . scaling ) { this . scaling = false; } oldDist = undefined; }) ; } z