Экспо для новичков и тех у кого нет mac

? я бы так не сказал, именно потому что дебаг в экспо посуровей, особенно в продакшен, а на мак пока удобнее даже с expo

expo быстрее и удобнее, как по скорости работы, так и по доп либам

что тоже не идеал далеко, но конкурентов нет ?

Как же как же )

? я бы так не сказал, именно потому что дебаг в экспо посуровей, особенно в продакшен, а на мак пока удобнее даже с expo

о мой бог? год уже на эту тему холиварили) наберите экспо в поиске и все встанет на свои места

о мой бог? год уже на эту тему холиварили) наберите экспо в поиске и все встанет на свои места

да за пол года там много чего поменялось ?

да за пол года там много чего поменялось ?

месяц назад запускали на экспо этот код на андроид https://github.com/react-native-community/react-native-svg#clippath запустите и насладитесь своим экспо еще раз ?

вместо этого получите пачальные и унылые фигуры. в react-native init все четко

Добрый день Пытаюсь прокрутить FlatList к последнему эллементу и что-то не получается scrollToEnd = () => this.list && this.list.scrollToEnd({animated: true}) <FlatList ref={node => { this.list = node }} data={this.state.data} keyExtractor={(item, index) => index.toString()} renderItem={({item}) => <View> <Text>{item.title}</Text> <Text>{item.data}</Text> <Text>{item.dataType}</Text> </View> } /> пытался оборачивать в setTimeout не помогло

вместо этого получите пачальные и унылые фигуры. в react-native init все четко

так свои библиотеки svg надо использовать

под expo

так запустил пример на андройде, все четко квадрат - квадрат, круг- круг ?

под expo

вообщем это было уже было не по одному кругу) не вижу профита в экспо

А на какой ОС вы работаете?

macOS, android разработку сейчас на linux переношу (т.к. Apple в high sierra что-то такое сделала с WindowServer (это как-то с их миграцией на metal2 связано), что теперь некоторые фичи OpenGL, используемые в Android Emulator или Android Studio роняют мне ось)

вообщем это было уже было не по одному кругу) не вижу профита в экспо

под mac сидишь?

macOS, android разработку сейчас на linux переношу (т.к. Apple в high sierra что-то такое сделала с WindowServer (это как-то с их миграцией на metal2 связано), что теперь некоторые фичи OpenGL, используемые в Android Emulator или Android Studio роняют мне ось)

Ясно, понятно. Видимо поэтому у тебя не возникало проблем с RN 0.56 https://github.com/facebook/metro/issues/181

Ясно, понятно. Видимо поэтому у тебя не возникало проблем с RN 0.56 https://github.com/facebook/metro/issues/181

Этой проблемы не возникало. Там в master уже что-то коммитили на эту тему... сейчас поищу

Оказывается RN не запускает тесты в окружении Windows, поэтому некоторые такие мажорные баги просачиваются в релиз, даже после многократных релиз-кандидатов

Этой проблемы не возникало. Там в master уже что-то коммитили на эту тему... сейчас поищу

Ага, только парень 4 часа назад отписал, что это не помогло

Да и я только что проверял тоже, проблема воспроизводится

Да и я только что проверял тоже, проблема воспроизводится

Возможно (они до сих пор свои велосипеды строят с регекспами, вместо того чтоб уже готовыми решениями пользоваться). Но чтоб не было недопонимания, я про этот коммит: https://github.com/facebook/react-native/commit/3ac86c366c9

И да... с тестированием у них тоже треш...

Да, это он. Вот ребята тут обсуждают как раз про него https://github.com/facebook/metro/issues/181#issuecomment-405858969

Я просто решил свой небольшой проект перенести с RN 0.53.3 на последнюю версию, и уже второй день мудохаюсь. Плюнул с последней, решил хотя бы на предыдующую 0.55, т.к. там не такие страшные breaking changes.. и все равно какие-то проблемы по типу той, что я писал выше.

