Expo GO или React Native CLI?

Первое с чем я столкнулся открыв
Setting up the development environment это выбор: Expo GO или React Native CLI?

Быстро пробежавшись по странице и сравнив шаги, решил что лучше для начала не городить непонятно что и выбрал Expo GO

На этом этапе я сильно не вдавался в ресерч что такое expo и что оно из себя представляет, в чем и была моя ошибка)

Развернул проект, начал накидывать структуру и ставить нужные пакеты. Тут и начались проблемы.

Для моего первого пет проекта мне необходима была интеграция с Firebase для записи и в целом хранения данных + простая авторизация юзеров, но после установки зависимости, проект перестал собираться и запускаться.

Пришлось потратить немало часов на выяснение причин. А все оказалось просто: ExpoGo не мог работать с тем пакетом для интеграции с Firebase который я поставил (версии уже не помню)
Точнее наверное не так, проект не мог скомпилироваться корректно в проект для Xcode.

В итоге кое-как нашел подходящие версии, поставил все необходимое и завелось)

Уже после я пробовал React Native CLI и там мне показалось все гораздо гибче и понятнее =предсказуемее

Мой итог для начала: Expo GO норм тема для быстрого старта + вроде как потом не сложно от него уйти. Точно хорошо подойдет для всего что нужно, просто нужно понимать его ограничения и возможности. Отдельный плюс экспо в том, что из коробки много что полезного есть.

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

И в догонку, уже спустя какое-то время я нашел полезный ресурс по поиску библиотек для React Native:

https://reactnative.directory

Может еще кому-то будет полезно 🧐

Всем привет! При создании канала тупанул и не включил комментарии под постами.

Сейчас пофиксил 🧐

Под этим постом можно задать интересующие вопросы или просто пообщаться

Велком 🤝

Всем прибывшим, тут есть чатик.
Доступ по ссылке 😏

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

Отец работает в React Native Community. Сегодня срочно вызвали на совещание. Вернулся поздно и ничего не объяснил. Сказал лишь собирать вещи, брать с собой ноутбук и бежать в магазин за redux на две недели. Сейчас едем куда-то далеко за город. Не знаю что происходит, но мне кажется началось...


РАСПРОСТРАНЯЙТЕ ❗️❗️❗️

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

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

Redux в проекте ⚡️

Начал рефакторить один из проектов и решил подключить Redux. Сделал все по документации:
Создал стор, экшоны и редьюсеры, импортирую созданный стор в App.js

import store from './store/store'
<Provider store={store}>
//App
</Provider>

.....и получаю ошибку

ERROR  Error: could not find react-redux context value; please ensure the component is wrapped in a `<Provider>`

Потратил часа 3-4 что бы понять что не так. В итоге наткнулся на подобную проблему на stackoverflow и в самом полезном комментарии вижу:

`App` must be wrapped in provider since you are using `useDispatch` in it. Right now it's just a child. `Provider` sets the context so only its children can have access to it, not a parent.

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

Вопрос знатокам: почему так происходит? И есть ли другие варианты решения? Потому что пока это выглядит как костыль 🧐

Наткнулся тут на чудесную либу 🤡
Мастхэв я щитаю

https://github.com/anandundavia/thanos-js

Это я пытаюсь подобрать подходящие друг к другу версии пакетов в RN

ребят, сорян, но сегодня опять мем 🤡

в понедельник вернусь с разбором того, как дебажить редакс с редакс тулкит

React Native Debugger? Reactotron!
Part 1/3

Фуф, наконец более-менее разобрался с инструментами дебаггинга.

Оказалось что на последних версиях RN, redux-toolkit никак не хочет работать с react-native-debugger и ему подобными инструментам.

Пробовал разные варианты, но коннекта нет, данных не видно. Может быть с CLI ситуация выглядит иначе.

Почитав соседние чаты и немного погуглив, узнал что до версии 0.73+ по умолчанию в проектах использовался Flipper (не юзал)

