Joseph Jude

Consult . Code . Coach

Adding buttons with images in React Native


code . nodejs . rn . react

Almost all mobile applications use buttons and images. In this tutorial, we will learn to add buttons and images to a React Native application.

We will use TouchableOpacity to create the button. We will show an alert when this button is pressed. And then we will style this component to look like a button and add an image to it.

Buttons with images in React Native

We will start with importing a TouchableOpacity and place it within the root view. We are reusing the code from the previous post.

If you have not already done, read the first post in this series to understand how to get started with React Native development.

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity>
          <Text>Click Me!</Text>
        </TouchableOpacity>
        <Text>We are just getting started</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

If you execute this (either with npm start or with expo), you will see the app as in the first screenshot in the banner image.

Now let us add some action to the button. TouchableOpacity supports OnPress event. We will use this event to show an alert. Add the following line to TouchableOpacity component:

onPress={()=>{alert("you clicked me")}}

This will show an alert box with the text "you clicked me" when the button is pressed. The second screenshot in the banner image shows how it will look like.

The full program is as follows:

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={()=>{alert("you clicked me")}}>
          <Text>Click Me!</Text>
        </TouchableOpacity>
        <Text>We are just getting started</Text>
      </View>
    );
  }
}

So far we have not styled TouchableOpacity. So it doesn't look like a button. Let us add a style called button and attach it to our TouchableOpacity instance.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    backgroundColor: '#859a9b',
    borderRadius: 20,
    padding: 10,
    marginBottom: 20,
    shadowColor: '#303838',
    shadowOffset: { width: 0, height: 5 },
    shadowRadius: 10,
    shadowOpacity: 0.35,
  },
});

A button can have an image instead of a text. So let us import an image component and attach to the button (which is TouchableOpacity).

Create a folder called assets. Add an image. I added an image with filename 2.png. So the image component becomes:

<Image source={require("./assets/2.png")}/>

Attach this image component to our button. The full program becomes as this:

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button} onPress={()=>{alert("you clicked me")}}>
          <Image source={require("./assets/2.png")}/>
        </TouchableOpacity>
        <Text>We are just getting started</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    backgroundColor: '#859a9b',
    borderRadius: 20,
    padding: 10,
    marginBottom: 20,
    shadowColor: '#303838',
    shadowOffset: { width: 0, height: 5 },
    shadowRadius: 10,
    shadowOpacity: 0.35,
  },
});

If you execute it, it will look like the last screenshot in the banner image.

Want to learn React Native for free? Subscribe with the below form.

This is part of Learn React Native series


Like the post? Retweet it. Got comments? Reply.

Adding buttons with images in React Native by @jjude: https://t.co/bO8o9N1U2t

— Joseph Jude (@jjude) November 23, 2017
Share this on: Twitter / /

Comments

comments powered by Disqus