file for StackOverflow answer.

App.js

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image 
          source={{ uri:"https://preview.ibb.co/e883Jw/2010_brown_bear.jpg" }}
          style={ styles.imageWrapper }>
          <TouchableOpacity 
            style={ styles.button } 
            onPress={ () => { alert("handler here") }}>
            <Text style={ styles.text }>×</Text>
          </TouchableOpacity>
        </Image>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 64,
    backgroundColor: '#ecf0f1',
  },
  imageWrapper:{
     width:200,
     height:300,
     borderRadius:20 
  },
  button:{
    width:30,
    height:30,
    backgroundColor:'red',
    alignItems:'center',
    justifyContent:'center',
    overflow:'hidden',
    borderRadius:20,
    position:'absolute',
    left:20,
    top:20
  },
  text:{
    fontSize:40,
    color:'white',
    lineHeight:42
  }
});

Error. The component cannot contain children. If you want to render content on top of the image, consider using the

Image tag does not allow nested children components or tags. Use ImageBackground instead

since then react native has changed a lot, replace component with component will be fine.

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ImageBackground 
          source={{ uri:"https://preview.ibb.co/e883Jw/2010_brown_bear.jpg" }}
          style={ styles.imageWrapper }>
          <TouchableOpacity 
            style={ styles.button } 
            onPress={ () => { alert("handler here") }}>
            <Text style={ styles.text }>×</Text>
          </TouchableOpacity>
        </Image>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 64,
    backgroundColor: '#ecf0f1',
  },
  imageWrapper:{
     width:200,
     height:300,
     borderRadius:20 
  },
  button:{
    width:30,
    height:30,
    backgroundColor:'red',
    alignItems:'center',
    justifyContent:'center',
    overflow:'hidden',
    borderRadius:20,
    position:'absolute',
    left:20,
    top:20
  },
  text:{
    fontSize:40,
    color:'white',
    lineHeight:42
  }
});