Problem with lining up contents: react native

Question

I'm currently having a problem with the clickable size of a reusable button which includes an icon and text. When I run this code it seems like the entire row becomes clickable when I only want the icon and text to become clickable. Does anyone know how to solve this problem? Thanks

App.js

import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import IconTextButton from './components/iconTextButton';

export default function App() {

  return (
    <View style={styles.container}>
      <Text style={{marginTop: 100}}>My First React App! Sike </Text>
      <IconTextButton iconFont="ionicons" iconName="pencil" iconSize={25} text="Add Items"/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'powderblue',
  },
});

iconTextButton.js

import React from 'react';
import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';
import Ionicon from 'react-native-vector-icons/Ionicons';


export default function IconTextButton({ iconFont, iconName, iconSize, text, onPress }) {

    const getIconFont = (iconFont) => {
        switch (iconFont) {
            case "ionicons":
                return Ionicon;
        }
    };

    const FontIcon = getIconFont(iconFont);

    return (
        <TouchableOpacity onPress={onPress} style={styles(iconSize).container>
            <FontIcon name={iconName} size={iconSize} style={styles(iconSize).buttonIcon}>
                <Text style={styles(iconSize).buttonText}>{text}</Text>
            </FontIcon>
        </TouchableOpacity>
    )
}

const styles = (size) => StyleSheet.create({
    container: {
        backgroundColor: 'pink',
    },
    buttonIcon: {
        backgroundColor: 'yellow',
        width: size,
    },
    buttonText: {
        backgroundColor: 'green'
    },
})

Along with the code I've tried, I've also tried to keep and as seperate contents whilst adding a flexDirection: 'row' inside styles.container. This keeps the contents in the same line but it still makes the whole row clickable. I've also tried putting everything in a and moving the styles.container to the component and adding a height: size into styles.container. This makes the clickable component limited however, the component is hidden underneath due to the restricted height. I have also tried simply just using instead of making a reusable const that its an input. The same thing applies.

Answer 1

You can wrap your Icon and Text Component in a View component and then wrap it inside a TouchableOpacity Component

Try this or do something like this :

import React from 'react';
import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';
import Ionicon from 'react-native-vector-icons/Ionicons';


export default function IconTextButton({ iconFont, iconName, iconSize, text, onPress }) {

    const getIconFont = (iconFont) => {
        switch (iconFont) {
            case "ionicons":
                return Ionicon;
        }
    };

    const FontIcon = getIconFont(iconFont);

    return (
        <TouchableOpacity onPress={onPress} style={styles(iconSize).container}>
            <View style={styles(iconSize).iconTextContainer}>
                <FontIcon name={iconName} size={iconSize} style={styles(iconSize).buttonIcon} />
                <Text style={styles(iconSize).buttonText}>{text}</Text>
            </View>
        </TouchableOpacity>
    )
}

const styles = (size) => StyleSheet.create({
    container: {
        backgroundColor: 'pink',
    },
    iconTextContainer: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    buttonIcon: {
        backgroundColor: 'yellow',
        width: size,
    },
    buttonText: {
        backgroundColor: 'green'
    },
})