react-native-navigation VS react-native-blur

Looks like this feature is not available (check here and here) yet. Good luck mate

another option is react-native-navigation which I haven't used yet but as the document says:

The behavior was reported in their issues 2 years ago: https://github.com/wix/react-native-navigation/issues/6174

At this point don't have a clear preference over which package to use in my next project (react-navigation or react-native-navigation) - they both have strengths and weaknesses, one is easier to actually work with, one is faster in terms of execution, one has better APIs, docs, community, etc.

class Home extends React.PureComponent { constructor(props: Props) { super(props); Navigation.events().bindComponent(this); } closeMenu = () => { this._drawer.close(); }; openMenu = () => { this._drawer.open(); }; static options(passProps) { return { topBar: { rightButtons: [ { component: { name: 'MenuButton', passProps: { onClick: () => this.openMenu(), }, }, }, ], }, }; } render() { return ( ... ); }} Reference I got my passProps code from: https://github.com/wix/react-native-navigation/issues/3648

Thanks! React Native to build the app. React Native Navigation from Wix to build the navigation so the app feels native.

There are two major navigation libraries in React Native world: react-navigation and react-native-navigation. They are both widely used among the community.

You can have a look at React Native Navigation: https://wix.github.io/react-native-navigation/

To navigate between screens, you will probably end up using the very popular React Navigation library. There is a great, purely native alternative, React Native Navigation (the names get confused easily), from Wix. It is super performant but not that flexible. Therefore, again: If your design asks you for something custom, you have no choice but to go with React Navigation; luckily, it is a great, well-documented option.

Today while using Instagram i randomly clicked on a profile picture and it actually opened up in the center of the screen. What grabbed my attention was in the background i.e., the blur effect used by Instagram. I'm very confused whether it is an actual blur or not? Because to me it does not look like an actual blur. Also if it is a blur, does anyone know how they might have implemented it? I have used the following packages before but the effect on the android devices does not look good at all - https://github.com/Kureev/react-native-blur Also I've heard of skia, but didn't use it. Anyone who have used it before?

I'm using react-native-blur package for that.

dependencies": { "@apollo/client": "3.6.2", "@invertase/react-native-apple-authentication": "2.1.5", "@react-native-community/blur": "https://github.com/Kureev/react-native-blur/archive/refs/tags/v3.6.1.tar.gz", "@react-native-community/cameraroll": "4.1.2", "@react-native-community/netinfo": "8.3.0", "@react-native-community/slider": "4.2.2", "@react-native-firebase/analytics": "14.9.1", "@react-native-firebase/app": "14.9.1", "@react-native-firebase/auth": "14.9.1", "@react-native-firebase/crashlytics": "14.9.1", "@react-native-firebase/dynamic-links": "14.9.1", "@react-native-firebase/firestore": "14.9.1", "@react-native-firebase/functions": "14.9.1", "@react-native-firebase/in-app-messaging": "14.9.1", "@react-native-firebase/messaging": "14.9.1", "@react-native-firebase/storage": "14.9.1", "@react-native-google-signin/google-signin": "7.2.2", "@react-navigation/native": "6.0.10", "@react-navigation/stack": "6.2.1", "@stream-io/flat-list-mvcp": "0.10.1", "algoliasearch": "4.13.0", "dayjs": "1.11.1", "expo": "45.0.0", "expo-location": "~14.2.2", "geolib": "3.3.3", "graphql": "16.4.0", "lodash": "4.17.21", "react": "17.0.2", "react-instantsearch-native": "6.24.2", "react-native": "0.68.1", "react-native-bootsplash": "4.1.5", "react-native-create-thumbnail": "1.5.1", "react-native-document-picker": "8.1.0", "react-native-fast-image": "8.5.11", "react-native-fs": "2.20.0", "react-native-gesture-handler": "2.4.2", "react-native-get-random-values": "1.8.0", "react-native-haptic-feedback": "1.13.1", "react-native-image-crop-picker": "0.37.3", "react-native-image-picker": "4.8.2", "react-native-image-resizer": "1.4.5", "react-native-mmkv": "2.3.3", "react-native-permissions": "3.3.1", "react-native-reanimated": "2.8.0", "react-native-redash": "16.2.4", "react-native-responsive-fontsize": "0.5.1", "react-native-safe-area-context": "4.2.5", "react-native-screens": "3.13.1", "react-native-share": "7.4.0", "react-native-shared-element": "0.8.4", "react-native-svg": "12.3.0", "react-native-touchable-scale": "2.1.2", "react-native-vector-icons": "9.1.0", "react-native-video": "5.2.0", "react-native-vision-camera": "2.13.3", "react-navigation-shared-element": "3.1.3", "recyclerlistview": "3.0.5", "stream-chat": "6.5.1", "stream-chat-react-native": "4.3.1", "uuid": "8.3.2", "webpack": "5.0.0" }, "devDependencies": { "@babel/core": "7.12.9", "@babel/preset-env": "7.17.10", "@babel/runtime": "7.12.5", "@react-native-community/eslint-config": "2.0.0", "@types/jest": "26.0.23", "@types/lodash": "4.14.182", "@types/react-instantsearch-native": "6.3.2", "@types/react-native": "0.67.3", "@types/react-native-vector-icons": "6.4.10", "@types/react-native-video": "5.0.13", "@types/react-test-renderer": "17.0.1", "@types/uuid": "8.3.4", "@typescript-eslint/eslint-plugin": "5.17.0", "@typescript-eslint/parser": "5.17.0", "babel-jest": "26.6.3", "babel-plugin-module-resolver": "4.1.0", "babel-plugin-react-native-web": "0.17.7", "eslint": "7.32.0", "eslint-config-prettier": "8.5.0", "eslint-plugin-react": "7.29.4", "eslint-plugin-react-hooks": "4.5.0", "eslint-plugin-react-native": "4.0.0", "jest": "26.6.3", "metro-react-native-babel-preset": "0.67.0", "prettier": "2.6.2", "react-test-renderer": "17.0.2", "typescript": "4.4.4" }, ```

I've done something like this last year using the already mentioned https://github.com/Kureev/react-native-blur and a modal on top. Not an ideal solution and struggled a lot with having the modal display the element at the same height on a scroll view. Also the blur effect is really expensive in terms of performance on Android and sometimes it creates an halo around elements.

"@react-native-community/blur": "https://github.com/Kureev/react-native-blur/archive/refs/tags/v3.6.1.tar.gz",

https://github.com/Kureev/react-native-blur worked first try on both platforms for me