Touchable Opacity is half way through

Question

My code is the following My touchable opacity that does the d.onSelect is not being responsive, it only responds to the upper top half around the border, but nothing happens when I press on a players component from the bottom half. can any one explain or help

   <>
                                  <TouchableOpacity
                                    onPress={
                                      props.disabled === true
                                        ? () => null
                                        : d.onSelect
                                    }
                                    style={{
                                      backgroundColor: 'red'
                                    }}
                                  >
                                    <LinearGradient
                                      colors={[Colors.Player1, Colors.Player2]}
                                      style={{
                                        borderRadius: 10,
                                        margin: 10,
                                        paddingHorizontal: 3,
                                        paddingVertical: 10,
                                        justifyContent: 'center',
                                        alignItems: 'center',
                                        borderColor: Colors.Player1,
                                        borderWidth: 3,
                                        backgroundColor: Colors.NewBlue
                                      }}
                                    >
                                      <ImageBackground
                                        source={require('../assets/frame2.png')}
                                        style={{
                                          height: 40,
                                          width: 40,
                                          justifyContent: 'center',
                                          alignItems: 'center',
                                          overflow: 'hidden'
                                        }}
                                      >
                                        <Image
                                          source={{ uri: d.image }}
                                          style={{
                                            height: '75%',
                                            width: '75%'
                                          }}
                                          resizeMode='contain'
                                        />
                                      </ImageBackground>
                                      <Text
                                        style={{
                                          textAlign: 'center',
                                          color: '#fff',
                                          textShadowColor:
                                            'rgba(0, 0, 0, 0.75)',
                                          textShadowOffset: {
                                            width: 1,
                                            height: 1
                                          },

                                          textShadowRadius: 1,
                                          fontSize: 9,
                                          fontFamily: 'Montserrat_semi_bold'
                                        }}
                                      >
                                        {d.name && d.name.split(' ', 1)}
                                      </Text>
                                    </LinearGradient>
                                  </TouchableOpacity>
                                </>

which results in the image

Answer 1

Without knowing all the context or having an expo snack, I'd say you need to ensure you have flex:1 set on the TouchableOpacity component. In addition, assure that the rest of your images fit within that flex:1