I'm looking at some code for react native fetch blob https://github.com/joltup/react-native-fetch-blob and I see in their example to call window.Blob, etc..
Is Window a global variable like you would see in a browser web environment? Or does it represent the current viewable screen in some way? Is the below code example just replacing/overriding a global object?
const Blob = RNFetchBlob.polyfill.Blob;
const fs = RNFetchBlob.fs;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
window.Blob = Blob;
React Native defines a few globals (all under global) that are polyfilled so certain libraries that were originally developed for the browser can be used without failing. Most of the polyfills for familiar browser APIs are empty. You can see them all in InitializeCore.js.
window though is not empty. It's set to global:
if (global.window === undefined) {
global.window = global;
}
So the next question is, what is Blob in global?
Blob is a property that is added to global using the polyfillGlobal function. If you're curious about how that works, you can look at the PolyfillFunctions.js file. Blob itself is defined in Blob.js.
polyfillGlobal('Blob', () => require('Blob'));
So now that we see what React Native is doing, we can loop back to your questions:
Is Window a global variable like you would see in a browser web environment?
Yes, it's a global variable that is a property of global that is set to equal global.
Or does it represent the current viewable screen in some way?
Nope. It represents whatever React Native wants it to represent.
Is the below code example just replacing/overriding a global object?
Yes. It's replacing window.XMLHttpRequest and window.Blob with react-native-fetch-blob's own implementation.
Related
I am creating a new Vue 3 project and i saw many people online declaring refs like this.
const myVariable = ref(false)
Why are we using const all of a sudden in Vue 3? I get that refs wrap them in some way to make them editable but i still don't get why not declaring them like this:
let myVariable = ref(false)
I know it may sound a foolish question for Vue 3 devs but i cannot understand the reason behind changing values to constants.
During the meanwhile i am using the const declaration in composition API but i'd like to acknowledgwe the reason behind
it's preferences but the argument why const is used is when the value is not changing e.g:
const name = 'John';
// Shouldn't work.
name = 'Bill';
With ref(), you don't replace the variable but the property
const name = ref('John');
name.current = 'Bill';
Here's how eslint explains it:
If a variable is never reassigned, using the const declaration is better.
const declaration tells readers, “this variable is never reassigned,” reducing cognitive load and improving maintainability.
Docs (at the time of writing): https://eslint.org/docs/latest/rules/prefer-const
I use React Native and Expo to develop an application on mobile and tablet.
The objective is to be able to answer a questionnaire where several questions are divided into various categories. A question may have a category or not, so they don't really follow each other in the code.
I use a loop to display my categories, with its questions inside. Questions are components, categories too.
When I answer a question, sometimes I want to reload another question specifically (or several). After answering my question, I have a list of questions I want to reload.
I would like either to launch a function in the component, or to reload it entirely.
How do I reload the question component, which may be quite far from the one I acted on?
Thanks for your help !
I wanted to listen with UseEffect for the modification of my global variable, but it doesn't work. Also, I can't fully reload my page either. I would like to specifically reload the question component or run the function.
What I have already tried:
Reloading the page entirely from my screen with a function in global, didn't work (
I have a lot of elements so I would like to avoid reloading everything)
Listen with useEffect the change of my list of questions to modify to check if my id was in it, but the listening is not done
I can't send functions or other elements in the props of my question because they can be in different components (category or other) so too far away.
Question Component (simplified) :
export default function RealisationQuestionComponent(props){
//When action in Question A
function changeCheckA(value) {
[...]
if (props.question.questions_impactees !== undefined) {
global.questions_impactees = props.question.questions_impactees;
}
}
//Effect in Question B
useEffect(() => {
[my function or reload entire component]
}, [global.questions_impactees]);
return (
<>...</>
)
EDIT :
Following the answer, I tried to use useContext to retrieve my information, but it tells me Can't find variable : RealContext
What i would like to do :
https://www.w3schools.com/react/showreact.asp?filename=demo2_react_context2
What I have done :
My screen AuditRealisationScreen
const RealContext = createContext();
const [listIdVictimes, setListIdVictimes] = useState('please test');
[...]
return (
<RealContext.Provider value={listIdVictimes}>
<RealisationChapitreComponent/>
</RealContext.Provider>
)
RealisationChapitreComponent > [...] > RealisationQuestionComponent
In my component RealisationQuestionComponent
const listTest = useContext(RealContext);
[...]
return (
<Text> {listTest} </Text>
)
Can it work this way?
Use [contexts][1]. Using [reducers][2] with context would be more flexible and organised.
If you have a lot of states to manage with mess of siblings and parent-child and child-parent relations then using [Redux][3] would give you more control to manage those components and its states
What I used do for
How to reload a component or call a function after action in another
component with React Native
const context = ... // declare
and then
// import context
const App=()=>{
...
return(
<Context.Provider value={your functions, data, states, props whatever you want}>
{{ ...child components }}
<Context.Provider/>
)
}
You can play with these contexts usage to achieve your goal
[1]: https://reactjs.org/docs/hooks-reference.html#usecontext
[2]: https://reactjs.org/docs/hooks-reference.html#usereducer
[3]: https://redux.js.org/introduction/why-rtk-is-redux-today#what-is-redux
I created a form component where i pass an object prop to it containing strings and an object array. I then i transfer the elements of the props to the component variables so i can edit them without interacting with the props directly like so:
beforeMount(){
this.var1 = this.props.var1
this.var2 = this.props.var2
this.array = this.props.array
}
when i edit all the other variables, close my component and open it again everything resets BESIDES the array. every time i try to interact with it the reset never happens. i know i am not interreacting directly with the props either in any part of my code so i don't really why this happens when when everything works fine. To fix that i had to do the following:
beforeMount(){
this.var1 = this.props.var1
this.var2 = this.props.var2
this.props.array.forEach(element => {
this.array.push(element)
})
}
why does this work exactly?
I have also been having similar problems with method specific variables not resetting after the function is already over so i find these behaviors a little weird. I am also using "v-if" and also tried to use component keys to reset the component but it doesn't work for the array for whatever reason.
try to copy your array like that :
this.array = [...this.props.array]
I'm not sure about it, but as you pass it within an object, you might actually use you array as reference and not values as you 'd like to.
I have a quite decent background in android but now I am starting digging into react native and I am really confused with the ways to change the state of a component through hooks and set state function.
To the point, I have my main screen and I have many small components which change visibility. This is done by letting the user change some filter settings within dialogs. So the suggested way to do that is by having a hook in my main screen with a list that holds the values for the visibility of each component. But since I change the visibility of the components from inside the modals, every time I want to show a modal I will have to pass in a different function(for example setComponentEnable or setComponentDisabled) to set the state for each component. So my main screen will be polluted from all these small functions. Also I should not forget to mention that my modals are consisted from many smaller components and I will have to pass as deep as it goes the proper function to match the user action.
So my question is, is there a way to do this thing without polluting my main with all these small functions and make it possible for the main screen to update every time the user change the filters within the modals?
I already read about context but the docs say:
Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.
So I dont think that this should be a great case for context use.
What I am trying to do now is create a hook with a list
const [isibility, setVisibility] = useState([]);
create visibility handler functions
const setVisibilityEnable = () => {
...
}
and pass it into my modal.
<MyModal
visibilityHandler={setVisibilityEnable}/>
Is there a way to manipulate the state without passing all these callbacks to the modals? Or maybe is there anyone that can suggest a better and clean solution to avoid end up having a really huge main screen?
you can include all the settings in one object and pass that object to all the components. Then each component will then modify that object accordingly.
const defaultVisibility = {
childComponentOne: true,
childComponentTwo: true,
};
const [visibilityObject, setVisibilityObject] = useState(defaultVisibility);
pass both the function and the object into your child components:
<ChildComponentOne visibilityObject={visibilityObject} setVisibilityObject={setVisibilityObject} />
Then in your child component, you set the visibility like so:
setVisibilityObject({...visibilityObject, childComponentOne: false});
Why you don't just pass a property to your modal and check if changed in oncomponentdidchange method?
componentDidUpdate(prevProps) {
if (this.props.yourPoperty!== prevProps.yourPoperty) {
//do your visibility stuff
}
}
Alternatively you can do it with redux when you connect your components to the store.
I am creating a tab component that loads its v-tab-item components dynamically, given an array of configuration objects that consist of tabName, id, and tabContent which is a resource location for the component. I have it successfully loading the components. However, they don't actually initialize (or run their created() methods) until I switch tabs. I just get empty tabs with the correct labels. Using the DOM inspector initially shows just <componentId></componentId>, and then when I switch tabs, those tags are replaced with all of the component's content.
How do I get the dynamic components to initialize as soon as they are loaded?
EDIT: I created a CodePen here:
https://codepen.io/sgarfio/project/editor/DKgQON
But as this is my first CodePen, I haven't yet figured out how to reference other files in the project (i.e. what to set tabContent to so that require.js can load them up). I'm seeing "Access is denied" in the console, which makes it sound like it found the files but isn't allowed to access them, which is weird because all the files belong to the same project. So my CodePen doesn't even work as well as my actual project. But maybe it will help someone understand what I'm trying to do.
Also, after poking around a bit more, I found this:
http://michaelnthiessen.com/force-re-render/
that says I should change the key on the component and that will force the component to re-render. I also found this:
https://v2.vuejs.org/v2/guide/components-dynamic-async.html
Which has a pretty good example of what I'm trying to do, but it doesn't force the async component to initialize in the first place. That's what I need the async components to do - they don't initialize until I switch tabs. In fact they don't even show up in the network calls. Vue is simply generating a placeholder for them.
I got it working! What I ended up doing was to emit an event from the code that loads the async components to indicate that that component was loaded. The listener for that event keeps a count of how many components have been loaded (it already knows how many there should be), and as soon as it receives the right number of these events, it changes the value of this.active (v-model value for the v-tabs component, which indicates which tab is currently active) to "0". I tried this because as I noted before, the async components were loading/rendering whenever I switched tabs. I also have prev/next buttons to set this.active, and today I noticed that if I used the "next" button instead of clicking on a tab, it would load the async components but not advance the tab. I had already figured out how to emit an event from the loading code, so all I had to do at that point was capture the number of loaded components and then manipulate this.active.
I might try to update my CodePen to reflect this, and if I do I'll come back and comment accordingly. For now, here's a sample of what I ended up with. I'm still adding things to make it more robust (e.g. in case the configuration object contains a non-existent component URL), but this is the basic gist of it.
created: function() {
this.$on("componentLoaded", () => {
this.numTabsInitialized++;
if(this.numTabsInitialized == this.numTabs) {
// All tabs loaded; update active to force them to load
this.active = "0";
}
})
},
methods: {
loadComponent: function(config) {
var id = config.id;
var compPath = config.tabContent;
var self = this;
require([compPath], function(comp) {
Vue.component(id, comp);
self.$emit("componentLoaded");
});
}
}