Коллеги, доброе утро. Обновлялся ли кто-то до RN 0.55.4 с установленным storybook и addon'ом к нему @dump247/storybook-state? Я обновлялся с версии 0.53.3. Возникает проблема, когда metro-bundler пытается собрать для меня js бандл. Выдается ошибка следующего типа: error: bundling failed: ReferenceError: Unknown plugin "transform-react-remove-prop-types" specified in "C:\\GIT\\rn\\node_modules\\@dump247\\storybook-state\\.babelrc" at 0, attempted to resolve relative to "C:\\GIT\\rn\\node_modules\\@dump247\\storybook-state" Такое чувство, что бандлер пытается собрать этот addon из исходников на основании его .babelrc, где как раз указано, что нужен плагин transform-react-remove-prop-types, хотя эта библиотека предоставляет уже транспиленную версию. @dump247/storybook-state/package.json { ... "main": "dist/index.js" ... } Может кто-то с похожей проблемой сталкивался?

Вот этой.. причем нашел очень похожий кейс, что bundler пытается транспайлить скрипты, которые должны браться из диста. Описание в этом комменте https://github.com/facebook/react-native/issues/14530#issuecomment-313208426

Но решения так и не нашел. И не очень пойму, что именно надо делать )

Я в какой-то момент очень надеялся, что haul будут активно развивать, тогда от всей этой прослойки с нестабильным metro и глупейшей haste можно было бы отказаться... но они затормозили в развитии... но хотя бы haste они начали выпиливать...

Я просто решил свой небольшой проект перенести с RN 0.53.3 на последнюю версию, и уже второй день мудохаюсь. Плюнул с последней, решил хотя бы на предыдующую 0.55, т.к. там не такие страшные breaking changes.. и все равно какие-то проблемы по типу той, что я писал выше.

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

Я в какой-то момент очень надеялся, что haul будут активно развивать, тогда от всей этой прослойки с нестабильным metro и глупейшей haste можно было бы отказаться... но они затормозили в развитии... но хотя бы haste они начали выпиливать...

почему haste глупейший?) то что непривычно и сходу совсем непонятно, это да)

почему haste глупейший?) то что непривычно и сходу совсем непонятно, это да)

А в двух словах, чем занимается haste?

Я так понял, что он должен решать какую-то проблему с модулями?

А в двух словах, чем занимается haste?

это то как они файлы резолвят внутри) просто походите по исходникам и посмотрите на require)

почему haste глупейший?) то что непривычно и сходу совсем непонятно, это да)

Может немного эмоционально выразился. Сейчас объясню, постараюсь кратко. Когда я учил javascript, то одной из вещей, восхитившей меня, была система модулей, в которой один и тот же пакет может существовать в разных версиях. Из тех языков, что я тогда знал, никто этого не умел и это приводило к страшному гемморою с конфликтующими зависимостями, когда тебе нужен модуль B, который зависит от A версии 1 и модуль C, который тоже зависит от A, только версии 2. И всё... достучаться до автора модуля B невозможно... при большом кол-ве модулей это становится гигантской проблемой. Вызвает её то, что в большинстве других языков пространство имен модулей глобально, т.е. в Perl, если у тебя есть модуль DBIx::Class, то это всё, ничего больше он в это имя не положит, если ты там что-то поправишь, то это увидят все остальные модули и т.п. В компилируемых языках ещё хуже... там для совместимости со стандартным редактором связей все именованные экспортируемые сущности глобальны. Т.е. нельзя иметь в C++ два класса с одинаковым именем. Соотвественно две версии одной и той же библиотеки. И так далее... В javascript же, модуль импортируется локально... и это позволяет избежать всех подобных проблем (да, добавляет другую, типа модуль A может производить объекты, которые если скормить другой версии того же модуля, вызовут ошибки) это добавляет гибкости, оставляя возможность редкие проблемы решать людям. И вот я вижу, что в погоне за краткостью написания импортов, кое-кто берет и убивает эту гибкость одним легким движением руки. Не глупо ли? Заодно можно добавить сюда медленный ресолвинг (это конкретно haste), т.к. теперь надо не только по fs погулять, но ещё и каждый файл прочитать чтоб эти макрекры найти. Это вызывает необходимость иметь сложную систему кеша, которая ломается и всё равно работает не очень быстро, зато жрет память. Достаточно? )))

