Search code examples
javascriptreactjsreact-nativereact-domreact-native-web

How to have two centered and clickable image link in react-native


I want to have the two images clickable next to each over, this is my view:

    function MyView(props) {
        return (
              <View style={{ flex: 1, }}>
                <View style={{
                  // width: 230,
                  flex: 1,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                  <ExternalLink href="https://play.google.com/store/apps/details">
                    <Image
                      source={availableAtGooglePlayImage}
                      style={{
                        width: '100%',
                        height: 70,
                        flex: 1,
                        marginTop: 10,
                        resizeMode: 'contain',
                      }}
                    />
                  </ExternalLink>
                </View>
                <View style={{
                  // width: 230,
                  flex: 1,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                  <ExternalLink href="https://itunes.apple.com/fr/app">
                    <Image
                      resizeMode="stretch"
                      source={availableAtAppStoreImage}
                      style={{
                        width: '100%',
                        height: 70,
                        flex: 1,
                        marginTop: 10,
                        resizeMode: 'contain',
                      }}
                    />
                  </ExternalLink>
                </View>
        );
    }

As soon as I use flex: 1 on the parent view of ExternalLink, the image disappear.

I have not found a way to get those two images next to each over.

I have only find a way to have them on top of each over, and the whole width is clickable but I want only the image to be clickable.

How this is possible in react-native ?


Solution

  • Can you check this code please, this is a working example expo :

    import * as React from 'react';
    import { Text, View, StyleSheet ,Image,TouchableOpacity,Linking } from 'react-native';
    
    
    
    
    export default class App extends React.Component {
      render() {
        return (
          <View style={styles.container}>
           <View>
           <TouchableOpacity onPress={() =>Linking.openURL("https://play.google.com/store/apps/details")}>
            <Image style={{height:50,width:50}} source={{uri:"https://source.unsplash.com/random"}} />
            </TouchableOpacity>
           </View>
           <View>
            <TouchableOpacity onPress={() =>Linking.openURL("https://itunes.apple.com/fr/app")}>
            <Image style={{height:50,width:50}} source={{uri:"https://source.unsplash.com/random"}} />
            </TouchableOpacity>
           </View>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        flexDirection:'row',
        justifyContent:'space-around',
        alignItems:'center',
    
      },
    
    });
    

    Feel free for doubts