How to define image as a background button

Question

I try this code to make image as background for button :

      <Button  style= {styles.btn }>
          <Image source={ require('.src.png')}  style={styles.img}/>
          <Text> title </Text> 
      </Button>

But I don't get the correct result Any help, please

Answer 1

Button element has pretty specific use, try using TouchableOpacity instead, also, your Text need to be absolute in order to appear over the Image:

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

const button = () =>
    <TouchableOpacity style={styles.btn}>
        <View style={styles.absoluteView}>
            <Text>title</Text>
        </View>
        <Image source={require('.src.png')}  style={styles.img}/>
    </TouchableOpacity>;

const styles = StyleSheet.create({
    absoluteView: {
        flex: 1,
        position: 'absolute',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'transparent'
    },
    img: {...},
    btn: {...}
});

Answer 2

Here is a simple ImageButton

import React from 'react'
import { TouchableOpacity, View, Image, Text, StyleSheet } from 'react-native'
import images from 'res/images'
import colors from 'res/colors'

export default class ImageButton extends React.Component {
  render() {
    return (
      <TouchableOpacity style={styles.touchable}>
        <View style={styles.view}>
          <Text style={styles.text}>{this.props.title}</Text>
        </View>
        <Image
          source={images.button}
          style={styles.image} />
      </TouchableOpacity>
    )
  }
}

const styles = StyleSheet.create({
  view: {
    position: 'absolute',
    backgroundColor: 'transparent'
  },
  image: {

  },
  touchable: {
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    color: colors.button,
    fontSize: 18,
    textAlign: 'center'
  }
})