Elaryks

Картинки переключаются (это видно, если убрать overflow: hidden у .card-list). Просто они расположены в столбик, который ограничен по высоте, при этом неактивные карточки занимают своё положение в документе даже при opacity: 0. Вероятно, вы где-то пропустили часть логики или стилей, чтобы первая картинка заменялась на активную картинку. Поскольку у карточек в вашем примере размеры одинаковые, достаточно заменить position: relative на position: absolute у .card.

Судя по документации, маска должна выглядеть примерно так:

const telMask = new Inputmask('+11 (999) 999-99-99');

Можно попробовать как-то так:

const styles: StyleSheet.NamedStyles<any> = {
    button: {
        position: 'absolute',
    },
}

export const scaledStyles = StyleSheet.create(styles);

Или так:

const styles = {
    button: {
        position: 'absolute',
    },
}

export const scaledStyles = StyleSheet.create<any>(styles);

У вас используется асинхронная функция, которая возвращает промис. Соответственно, результата её выполнения нужно сначала дождаться. Поэтому getCharacters().data === undefined, и уже даже из этого очевидно, что getCharacters().data.results приведёт к ошибке, т.к. это попытка обратиться к свойству у undefined.

Вашу проблему можно решить, используя хук useEffect с пустым массивом зависимостей, благодаря чему он сработает только при монтировании/размонтировании компонента:

const [dataCards, setDataCards] = useState([]);

useEffect(() => {
    getCharacters().then((data) => setDataCards(data));
}, []);

Здесь мы изначально инициализируем dataCards как пустой массив (что логично, ведь данных пока что нет). При монтировании компонента сработает useEffect, внутри него мы получим данные и уже их сможем использовать в dataCards.

Кстати, обратите внимание, что вы указали настоящий ключ API.

export const Footer = (props?: IFooterProps) => {
  return (
    <View style={styles.container}>
      {props?.button ? (
        <>
          <RNHoleView style={styles.background} holes={[hole]}>
            <View style={styles.maskBorder}></View>
          </RNHoleView>
          {props.button}
        </>
      ) : (
        <View style={styles.background}></View>
      )}
    </View>
  );
};

Попробуйте включить VPN, т.к. сервис Amazon AWS может быть заблокирован.

Проверка с помощью атрибута pattern срабатывает непосредственно перед отправкой формы. Кроме того, это не запретит ввод символов, отличных от цифр, а лишь покажет уведомление в случае несоответствия. Вашу же задачу можно решить несколькими способами.
Первый вариант: <input type="number" />. Из особенностей: он допускает ввод некоторых символов, отличающихся от цифр (например, "+" и "e").
Второй вариант: перехватывать событие onChange у поля ввода:

const [value, setValue] = useState('')

const handleInputChange = (e) => {
  setValue(e.target.value.replace(/\D/g, ''))
}

<input value={value} onChange={handleInputChange} />