Всем хорошего завершения этой длинной рабочей недели 🤳

#пятничный_мем

⚡️ReactNative и что-то остальное

Пацаны не спят, пацаны сейчас будут новый инструмент тестить 👀

⚡️ReactNative и что-то остальное

Привет! Из-за длинных выходных не успел добраться до примеров с реанимэйтед, после выходных обязательно подобью)

Пока только успел настроить и поковырять RNIDE. 
Могу сказать, что продукт для разработки классный и судя по гитхабу, комьюнити активно участвует в развитии.

Понятно, что еще далеко до полноценного релиза, много непонятных багов с настройками и работой, слабая производительность.

Но учавствовать в тестировании очень приятно, может даже получиться что-то законтрибьютить 🤔

⚡️ReactNative и что-то остальное

У канала есть свой чатик, велком https://news.1rj.ru/str/+ZBdY2WKGczUwOTli

Реанимэйт Ит!

Ну что, наконец я добрался до примеров. Сразу хочу сказать, что типовые примеры использования можно найти в доке. Я же решил посмотреть сначала базу по ним, а потом попробовал сделать кастомную анимацию.

Погнали!

Пример #1
Тут все просто. Нарисовали пустой бокал и будем наполнять его пивом по клику 😊

Для этого создаем переменную, используя useSharedValue() в которую будем складывать количество напитка.

Дальше через useAnimatedStyle() будем брать полученное значение и возвращать его как стиль.

useAnimatedStyle похоже на useEffect, но возвращает style object.

При клике добавляем значение к ранее созданной переменной, а дальше useAnimatedStyle уже возвращает новое значение height для отрисовки. Вот и все, бокал полон)

Пример #2
Просто чуть доработал первый (добавил clamp, что бы не переборщить с количеством пива) + попробовал использовать useAnimatedSensor для получения значений с сенсоров устройства (акселерометр, гироскоп и тд). Можно через ExpoGo запустить пример и заценить результат.

Последний пример в следующем посте 👇

⚡️ReactNative и что-то остальное

Пример #3
Поигравшись с useAnimatedSensor, я вспомнил что видел прикольный велком скрин тут и решил сделать что-то похожее с кастомной анимацией элементов на экране.

Создал два ворклета enteringLeft и enteringRight что бы разнести анимации элементов, которые расположены слева и справа.

В ворклете мы по сути описываем изначальное состояние анимации (initialValues) и сами изменения в ней (animations)

В моем случае это opacity, originX и transform.

Так же для каждого из элемента на экране я создал отдельные стили, которые завязаны на значения сенсора телефона
useAnimatedSensor(SensorType.GRAVITY) + rotate

Да, получилось не точь-в-точь, но основной смысл понятен 😂

На этом пока все, пишите свои вопросы в комменты или в чатик, может что еще интересного сделаю по этому инструменту 🖖

⚡️ReactNative и что-то остальное

Ребят, а у кого есть премиум и кто не против бустануть канал, велком

https://news.1rj.ru/str/boost/react_pain

Всем причастным сердечек в карму ❤️‍🔥

Всем привет!

На офф сайте RN в разделе "Get Started with React Native" теперь настоятельно рекомендуют использовать Expo, а информацию про чистую установку убрали сюда

⚡️ReactNative и что-то остальное

ну такой муд пока, сорян

#пятничный_мем

⚡️ReactNative и что-то остальное

@bruhknt принес тут нужное чтиво 🖖

JWT авторизация в React Native Part 1 ⚡️

У одного из подписчиков возник вопрос, как работает JWT авторизация и как пользоваться ей в RN. 
Поэтому недолго думая, решил набросать пример и тут осветить этот момент.

Итак, погнали. Сначала немного теории (сорян, много). 

При входе пользователя, сервер создаёт токен JWT, содержащий закодированную информацию о пользователе и подпись для проверки подлинности (соль). Сервер возвращает пользователю Access Token и Refresh Token

Access Token короткоживущий токен, который используется для доступа, обычно время его "жизни" ограниченно. При каждом запросе к серверу, от юзера отправляется именно он для аутентификации

Refresh Token как следует из названия, используется для получения нового Access Token и имеет гораздо более длительное время жизни.

⚡️ReactNative и что-то остальное

JWT авторизация в React Native Part 2⚡️


Как обновляется токен?

1. Когда access token истекает, клиент отправляет refresh token на сервер для запроса нового access token

2. Сервер проверяет подлинность refresh token

3. Если refresh token действителен, сервер генерирует и возвращает новый access token (и, возможно, новый refresh token)

4. Клиент сохраняет новый access token (и refresh token, если был выдан новый)

В RN для хранения Access и Refresh токена пользователя можно использовать AsyncStorage, MMKV, Keychain или любые другие их аналоги.

Для лучшего понимания происходящего, набросал небольшой пример на Snack.
Используется какая-то моковая апиха по первой ссылке из гугла.

Тут всего два экрана: авторизация и главный. Но этого достаточно что бы понять суть происходящего.

Надеюсь вам было интересно и полезно)

ps/ скоро закину очередное голосование, stay tuned!

⚡️ReactNative и что-то остальное

Ребят, привет!

Я к вам с некоторыми новостями.

1. На днях получил аппрув от Apple и теперь у меня есть учетка разработчка 🤩

Это значит что теперь я смогу делиться проектами, приглашать к тестированию и публиковать готовые штуки в AppStore. Одно из приложения сейчас проходит ревью

2. Проснувшись сегодня утром, увидел что количество подписчиков на канале перевалило за 100 и офигел. От 0 до 100+ меньше чем за 5 месяцев, вау)

Спасибо всем кто есть, кто читает и комментирует, помогает и подсказывает 🎉

Будем расти и развиваться дальше!

⚡️ReactNative и что-то остальное

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

https://news.1rj.ru/str/+ZBdY2WKGczUwOTli

ура 🙃

#пятничный_мем

⚡️ReactNative и что-то остальное

Подписчики сообщают, что React Native IDE от Software Mansion доступна для всех!

Линк на VS маркетплэйс

Линк на репозиторий

⚡️ReactNative и что-то остальное