CODEWITHSUNDEEP
react-native
Sihem Hcine
Sihem Hcine

Reputation: 1129

How to define image as a background button

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

Upvotes: 4

Views: 31480

Answers (4)

IdleWork
IdleWork

Reputation: 21

This one worked the best with resizeable image and reusability:

import {
  ImageBackground,
  ImageSourcePropType,
  Pressable,
  StyleSheet,
} from 'react-native';

interface Props {
  image: ImageSourcePropType;
  onPress: () => void;
}

export const ImageButton = ({
  image,
  onPress,
}: Props) => {
  return (
    <ImageBackground
      source={image}
      resizeMode="contain"
      resizeMethod="resize"
      style={styles.container}>
      <Pressable
        onPress={onPress}
        style={styles.button}
      />
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  container: {
    height: "auto",
    width: 200,
  },
  button: {
    flex: 1,
  }
});

Upvotes: 0

Bruno Pintos
Bruno Pintos

Reputation: 481

Use TouchableOpacity and ImageBackground from "react-native" like this:

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

export default function App() {
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => alert("Button pressed")}>
        <ImageBackground source={require("./assets/anImage.png")} style={{}}>
          <Text style={styles.title}>Press Me</Text>
        </ImageBackground>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    color: "white",
    fontSize: 24,
    padding: 20,
  }
});

Upvotes: 0

onmyway133
onmyway133

Reputation: 48115

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'
  }
})

Upvotes: 2

nirsky
nirsky

Reputation: 3105

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: {...}
});

Upvotes: 12

Related Questions