Поэтому сегодня пишу о том, как приконектить Reactotron. Я все еще мучаю свой первый проект на expo, так что возможно при использовании CLI будут какие-то отличия. Вроде как по отзывам это очень неплохой инструмент, да и дока у них хорошая (и смешная)

Redux is a library for managing global state. It's

pretty damn awesome

.

*And everyone knows when you

combine two great things

, you get a super-awesome thing.

Except for toothpaste & orange juice

. Keep those separate.*

React Native Debugger? Reactotron!
Part 2/3

Итак, погнали!

1. Качаем приложение Reactotron.app с офф сайта

2. Ставим в проект

npm i --save-dev reactotron-react-native

или

npm i --save-dev reactotron-react-native

3. Создаем файл ReactotronConfig.js в корне проекта (ну или где удобно хранить)

Мой файл выглядит так:

import Reactotron from "reactotron-react-native";

const reactotron = Reactotron

.configure({ name: 'LitList App' })

.connect()

export default reactotron

4. Далее идем в App.js или index.js и в начало файла добавляем

if (DEV) {
import("Ваш путь до файла ReactotronConfig.js").then(() => console.log("Reactotron Configured"));
}

Ну и на этом по дефолту все, и как говорит офф дока

HOUSTON, WE HAVE A CONNECTION!

React Native Debugger? Reactotron!
Part 3/3

В доке можно найти примеры подключения различных модулей. Мне же необходимо было только Redux

Для этого:

Ставим

npm install --save-dev reactotron-redux

в проект.

В свой ранее созданный файл ReactotronConfig.js дописываем

import { reactotronRedux } from 'reactotron-redux'

и

.use(reactotronRedux())

А вот дальше интересно 🧐. У меня используется Redux-Toolkit и в доке сказано что в свой файл store.js нужно добавить

enhancers: DEV ? [Reactotron.createEnhancer!()] : [],

Но если так сделать, мы сразу же получим ошибку

enhancers field must be a callback

В итоге делаем так как в коде ниже и все готово

enhancers: (getDefaultEnhancers) => {
return getDefaultEnhancers({
autoBatch: {},
}).concat(reactotron.createEnhancer())
}

При изменении стейта, видим изменения и в окне Reactotron! ✌️

Отпишите в комменты, кто какие использует инструменты для отладки своих приложений? Вдруг есть что-то проще и легче

ps/ console.log() не предлагать 🤡

пятничный мем 🙃

Всем привет! Тут оказывается пару дней назад выкатили React Native for VisionOS😳😳😳

Ссылка на статью одного из контрибьютеров rn 👇

https://www.callstack.com/blog/announcing-react-native-for-apple-vision-pro

Кто что думает? Нам оно надо или это уже перебор?

Я как минимум попробую завести что-то на эмуляторе just for fun 👀

просто напоминаю 😏 залетайте, кому кайф

Ну чтож, по итогам голосования, большинству было интересно почитать про Storybook, так что держите...

Storybook! 📱💻

Это что за покемон?

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

А в чем же основной профит?

1. Есть возможность сразу визуально тестировать и настраивать компоненты (состояния, пропсы и тд)

2. Создавать и поддерживать документацию к вашему UI. Очень полезно как мне кажется, для проектов любого размера

3. Отлаживать компоненты в изоляции от основного приложения.

4. Легко передавать компоненты между разработчиками или проектами.

⚡️Вы прикиньте, написали вы UI компонент, добавили к нему описание (в отдельных файлах которые индексирует SB)
и все, он уже в общей UI библиотеке, с понятным описанием и предсказуемым поведением.
Другой разработчик из команды взял этот компонент и использует где необходимо, не ломая себе голову, а есть ли он в проекте вообще.

Шик, блеск, вы великолепны я щитаю!

пятничный мем, будущее близко

Дамы и господа, приглашаю всех в чатик

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

Оффтоп не оффтоп, пофиг) просто пообщаться