Did you already try with the following?  
 - `borderBottomLeftRadius`: number  
 - `borderBottomRightRadius`: number  
 - `borderTopLeftRadius`: number  
 - `borderTopRightRadius`: number  

Also, you can find more info in [the view component docs](https://facebook.github.io/react-native/docs/view.html).

Add the following properties in your style:

- `borderBottomLeftRadius: number`
- `borderBottomRightRadius: number`
- `borderTopLeftRadius: number`
- `borderTopRightRadius: number`

This worked for me.

Thanks

### Suppose only the radius is set for the upper left and lower left corners of the Image tag.

  
    &lt;View style={styles.imgBox}&gt;
      &lt;Image source={{ uri: &#39;your image url&#39; }} style={styles.img} /&gt;
    &lt;/View&gt;

     const styles = EStyleSheet.create({
     imgBox: {
           width: px(72),
           height: px(72),
           borderBottomLeftRadius: 2,
           borderTopLeftRadius: 2,
           overflow: &#39;hidden&#39;,
     },
     img: {
           width: px(72),
           height: px(72),
      },
    })


looks good for ios.


Say I put my code under `src` and tests under `spec`:

    + spec
    + --- classA.spec.ts
    + src
    + --- classA.ts
    + --- classB.ts
    + --- index.ts
    + tsconfig.json

I want to only transpile `src` to the `dist` folder. Since `index.ts` is the entry point of my package, my `tsconfig.json` look like this:

    {
      &quot;compileOptions&quot;: {
        &quot;module&quot;: &quot;commonjs&quot;
        &quot;outDir&quot;: &quot;dist&quot;
      },
      &quot;files&quot;: {
        &quot;src/index.ts&quot;,
        &quot;typings/main.d.ts&quot;
      }
    }

However, this `tsconfig.json` does not include the test files so I could not resolve dependencies in them.

On the other hand, if I include the test files into `tsconfig.json` then they are also transpiled to `dist` folder.

How do I solve this problem?




Setting up tsconfig with spec/test folder

I used [sdkman][1] to install groovy which went fine.  Where is the installed package now? I need the path for it.  I am on Ubuntu 14.04.

  [1]: http://sdkman.io/

Where does sdkman install packages?

How to use border radius in React Native only for 1 corner?

I have a modal window

[![http://f1.s.qip.ru/etSMz5YP.png][1]][1]


  [1]: http://i.stack.imgur.com/XvySU.png

As you can see bottom corners not rounded, it happens when I used backgroundColor for buttons. I was trying to set overflow hidden to modal wrapper and it didn&#39;t help me. Now I want to use border radius to buttons (only for 1 corner).

My code http://jsbin.com/sexeputuqe/edit?html,css

How to use border radius only for 1 corner (react-native)?

How to use border radius in React Native only for 1 corner?
I have a modal window
<a href="http://i.stack.imgur.com/XvySU.png" target="_blank" rel="noopener noreferrer"><img src="http://i.stack.imgur.com/XvySU.png" alt="http://f1.s.qip.ru/etSMz5YP.png"></a>
As you can see bottom corners not rounded, it happens when I used backgroundColor for buttons. I was trying to set overflow hidden to modal wrapper and it didn't help me. Now I want to use border radius to buttons (only for 1 corner).
My code <a href="http://jsbin.com/sexeputuqe/edit?html,css" target="_blank" rel="noopener noreferrer">http://jsbin.com/sexeputuqe/edit?html,css</a>

Lets say I have the following map:

    let myMap = new Map().set(&#39;a&#39;, 1).set(&#39;b&#39;, 2);

And I want to obtain `[&#39;a&#39;, &#39;b&#39;]` based on the above. My current solution seems so long and horrible.

    

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    let myMap = new Map().set(&#39;a&#39;, 1).set(&#39;b&#39;, 2);
    let keys = [];
    for (let key of myMap)
      keys.push(key);
    console.log(keys);

&lt;!-- end snippet --&gt;

There must be a better way, no?

How to convert Map keys to array?

I&#39;m trying to initialize an object in typescript which requires a JSON string for the &quot;options&quot; parameter. To be precise it is the object &lt;a href=&quot;https://developers.arcgis.com/javascript/jsapi/editor-amd.html&quot;&gt;here&lt;/a&gt;. The options parameter is required to be a JSON string and not an object for initializing the dijit. 

Is there a way to create a JSON string from a typescript object without it being a manual process? 


Please DO NOT link any questions which don&#39;t specifically say &quot;TypeScript&quot; as this question specifically relates to TypeScript. While a derivative of JavaScript the way that you write code is different and therefore this is the only post asking this question currently relating to TypeScript.



turn typescript object into json string

I found about JavaScript array operations Unshift, shift, push, pop

However all these operations mutate the array.

Is there a way I could use these functions without causing mutation on the original data? 

Somehow I feel that reading the data should not cause mutation.

JavaScript head and tail on array without mutation

Let&#39;s say I have a class `Person` which looks like this:

    class Person {
        constructor(
            public firstName: string,
            public lastName: string,
            public age: number
        ) {}
    }

I have overridden the `toString` method as follows.

    public toString(): string {
        return this.firstName + &#39; &#39; + this.lastName;
    }

Now I expect to be able to do the following, which works in runtime:

    function alertMessage(message: string) {
        alert(message);
    }

    alertMessage(new Person(&#39;John&#39;, &#39;Smith&#39;, 20));

But this still gives me this error:

&gt; TS2345: Argument of type &#39;Person&#39; is not assignable to parameter of type &#39;string&#39;.

How can I assign a `Person` to this `string` argument?

TypeScript override ToString()

Beyond the improved readability, is there any advantage to `includes` over `indexOf`?  They seem identical to me.

What is the difference between this

    var x = [1,2,3].indexOf(1) &gt; -1; //true

And this?    

    var y = [1,2,3].includes(1); //true

Array.prototype.includes vs. Array.prototype.indexOf

Suppose I have a text string that contains line-breaks, and I render it like this:

    render() {
        var text = &quot;One\nTwo\nThree&quot;;
        return &lt;div&gt;{text}&lt;/div&gt;;
    }

In HTML the line-breaks don&#39;t render as line-breaks. How should I do this in React? I don&#39;t want to convert to `&lt;br&gt;` tags and use `dangerouslySetInnerHTML`. Is there another way?

How to render a multi-line text string in React

How can I define a route in my routes.jsx file to capture the `__firebase_request_key` parameter value from a URL generated by Twitter&#39;s single sign on process after the redirect from their servers?

    http://localhost:8000/#/signin?_k=v9ifuf&amp;__firebase_request_key=blablabla

I tried with the following routes configuration, but the `:redirectParam` is not catching the mentioned param:

    &lt;Router&gt;
      &lt;Route path=&quot;/&quot; component={Main}&gt;
        &lt;Route path=&quot;signin&quot; component={SignIn}&gt;
          &lt;Route path=&quot;:redirectParam&quot; component={TwitterSsoButton} /&gt;
        &lt;/Route&gt;
      &lt;/Route&gt;
    &lt;/Router&gt;

How to get parameter value from query string?

I am making a React w/ Webpack setup and am struggling to do what seems like should be a simple task. I want webpack to include images, and minimize them like I with gulp but I can&#39;t figure it out. I just want to be able to link an image in my css like so:
    
    /* ./src/img/background.jpg */

    body { background: url(&#39;./img/background.jpg&#39;); }

I have all of my css/js/img folders inside a src folder. Webpack outputs to a dist folder, but I can&#39;t figure out how to get images there.

Here is my webpack setup:

     var path = require(&#39;path&#39;);
     var webpack = require(&#39;webpack&#39;);
     var HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);

     module.exports = {
      devtool: &#39;cheap-eval-source-map&#39;,
      entry: [
       &#39;webpack-dev-server/client?http://localhost:8080&#39;,
       &#39;webpack/hot/dev-server&#39;,
       &#39;./src/index.js&#39;
      ],
      output: {
      path: path.join(__dirname, &#39;dist&#39;),
      //  publicPath: &#39;./dist&#39;,
      filename: &#39;bundle.js&#39;
      },
      plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new HtmlWebpackPlugin({
      template: &#39;./src/index.html&#39;
       })
      ],
      module: {
      loaders: [{
       exclude: /node_modules/,
       test: /\.js?$/,
       loader: &#39;babel&#39;
       }, {
      test: /\.scss$/,
      loader: &#39;style!css!sass&#39;
        }, {
      test: /\.(png|jpg)$/,
      loader: &#39;file-loader&#39;
      }]
     },

     devServer: {
      historyApiFallback: true,
      contentBase: &#39;./dist&#39;,
      hot: true
      }
    };




How to use images in css with Webpack

I am a javascript/redux/react beginner building an small application with redux, react-redux, &amp; react. For some reason when using mapDispatchToProps function in tandem with connect (react-redux binding) I receive a TypeError indicating that dispatch is not a function when I try to execute the resulting prop. When I call dispatch as a prop however (see the setAddr function in the provided code) it works. 

   I&#39;m curious as to why this is, in the example TODO app in the redux docs the mapDispatchToProps method is setup the same way. When I console.log(dispatch) inside the function it says dispatch is type object. I could continue to use dispatch this way but I would feel better knowing why this is happening before I continue any further with redux. I am using webpack with babel-loaders to compile.

My Code:


    import React, { PropTypes, Component } from &#39;react&#39;;
    import { connect } from &#39;react-redux&#39;;
    import { setAddresses } from &#39;../actions.js&#39;;
    import GeoCode from &#39;./geoCode.js&#39;;
    import FlatButton from &#39;material-ui/lib/flat-button&#39;;

    const Start = React.createClass({
	    propTypes: {
		    onSubmit: PropTypes.func.isRequired
	    },

	    setAddr: function(){
		    this.props.dispatch(
			    setAddresses({
				    pickup: this.refs.pickup.state.address,
				    dropoff: this.refs.dropoff.state.address
			    })
		    )   

	    },

	    render: function() {
		    return (
		   	    &lt;div&gt;
				    &lt;div className=&quot;row&quot;&gt;
					    &lt;div className=&quot;col-xs-6&quot;&gt;
						    &lt;GeoCode ref=&#39;pickup&#39; /&gt;
					    &lt;/div&gt;
					    &lt;div className=&quot;col-xs-6&quot;&gt;
						    &lt;GeoCode ref=&#39;dropoff&#39; /&gt;
					    &lt;/div&gt;
				    &lt;/div&gt;
				    &lt;div className=&quot;row&quot;&gt;
					    &lt;div className=&quot;col-xs-6&quot;&gt;
						    &lt;FlatButton 
							    label=&#39;Does Not Work&#39;
							    onClick={this.props.onSubmit({
                                    pickup: this.refs.pickup.state.address,
				                    dropoff: this.refs.dropoff.state.address
                                })} 
							    /&gt;
					    &lt;/div&gt;
					    &lt;div className=&quot;col-xs-6&quot;&gt;
						    &lt;FlatButton 
							    label=&#39;Works&#39;
							    onClick={this.setAddr} 
							    /&gt;
					    &lt;/div&gt;
				    &lt;/div&gt;
			    &lt;/div&gt;
		    );
	    }
    })

    const mapDispatchToProps = (dispatch) =&gt; {
	    return {
		    onSubmit: (data) =&gt; {
			    dispatch(setAddresses(data))
		    }
	    }
    }

    const StartContainer = connect(mapDispatchToProps)(Start)

    export default StartContainer
    
Cheers.

&#39;dispatch&#39; is not a function when argument to mapToDispatchToProps() in Redux

I&#39;m new to React/Redux. I use a fetch api middleware in Redux app to process the APIs. It&#39;s ([redux-api-middleware][1]). I think it&#39;s the good way to process async api actions. But I find some cases which can&#39;t be resolve by myself.

As the homepage ([Lifecycle][2]) say, a fetch API lifecycle begins with dispatching a CALL_API action ends with dispatching a FSA action.

So my first case is showing/hiding a preloader when fetching APIs. The middleware will dispatch a FSA action at the beginning and dispatch a FSA action at the end. Both the actions are received by reducers which should be only doing some normal data processing. No UI operations, no more operations. Maybe I should save the processing status in state then render them when store updating.

But how to do this? A react component flow over the whole page? what happen with store updating from other actions? I mean they are more like events than state!

Even a worse case, what should I do when I have to use the native confirm dialog or alert dialog in redux/react apps? Where should they be put, actions or reducers?

Best wishes! Wish for replying.


  [1]: https://github.com/agraboso/redux-api-middleware
  [2]: https://github.com/agraboso/redux-api-middleware#lifecycle

How to show a loading indicator in React Redux app while fetching the data?

I&#39;ve built a [little iOS app](http://github.com/liamzebedee/tomtrack) in React Native that does location tracking, sending the lat/lng regularly to a server of the user&#39;s choosing. However this only works when the app is in the foreground. How can I run this task in the background when the user is in other apps?

How can I run background tasks in React Native?

How can I find the height of the status bar on Android through React Native?

If I check the `React.Dimensions` height the value seems to include the status bar height too but I&#39;m trying to find the height of the layout without the status bar.

How to find height of status bar in Android through React Native?

I am trying to implement react native webview component in my application, but the web view is not loading any url its just showing the white page.

    var React = require(&#39;react-native&#39;);
    var{
     View,
     Text,
     StyleSheet,
     WebView
    } = React;
    
    
    module.exports = React.createClass({
     render: function(){
       return(
         &lt;View style={styles.container}&gt;
          &lt;WebView source={{uri: &#39;https://m.facebook.com&#39;}} style= {styles.webView}/&gt;
         &lt;/View&gt;
       );
     }
    });
    
    var styles = StyleSheet.create({
       container: {
         flex:1,
         backgroundColor:  &#39;#ff00ff&#39;
       },webView :{
         height: 320,
         width : 200
       }
    });


Below is the screenshot of the output .
[![image][1]][1]


  [1]: http://i.stack.imgur.com/s70BK.png

React Native Webview not loading any url (React native web view not working)

This may be a naive question, but I couldn&#39;t find too much information on this topic. 
I have a fully functional react-redux application and I would now like to port it to iOS and Android. I have no need to use any native features like GPS or Camera etc. In theory I just want to make a sort of webview that runs the existing React app, and then tweak it until it looks more presentable. 
My first attempt was to simply use my current jsbundle file and stick it into the AppDelegate as the jsCodeLocation. That expectably caused all sorts of errors such as &quot;window&quot; not being defined. 

I guess my question is: how do people usually manage their native and non-native codebases? Are they completely separate, or is there a way to recycle most of the code? 

What is the quickest way to convert a React app to React Native?

I come to React Native development without previous experience in iOS development. I want to build release. .ipa file - ideally from the command line but the official documentation [Running On Device][1] is very brief.

I was able to deploy applications on my iPhone manually via XCode but still, I can&#39;t find any &quot;release IPA&quot; file. I have updated my code with `#ifdef DEBUG` directives to make it more generic.

Is there a way to build an application in release mode only via the command-line? If no, what is &quot;the official&quot; way to generate an RN application?

I am currently using RN 0.20.


  [1]: https://facebook.github.io/react-native/docs/running-on-device-ios.html#content

Content Type	Original Author	Original Content on Stackoverflow
Question	Maksim	View Question on Stackoverflow
Solution 1 - Javascript	Matteo Mazzarolo	View Answer on Stackoverflow
Solution 2 - Javascript	Syn Adhitya	View Answer on Stackoverflow
Solution 3 - Javascript	Shirly Chen	View Answer on Stackoverflow

How to use border radius only for 1 corner (react-native)?

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

Suppose only the radius is set for the upper left and lower left corners of the Image tag.

Where does sdkman install packages?

Setting up tsconfig with spec/test folder

Attributions