Is there a way to re-render whole app regardless whether state changes or not? Sort of like this.forceUpdate() but on global App level instead of just one component?
I think you want to restart your app regardless state change/update. this library can help in React Native
https://github.com/avishayil/react-native-restart
from documentation:
yarn add react-native-restart
//link manually or
react-native link react-native-restart
import RNRestart from 'react-native-restart';
//Immediately reload the React Native Bundle
RNRestart.Restart();
Related
This is my first time using AWS Amplify, and I set up a React Native project with Expo. I have a Figma design file with all my components, and I synced them with the project. When I use:
import { MyComponent } from "./ui-components";
after running amplify pull,
It's giving me an error stating that it's not a valid import.
Is there currently a way to use Amplify UI components in React Native apps? If so, how would I go about importing these. I have aws-amplify-react-native installed already.
I would like to be able to setup stories for my react native screens, which hooks into the API via react query hooks. I'm using the beta version of storybook react native (6.0.1-beta3).
https://storybook.js.org/addons/msw-storybook-addon, which is what I'd normally use in a react project, won't work because service workers don't exist in react native (if I'm understanding things correctly).
I have also tried installing https://storybook.js.org/addons/storybook-addon-mock/, but wasn't able to get it work (storybook failed with a runtime error when trying to register the plugin... likely a version mismatch).
I might just have to go with a container/dumb component approach for the screens, but that has it's own drawbacks because queries or mutations can be nested in components.
I'm using axios for what it's worth. I've also considered putting the axios instance in a provider so I could modify the instance per test.
Thanks
i'm using React Native expo, and it shows
[Warning: Async Storage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '#react-native-community/async-storage' instead of 'react-native'. See https://github.com/react-native-community/react-native-async-storage].
i read this link and I understood that it's due to the fact that some dependencies are using old AsyncStorage, not the new one from community.
But I hardly found that any solution for Expo users. Is there any solution for Expo? Or if I have to manual change dependencies using the old AsyncStorage, how can i do it? Since I'm new to React Native, not really sure what to do..
In Expo you should always link the libraries that Expo includes in the App. So like mentioned in the docs here https://docs.expo.dev/versions/latest/sdk/async-storage/
expo install #react-native-async-storage/async-storage
is the correct import. If you are working with an old Expo-SDK this might be different, otherwise you should adapt your imports.
Now expo has migrated to use as well the community version as you can see here.
But if you get this warning definitely you have some dependency or more that still use the react-native-core version, if so please refer to the first answer to How to resolve using AsyncStorage (deprecated) warning? Using the community (correct) library:
if this is the case the best is as suggested in that answer is to
Your best course of action is to fork the repo and fix all instances of AsyncStorage to use the correct version, or open an issue.
This error occurs because firebase imports AsyncStorage from react native core and not the new library #react-native-async-storage/async-storage. I think firebase hasn't updated the by default import yet so you have to do it yourself.The way I fixed it was ;
Install react-native-async-storage: npm i #react-native-async-storage/async-storage
Go into the firebase index.js file that imports AsyncStorage from react native core: It is located at : 'node_modules/#firebase/auth/dist/rn'.
Create a variable that imports AsycnStorage from 'node-modules/#react-native-async-storage/async-storage' :
var AsyncStorage = require('../../../../#react-native-async-storage/async-storage');
Replace all uses of AsyncStorage in this file from react native core with new variable, i.e. replace "ReactNative__namespace.AsyncStorage" with "AsycnStorage",
I would like to find out what the least evasive way is to change an app entry point for Detox testing in React Native?
For example, I would like to use Detox for Component testing and would like to skip the login flow of our app and directly launch the component I'm testing.
I suppose I could create a test App.js and manually change it to load that in the App.Registry for testing but there may be a better way.
Mock your entry point to a different one. You can follow our guide:
https://github.com/wix/Detox/blob/master/docs/Guide.Mocking.md
In react documentation it says that the variable and the listener hook must be declared within the component but React native complains when I try to do that.
Is there any way to use the Hooks in React Native?
Or does anyone know if they are going to be implemented in the future ?
Sort of, though useEffect is not working. The current plan is to move to react 16.6 by 0.57.5 and allow people to opt in to using hooks with an option 0.57.5-alpha build. If you want to use hooks now:
Change your react dependency to 16.7.0-alpha in package.json
Clone react
cd react
yarn install
yarn build -- --type=RN_OSS
copy build/react-native to your project's node_modules/react-native/Libraries/Renderer directory.
You can also use this unofficial react-native build with hooks already included. Just remember that useEffect is not working at all with react-native, so you're better off probably waiting. You can read more about this discussion on this github issue.
EDIT: Hooks are coming!!! They are live in React and have been confirmed as a feature shipping in React Native 0.59, you can even use the current release candidate
Yes!
React Hooks are part of the 0.59 release.
Quote from the 0.59 release notes:
React Hooks are part of this [0.59] release, which let you reuse stateful logic across components
There's a quick overview of Hooks, to get you started:: https://reactjs.org/docs/hooks-overview.html
React 16.8.0 is the first release to support Hooks. When upgrading, don’t forget to update all packages, including React DOM. React Native supports Hooks since the 0.59 release of React Native.
No Breaking Changes
Before we continue, note that Hooks are:
• Completely opt-in. You can try Hooks in a few components without rewriting any existing code. But you don’t have to learn or use Hooks
right now if you don’t want to.
• 100% backwards-compatible. Hooks don’t contain any breaking changes.
• Available now. Hooks are now available with the release of v16.8.0.
Only Call Hooks from React Functions
Don’t call Hooks from regular JavaScript functions.
Instead, you can:
Call Hooks from React function components
Call Hooks from custom Hooks
Some Basic Hooks are mention below
useState
useEffect
useContext
Some Additional Hooks
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue
For more information please read following document
https://reactjs.org/docs/hooks-intro.html