react-native

React Native persistent scrollbar

by

iOS The underlying iOS native component, UIScrollView (technically, RCTEnhancedScrollView), doesn’t support keeping the scroll indicators visible. For this reason, the React Native wrapper around it won’t either. There is a hack to get this working with the native component (see this answer for one approach). To accomplish this in React Native, you’d need to implement … Read more

How to use import with absolute paths with Expo and React Native?

by

Update: Expo v32.0.0 and up Expo init is creating a babel.config.js for you. Just add the plugins key to your babel.config.js file and add your alias. The env key is not needed anymore. module.exports = function(api) { api.cache(true) return { presets: [‘babel-preset-expo’], plugins: [ [ ‘module-resolver’, { alias: { assets: ‘./assets’, components: ‘./src/components’, modules: ‘./src/modules’, … Read more

What are the differences between different implementations of SafeAreaView?

by

Overview Except for the one in react-native they build on top of one another. All the others instruct that you need to wrap your whole app inside a SafeAreaProvider component. I dug into the source code a bit and this is my deductions: react-native The default implementation provided with React Native. Should work for most … Read more

How to setInterval for every 5 second render with React hook useEffect in React Native app?

by

You need to clear your interval, useEffect(() => { const intervalId = setInterval(() => { //assign interval to a variable to clear it. setState(state => ({ data: state.data, error: false, loading: true })) fetch(url) .then(data => data.json()) .then(obj => Object.keys(obj).map(key => { let newData = obj[key] newData.key = key return newData }) ) .then(newData => … Read more

Invalidate queries doesn’t work [React-Query]

by

Also, there is one more reason that was not mentioned before: If you used enabled option in useQuery than such queries are ignored by invalidateQueries. From docs: https://tanstack.com/query/latest/docs/react/guides/disabling-queries The query will ignore query client invalidateQueries and refetchQueries calls that would normally result in the query refetching.

Sharing a typescript library in a monorepo

by

Solution 1: with Lerna you can use workspace and Lerna yarn workspace & lerna ├── README.md ├── lerna.json ├── package.json ├── packages │ ├── pdf │ │ ├── package.json /* “shared-ts”: “^1.0.0” */ │ │ └── src │ ├── frontend │ │ ├── package.json │ │ └── src │ ├── mobile │ │ ├── package.json … Read more