CODEWITHSUNDEEP
react-nativecomponents
yarin Cohen
yarin Cohen

Reputation: 1142

How to show an image once a button has pressed in React native

I have a button and when you click it, it calls a function that returns an Image object from react.js website, how ever the image is not shown when I click the button.

Here is my code:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button, Image } from 'react-native';

export default function App() {

  function getImage() {
    return (
      <Image
      source={{
        uri: 'https://reactjs.org/logo-og.png',
        method: 'POST',
        headers: {
          Pragma: 'no-cache',
        },
        body: 'Your Body goes here',
      }}
      style={{width: 400, height: 400}}
    />
    )
  }

  return (
    <View style={styles.container}>
      <Button
        onPress={getImage}
        title="Click me"
        color="#841584"
      />
      
      <StatusBar style="auto" />
    </View>
  );
}

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

Upvotes: 0

Views: 878

Answers (1)

pera
pera

Reputation: 164

Well, you are not rendering anything... What you should probably do is have a state that tells if the button was clicked or not and based on that state decide if you want to render the image instead of the button maybe? Something like this:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button, Image } from 'react-native';

export default function App() {
  const [isShowingImage, setShowingImage] = React.useState(false)

  return (
    <View style={styles.container}>
      {
        isShowingImage ?
        (
         <Image
           source={{
           uri: 'https://reactjs.org/logo-og.png',
           method: 'POST',
           headers: {
             Pragma: 'no-cache',
           },
            body: 'Your Body goes here',
           }}
           style={{width: 400, height: 400}}
          />
         ) : (
      <Button
        onPress={() => setShowingImage(true)}
        title="Click me"
        color="#841584"
      /> )
      }
      <StatusBar style="auto" />
    </View>
  );
}

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

Upvotes: 1

Related Questions