Может немного эмоционально выразился. Сейчас объясню, постараюсь кратко. Когда я учил javascript, то одной из вещей, восхитившей меня, была система модулей, в которой один и тот же пакет может существовать в разных версиях. Из тех языков, что я тогда знал, никто этого не умел и это приводило к страшному гемморою с конфликтующими зависимостями, когда тебе нужен модуль B, который зависит от A версии 1 и модуль C, который тоже зависит от A, только версии 2. И всё... достучаться до автора модуля B невозможно... при большом кол-ве модулей это становится гигантской проблемой. Вызвает её то, что в большинстве других языков пространство имен модулей глобально, т.е. в Perl, если у тебя есть модуль DBIx::Class, то это всё, ничего больше он в это имя не положит, если ты там что-то поправишь, то это увидят все остальные модули и т.п. В компилируемых языках ещё хуже... там для совместимости со стандартным редактором связей все именованные экспортируемые сущности глобальны. Т.е. нельзя иметь в C++ два класса с одинаковым именем. Соотвественно две версии одной и той же библиотеки. И так далее... В javascript же, модуль импортируется локально... и это позволяет избежать всех подобных проблем (да, добавляет другую, типа модуль A может производить объекты, которые если скормить другой версии того же модуля, вызовут ошибки) это добавляет гибкости, оставляя возможность редкие проблемы решать людям. И вот я вижу, что в погоне за краткостью написания импортов, кое-кто берет и убивает эту гибкость одним легким движением руки. Не глупо ли? Заодно можно добавить сюда медленный ресолвинг (это конкретно haste), т.к. теперь надо не только по fs погулять, но ещё и каждый файл прочитать чтоб эти макрекры найти. Это вызывает необходимость иметь сложную систему кеша, которая ломается и всё равно работает не очень быстро, зато жрет память. Достаточно? )))

сейчас такая "мода" есть, что создают папку с модулем, а внутри index.js, так вот потом этих непонятных файлов index становятся куча) с haste ты хоть гарантировано find-ом найдешь быстро файл) но это конечно все равно ооочень непривычно видеть) понятно что как всегда трейд оф, видимо фб хорошо так жилось, поди пойми что им нравится ?

сейчас такая "мода" есть, что создают папку с модулем, а внутри index.js, так вот потом этих непонятных файлов index становятся куча) с haste ты хоть гарантировано find-ом найдешь быстро файл) но это конечно все равно ооочень непривычно видеть) понятно что как всегда трейд оф, видимо фб хорошо так жилось, поди пойми что им нравится ?

фб с этим хорошо жилось, пока было 5 проектов, которые хотели шарить код и быстро этот шареный код править. Эта же система не скейлится на 55 проектов, потому что позволяет неконтролируемые правки в шареном коде, для него не запускаются тесты и т.п. В react они с haste съехали. В RN в процессе, но процесс этот долог теперь... )

Они, кстати в master маркеры уже выпилили из файлов, оказывается в рай-оне вот этих коммитов: https://github.com/facebook/react-native/commit/eeab57aa2638565

@savelichalex @gblack9 может вы знаете. Я вот так и не очень понял, это теперь нормально, что metro пытается транспилить третьи библиотеки из node_modules на основе .babelrc у каждой библиотеки?

Я сейчас установил RN 0.55.4, установил storybook, и если запустить, то все ок. Но если к storybook добавить addon @dump247/storybook-state, у которого свой собственный .babelrc с плагином transform-react-remove-prop-types и пресетами, то в этом случае бандлер мне выдает сразу ошибку error: bundling failed: ReferenceError: Unknown plugin "transform-react-remove-prop-types" specified in "C:\\GIT\\sandbox\\rn_0554\\node_modules\\@dump247\\storybook-state\\.babelrc" at 0, attempted to resolve relative to "C:\\GIT\\sandbox\\rn_0554\\node_modules\\@dump247\\storybook-state"

