React native добавляем иконки

Документация как добавлять иконки можно посмотреть здесь: https://docs.expo.io/versions/v36.0.0/guides/icons/

Сами иконки: https://expo.github.io/vector-icons/

Устанавливаем пакет с иконками

npm install @expo/vector-icons

Далее импортируем библиотеку, которая необходима для выбранной иконки с сайта, например так:

import {MaterialCommunityIcons} from '@expo/vector-icons';

Потом вставляем в код с именем иконки найденной на сайте, например так:

<MaterialCommunityIcons name='email-outline' />

Или так:

<MaterialCommunityIcons.Button 
  name='email-outline' 
  onPress={pressLogin}
>
  Почта
</MaterialCommunityIcons.Button>

Создаем свою кнопку которая будет одинаково выглядеть и на iOS и на Android

Например так, файл AppButton.js:

import React from 'react';
import {StyleSheet, View, TouchableOpacity} from 'react-native';
import {AppTextBold} from './AppTextBold';
import { THEME } from '../../theme';

export const AppButton = ({children, onPress, color=THEME.MAIN_COLOR}) => {
    return (
        <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
            <View style={{...styles.button, backgroundColor: color}}>
                <AppTextBold style={styles.text}>{children}</AppTextBold>
            </View>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    button: {
        paddingHorizontal: 20,
        paddingVertical: 10,
        borderRadius: 50,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        color: '#fff',
    }
})

Использование этой кнопки:

<AppButton onPress={pressLogin}>Почта</AppButton>

Использование этой кнопки с иконкой:

<AppButton onPress={pressLogin}>
   <MaterialCommunityIcons name='email-outline' size={20} />
</AppButton>