React Native *

Всем привет! На связи команда dev.family, и мы вернулись с новым экспериментом. Хотим поделиться опытом разработки приложения на React Native для нескольких платформ и мессенджера, а именно – iOS, Android, Web и Telegram.

Разработчики давно пишут приложения под Web на React Native. Например, так работают Meta, Twitter (X) и Flipkart. Но для нашего кейса важен контекст, с которым можете столкнуться и вы. К нам пришел клиент, у которого уже было приложение под Android и iOS на React Native. Он захотел еще одну версию продукта – в формате Telegram Web App. Ранее мы работали c таким видом приложений для другого проекта, но так и не зарелизили его. Готовый прототип стал основой для разработки нового кейса.

Всем привет! На связи команда dev.family. В этой статье мы делимся кратким гайдом по установке Splash Screen в кросс-платформенное приложение, написанное на React Native, с поддержкой нескольких тем.

Splash screen — первый экран, который видят пользователи перед тем, как прогрузиться в основное приложение. Этот экран, пожалуй, лучший способ сделать название вашей аппки, да и в целом, ее всю более запоминающейся.

Но это не основная роль splash screen. Под ним, например, можно спрятать получение данных с API и прогрузку основного приложения. Мы так делаем, когда показываем лоадер на экране при загрузке тех же данных. Это позволяет улучшить UX и демонстрировать пользователю сразу готовое приложение. А как следствие — убрать лишний лоадер при первом открытии.

В этом кратком гайде мы разберем установку splash screen сразу для iOS и Android на фреймворке react-native с использованием библиотеки react-native-splash-screen.

Всем привет! В этом материале я поделюсь с вами практическим опытом по оптимизации своего мобильного приложения на React Native. Я расскажу как я ускорил свое приложение в 3 раза.

Я разрабатываю свое мобильное приложение BookDesk для хранения прочитанных книг. Предыдущие серии: 1, 2, 3

React Native — отличный выбор для веб-разработчиков, имеющих опыт работы с React, которые хотят создать первое мобильное приложение.

Хотя у React и React Native много общего, между веб-платформой и нативными приложениями существуют некоторые различия. В этой статье освещаются наиболее распространенные ошибки и вопросы, с которыми сталкиваются разработчики при переходе с React на React Native.

⚛️ Адаптивная верстка на React Native

При разработке веб-приложений на React, браузер Chrome тратит много оперативной памяти. Это связано с тем, что для эффективного обхода Virtual Dom, используется JIT компилятор, наслаивающий более эффективные реализации скомпилированных JavaScript функций поверх интерпретируемой реализации. Это создает высокую сложность по памяти: нагрузка на GC возрастает кратно.

Избежать просадки производительности может использование движка Hermes из React Native. Однако, React Native не умеет работать с адаптивной версткой: из коробки есть Yoga Layout, реализующий только Flexbox.

Описание проблем, возникших при портировании классического React приложения в React Native можно прочитать в этой статье. Речь идет о поддержке различных форм факторов устройств, в том числе, Galaxy Fold

React Native предоставляет Animated API который может покрыть часть базовых потребностей вашего приложения, однако если вы хотите создавать сложные и производительные анимации на 60fps, без сторонних библиотек вам не обойтись. И сегодня я хотел бы рассказать о Reanimated 2 и продемонстрировать ее возможности на примере создания компонента счетчика.

Отвечая на вопросы в треде по React Native на StackOverflow я заметил что в той или иной форме люди очень часто интересуются производительностью компонентов списков и в частности FlatList. В этой гайде я решил рассмотреть способы оптимизации производительности на примере приложения для отображения списка вопросов с StackOverflow а во второй части статья я расскажу о новом компоненте FlashList который драматически ускорит работу ваших списков.

Пользователям Flutter не понаслышке знаком такой проект как Skia. Он является движком для рендеринга всего что мы видим на экране Flutter. С помощью Skia можно рисовать очень сложные элементы интерфейса да и в целом любые 2D сцены с поддержкой плавной анимации и различных эффектов. Так почему бы не взять это на вооружение, подумали ребята из Shoppify и выпустили React Native Skia - библиотеку позволяющую использовать Skia в экосистеме React Native.

30 марта 2022 года команда инженеров Meta анонсировали новую версию React Native 0.68. Помимо различных минорных улучшений и фиксов эта версия содержит историческое для платформы изменение, впервые мы можем попробовать в своих приложениях так называемую новую архитектуру. Давайте вместе разберемся что это за новая архитектура и почему к ней шли без малого 4 года.

В приложениях Lingualeo сложился довольно редкий кейс. Их создали до того, как появились кроссплатформенные технологии, но через несколько лет туда добавили модули на React Native. Кроссплатформенные модули прожили в приложениях примерно четыре года: в ближайшем релизе мы их уберём.

Мы попросили лидера мобильной разработки Артёма Рыжкина (phoenix_rav) рассказать о том, откуда в нативных приложениях Lingualeo появились модули на React Native, какие они вызывали проблемы и когда вообще имеет смысл делать кроссплатформенные приложения. 

1. Определить текущий язык приложения.
2. Использование глобального состояния для перевода «на лету».

Определяем текущий язык устройства

Push-уведомления играют важную роль в любом приложении. Это может значительно увеличить взаимодействие с пользователями.

Настройка push-уведомлений с нуля может быть немного сложной. К счастью, Amplify предоставляет услуги push-уведомлений и SDK для React Native приложений. В этом уроке мы узнаем, как интегрировать в наше приложение этот сервис.

Предисловие

• Часть 1: Создание и настройка приложений на Azure AD B2C
• Часть 2: Работа с Identity Framework Experience
• Часть 3: Подключение приложения React
• Часть 4: Подключение приложения React Native
• Часть 5: Подключение и настройка бэкэнда на .NET Core 3

Предисловие

• Часть 1: Создание и настройка приложений на Azure AD B2C
• Часть 2: Работа с Identity Framework Experience
• Часть 3: Подключение приложения React
• Часть 4: Подключение приложения React Native
• Часть 5: Подключение и настройка бэкэнда на .NET Core 3

Предисловие

• Часть 1: Создание и настройка приложений на Azure AD B2C
• Часть 2: Работа с Identity Framework Experience
• Часть 3: Подключение приложения React
• Часть 4: Подключение приложения React Native
• Часть 5: Подключение и настройка бэкэнда на .NET Core 3