CODEWITHSUNDEEP
javascriptreact-native
kyrilkin
kyrilkin

Reputation: 193

How to create button with icon using react-native?

How to create button like this:

image

using react-native?

Upvotes: 0

Views: 209

Answers (1)

Nader Dabit
Nader Dabit

Reputation: 53711

There are a lot of ways to answer this question, depending on what else you have going on in your application. The one thing I've found that is important when styling in React Native is understanding the FlexBox properties, which will allow you to do pretty much any layout you can imagine once you learn them.

I've gone ahead and set up a sample project here with a button similar to the one above implemented in code, and I've also posted the code below. Note that there are a ton of ways to achieve this, this is just one of the many ways.

https://rnplay.org/apps/yNKoGA

<TouchableHighlight underlayColor="#ededed" style={{borderRadius:10, height:60, borderWidth:1, marginLeft:80, marginRight:80}}>
    <View style={{flexDirection: 'row', }}>
        <View>
            <Image style={{marginTop:9, marginLeft:4,width:40, height:40}} source={{uri: 'http://www.iconpng.com/png/iconographicons/basketball19.png'}} />
        </View>
        <Text style={{ fontSize:20, marginLeft:10, marginTop:16 }}>Login</Text>
    </View>
</TouchableHighlight>

Upvotes: 3

Related Questions