Creating react native app custom background behind image or border

Issue

I need help with icons for my app. I keep getting gray borders around the characters and I want to insert a custom background behind each character. I'm just lost. Any help would be appreciated.

Here is the code from the React native project.

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

export default class App extends Component() {
  render() {
    return (
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <TouchableOpacity style={styles.button}>
          <Image source={{ uri: 'http://www.pngmart.com/files/2/Spider-Man-Transparent-Background.png' }}
            style={{ width: 122, height: 550 }} />
        </TouchableOpacity>
        <TouchableOpacity style={styles.button}>
          <Image source={{
            uri:
              'https://vignette.wikia.nocookie.net/avengers-assemble/images/d/d6/Usa_avengers_skchi_blackwidow_n_6e8100ad.png/revision/latest/scale-to-width-down/449?cb=20170426073401'
          }}
            style={{ width: 122, height: 550 }} />
        </TouchableOpacity>
        <TouchableOpacity style={styles.button}>
          <Image source={{ uri: 'https://clipart.info/images/ccovers/1516942387Hulk-Png-Cartoon.png' }}
            style={{ width: 122, height: 500 }} />
        </TouchableOpacity>
        <ImageBackground source={{ uri: 'http://www.color-hex.com/palettes/6563.png' }} style={{ width: '100', height: '100' }}>
          <Text>Inside</Text>
        </ImageBackground>
      </View>
    );
  }
}
///need help with coloring each icon
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'blue',
    alignItems: 'bottom',
    justifyContent: 'bottom',
  },
  button: {
    backgroundColor: '#859a9b',
    borderRadius: 150,
    padding: 1,
    marginBottom: -100,
    shadowColor: 'white',
    shadowOffset: { width: 10, height: 0 },
    shadowRadius: 20,
    shadowOpacity: 0.45,
  },
});

Solution

First of all please provide correct working code in stackoverflow.
There are some errors in your code here.

Errors

1. Invalid prop in alignItems style in your code. There is no prop called bottom. It needs to be alignItems:'flex-end'
2. Invalid prop in justifyContent in your code. That should be justifyContent: 'flex-end' . More about layout props

To avoid gray border around characters firstly you need to get your device width and height.

import {Dimensions} from 'react-native'

Then after that create const for get device width and height before your main class.

const width = Dimensions.get('window').width; 
const height = Dimensions.get('window').height;

You need to add background image code like this..

  <ImageBackground source={{uri: 'http://www.color-hex.com/palettes/6563.png'}}
    style={{width: width, height: height,flexDirection:'row'}}>
    </ImageBackground>

Remove the button background color code backgroundColor: '#859a9b',

The full correct code should look like this...

import React, { Component } from 'react';

import { StyleSheet, Text, View, Image,ImageBackground,button,  
TouchableOpacity,Dimensions} from 'react-native';

const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;


export default class App extends Component<{}> {
  render() {
   return (
 <View style={{flex: 1, flexDirection: 'row'}}>
 <ImageBackground source={{uri: 'http://www.color-hex.com/palettes/6563.png'}} style={{width: width, height: height,flexDirection:'row'}}>

    <TouchableOpacity style={styles.button}>
      <Image source={{uri: 'http://www.pngmart.com/files/2/Spider-Man-Transparent-Background.png'}}
   style={{width: 122, height: 550}} />
    </TouchableOpacity>
    <TouchableOpacity style={styles.button}>
      <Image source={{uri:
      'https://vignette.wikia.nocookie.net/avengers-assemble/images/d/d6/Usa_avengers_skchi_blackwidow_n_6e8100ad.png/revision/latest/scale-to-width-down/449?cb=20170426073401'}}
   style={{width: 122, height: 550}} />
    </TouchableOpacity>
    <TouchableOpacity style={styles.button}>
      <Image source={{uri: 'https://clipart.info/images/ccovers/1516942387Hulk-Png-Cartoon.png'}}
   style={{width: 122, height: 500}} />
    </TouchableOpacity>


  </ImageBackground>
    </View>
  );
 }
}
///need help with coloring each icon
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'blue',
alignItems: 'flex-end',
justifyContent: 'flex-end',
  },
  button: {
borderRadius: 150,
padding: 1,
marginBottom: -100,
shadowColor: 'white',
shadowOffset: { width: 10, height: 0 },
shadowRadius: 20,
shadowOpacity: 0.45,
  },
});

Answered By - Akila Devinda