@savelichalex @gblack9 может вы знаете. Я вот так и не очень понял, это теперь нормально, что metro пытается транспилить третьи библиотеки из node_modules на основе .babelrc у каждой библиотеки?

Не знаю... тренд был вообще не транспилить их... и чтоб включить транспиляцию для них, надо было отдельно регексп писать в rn-cli.config.js (или package.json)

Не знаю... тренд был вообще не транспилить их... и чтоб включить транспиляцию для них, надо было отдельно регексп писать в rn-cli.config.js (или package.json)

Странно, при использовании RN 0.53 как раз не транспилились 3и библиотеки, а сейчас, получается, транспилятся.. только я никак, блин, не пойму - это НОРМАЛЬНО или НЕТ? ?

Т.е. вообще-то для меня - это не нормально, ведь авторы библиотек транспилят все за нас при публикации в npm

ща... ищу... какая у вас версия metro?

Т.е. вообще-то для меня - это не нормально, ведь авторы библиотек транспилят все за нас при публикации в npm

Вот они из тех же соображений исходили...

ща... ищу... какая у вас версия metro?

0.30.2

Не знаю... тренд был вообще не транспилить их... и чтоб включить транспиляцию для них, надо было отдельно регексп писать в rn-cli.config.js (или package.json)

плюсую) тоже помню в каком то из релизов про это говорили)

плюсую) тоже помню в каком то из релизов про это говорили)

А выходит что наоборот - транспилят все. Даже интересно стало, поищу такой релиз

Я сейчас поискал по своим проектам, и понял, что у меня этот регексп остался только для jest

В таком виде, к примеру: transformIgnorePatterns: ['node_modules/(?!(react-native|lodash-es)/)']

А вот в rn-cli.config.js его нигде нет... вот сейчас смотрю в исходники metro ((

В таком виде, к примеру: transformIgnorePatterns: ['node_modules/(?!(react-native|lodash-es)/)']

Этот regexp задает, какие модули транспилить НЕ надо, правильно понимаю?

Нет ) jest игнорирует`/node_modules/` автоматом, а этот регексп, добавляет исключения, т.е. говорит, "игнорируй всё что начинается с node_modules/, кроме node_modules/react-native и `node_modules/lodash-es`"

В общем транспилят они всё сейчас похоже. Смотрите: 1. https://github.com/facebook/metro/blob/v0.30.2/packages/metro/src/rn-cli.config.js дефолтный конфиг, в него мержится проектный. там есть getBlacklistRE, но в нем такое: https://github.com/facebook/metro/blob/v0.30.2/packages/metro/src/blacklist.js#L15, т.е. самих node_modules нет. 2. Трансформер будет получать файлы на трансформацию и собирать для них конфиг, вот здесь: https://github.com/facebook/metro/blob/v0.30.2/packages/metro/src/transformer.js#L134 - ни каких ограничений, опять всё 3. Есть опция в том же файле резолвится, надо ли для всего использовать проектный .babelrc или искать для каждого модуля вот здесь обработка: https://github.com/facebook/metro/blob/v0.30.2/packages/metro/src/transformer.js#L87

Описание опции здесь: https://github.com/facebook/metro/blob/v0.30.2/packages/metro/src/Config.js#L75

И транспилят они всё скорей всего чтоб HMR работал или ещё какие преобразования они теперь через babel делают... не знаю

Большое спасибо. Приходит немного понимания. Еще вопрос - получается, что metro реализует свой кастомный резолвер для модулей, где пытается их сразу транспилить и каким-то образом оптимизировать?

В общем это я наверно сам уже смогу по исходникам понять. Главное что хотя бы нить нашел. Спасибо )

Большое спасибо. Приходит немного понимания. Еще вопрос - получается, что metro реализует свой кастомный резолвер для модулей, где пытается их сразу транспилить и каким-то образом оптимизировать?

