center a text next to an image

Question

I have a screen called Tools, which allows me to redirect my user to multiple child screens. I want to align the text in the middle of the image. I got to do this:

But I have the impression that it is not perfectly aligned in the center, an offset is created, I do not know if you can see it.

Could you give me your help on this point, how can I improve this?

The code :

export default function Tools({navigation}) {

  return (
    <ScrollView>
    <View style={styles.screen}>
      <View style={styles.row}>
        <Text style={{marginHorizontal: 25, fontSize: 16}}>{i18n.t("tools.action.account")}</Text>
        <TouchableOpacity
          onPress={() => navigation.navigate('Account')}
          style={styles.roundButton}>
          <Image source={require("../../assets/images/accounting.png")} style={styles.img}/>
        </TouchableOpacity>
      </View>
      <View style={styles.row}>
        <TouchableOpacity
          onPress={() => navigation.navigate('Scan')}
          style={styles.roundButton}>
          <Image source={require("../../assets/images/barcode.png")} style={styles.img}/>
        </TouchableOpacity>
        <Text style={{marginHorizontal: 25, fontSize: 16}}>{i18n.t("tools.action.scanProducts")}</Text>
      </View>
      <View style={styles.row}>
        <Text style={{marginHorizontal: 25, fontSize: 16}}>{i18n.t("tools.action.ticket")}</Text>
        <TouchableOpacity
          onPress={() => navigation.navigate('Tickets')}
          style={styles.roundButton}>
          <Image source={require("../../assets/images/ticket.png")} style={styles.img}/>
        </TouchableOpacity>
      </View>
      <View style={styles.row}>
        <TouchableOpacity
          onPress={() => navigation.navigate('Checkout')}
          style={styles.roundButton}>
          <Image source={require("../../assets/images/cash-register.png")}
                 style={styles.img}/>
        </TouchableOpacity>
        <Text style={{marginHorizontal: 25, fontSize: 16}}>{i18n.t("tools.action.cash")}</Text>
      </View>
            <View style={styles.row}>
        <Text style={{marginHorizontal: 25, fontSize: 16}}>{i18n.t("tools.action.products")}</Text>
        <TouchableOpacity
          onPress={() => navigation.navigate('Products')}
          style={styles.roundButton}>
          <Image source={require("../../assets/images/products.png")} style={styles.img}/>
        </TouchableOpacity>
      </View>
    </View>
   </ScrollView>
  );
}

The style :

 screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
row: {
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent:'center',
   width : '100%',
 },
roundButton: {
    marginTop: 20,
    width: 100,
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    borderRadius: 100,
    backgroundColor: 'orange',
  },
  img: {
    width: 50,
    height: 50,
  },

Answer 1

Remove marginTop from roundButton:

 roundButton: {
    width: 100,
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    borderRadius: 100,
    backgroundColor: 'orange',
  },

Working Example: Expo Snack

I added pink background just to highlight the row and show that text is centered, remove it later :)

Full Source Code:

export default function Tools({ navigation }) {
  return (
    <ScrollView>
      <View style={styles.screen}>
        <View style={styles.row}>
          <Text style={{ marginHorizontal: 25, fontSize: 16 }}>
            {('tools.action.account')}
          </Text>
          <TouchableOpacity
            onPress={() => navigation.navigate('Account')}
            style={styles.roundButton}>
            <Image
              source={{uri: "https://i.sstatic.net/t8vJf.jpg?s=328&g=1"}}
              style={styles.img}
            />
          </TouchableOpacity>
        </View>
        <View style={styles.row}>
          <TouchableOpacity
            onPress={() => navigation.navigate('Scan')}
            style={styles.roundButton}>
            <Image
              source={{uri: "https://i.sstatic.net/t8vJf.jpg?s=328&g=1"}}
              style={styles.img}
            />
          </TouchableOpacity>
          <Text style={{ marginHorizontal: 25, fontSize: 16 }}>
            {('tools.action.scanProducts')}
          </Text>
        </View>
        <View style={styles.row}>
          <Text style={{ marginHorizontal: 25, fontSize: 16 }}>
            {('tools.action.ticket')}
          </Text>
          <TouchableOpacity
            style={styles.roundButton}>
            <Image
              source={{uri: "https://i.sstatic.net/t8vJf.jpg?s=328&g=1"}}
              style={styles.img}
            />
          </TouchableOpacity>
        </View>
        <View style={styles.row}>
          <TouchableOpacity
            style={styles.roundButton}>
            <Image
              source={{uri: "https://i.sstatic.net/t8vJf.jpg?s=328&g=1"}}
              style={styles.img}
            />
          </TouchableOpacity>
          <Text style={{ marginHorizontal: 25, fontSize: 16 }}>
            {('tools.action.cash')}
          </Text>
        </View>
        <View style={styles.row}>
          <Text style={{ marginHorizontal: 25, fontSize: 16 }}>
            {('tools.action.products')}
          </Text>
          <TouchableOpacity
            style={styles.roundButton}>
            <Image
              source={{uri: "https://i.sstatic.net/t8vJf.jpg?s=328&g=1"}}
              style={styles.img}
            />
          </TouchableOpacity>
        </View>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    backgroundColor: "pink",
    margin: 5
  },

  roundButton: {
    width: 100,
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    borderRadius: 100,
    backgroundColor: 'orange',
  },
  img: {
    width: 50,
    height: 50,
  },
});