Да, резолвер у них кастомный. С двух сторон. 1. С входной стороны у них сложный резолвинг из-за всё ещё присутствующего haste 2. На выходе, в собраном бандле, своя система модулей.

Чем вебпак не подошел?

Подскажите начинающему, как лучше отлаживать стили в реакте?

Чем вебпак не подошел?

Не знаю (

Подскажите начинающему, как лучше отлаживать стили в реакте?

Я запускаю react-devtools и включаю hot module reloading.

Я запускаю react-devtools и включаю hot module reloading.

+

ERROR: S client not available

Подскажите начинающему, как лучше отлаживать стили в реакте?

@skill_branch , можно поставить отдельно https://github.com/jhen0409/react-native-debugger Достаточно удобная вещь.

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

https://giphy.com/gifs/vx2exZKa0Gvufv341n

проблема в изменении цвета выбранного item

а нельзя черный блок спозиционировать за селектором? а селектору впилить прозрачный фон

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

да так уже есть, текст черный)

http://prntscr.com/k81mdq

думал наоборот, черный поверх селектора, и впилить текст в черный блок..но думаю будет хуже еще)

а какой пакет для селектора используешь?

да и поверх если фон, то селектор собственно недоступен будет

стандартный, PickerIOS

http://www.giphy.com/gifs/cOHWVNefAhPkaiEyRA

проблема в изменении цвета выбранного item

Теоретически можно анимировать и цвет, но это будет всё равно не тот эффект. А вот что надо, так это некий слой "эффекта" сверху, типа маски, по которой инверсия происходит (в нативе, я бы в эту сторону думал). Стандартного такого компонента в RN вроде нету... но м.б. что-то на гитхабе найдется?

Кто нибудь detox использует для тестирования? Можете ощущениями поделиться?

Кто нибудь detox использует для тестирования? Можете ощущениями поделиться?

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

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

Ага, спасибо! А в android UI-тестирование не делаете? Я сейчас работаю над правильной (с моей точки зрения) реализацией SafeArea и мне позарез нужно визульное тестирование автоматическое... а я его никогда не делал.

Я просто решил свой небольшой проект перенести с RN 0.53.3 на последнюю версию, и уже второй день мудохаюсь. Плюнул с последней, решил хотя бы на предыдующую 0.55, т.к. там не такие страшные breaking changes.. и все равно какие-то проблемы по типу той, что я писал выше.

Ахах испытал сегодня нечто похожее

Реакт нейтив это боль

Как сделать при каждом новом вызове counter + 1 state = { count: 0 } static getDerivedStateFromProps(nextProps, prevState) { if (prevState.counter > nextProps.maxCount) { return { counter: prevState.counter + 1 } } return null } componentDidMount() { this.timer = setInterval(() => this.props.getTickers(), 5000) }

А код который это делает можно посмотреть? Интересует конкретно строчка с импортом в App.js, притом именно скопированная из реального кода (руками не переписывайте ?

А код который это делает можно посмотреть? Интересует конкретно строчка с импортом в App.js, притом именно скопированная из реального кода (руками не переписывайте ?

import Login from 'src/Login'

import Login from 'src/Login'

А в папке src конечно лежит package.json?

А в папке src конечно лежит package.json?

нет

Вот )) Варианта 2: 1. Вы хотите использовать абсолютные импорты. Положите в src package.json вот этого хватит: { "name": "src" } 2. Вам эти хаки не нужны, тогда импортируйте как import Login from './src/Login'

Вот )) Варианта 2: 1. Вы хотите использовать абсолютные импорты. Положите в src package.json вот этого хватит: { "name": "src" } 2. Вам эти хаки не нужны, тогда импортируйте как import Login from './src/Login'

Вариант 2 уже использовал Но опять эта же ошибка (

Вариант 2 уже использовал Но опять эта же ошибка (

Только причина у неё другая ) Я бы рекомендовал с вариантом два сперва разобраться, а потом смотреть в абсолютные импорты