I am using react-native-video. I am trying to change the props for each video onPress, which are in a FlatList of videos. So if I use state it will change all the video props in the entire FlatList, whereas I only want to change the one.
I created: const videoPlayer = [] and added a ref in each Video player like: ref={r => videoPlayer[item.id] = r}, and I know I can do videoPlayer[item.id].presentFullscreenPlayer() to play the video in fullscreen because it is a method of the player, but what about controlling other properties like resizeMode and paused?
I have tried videoPlayer[item.id].props.paused = false, but that has no effect. I also imagine I can create some sort of complex object in state, but then the entire list will update every time I change a property and that may cause slow running refreshes in a big list.
So, is there I way I can control props of each video like I explained?
You definitely could use setNativeProps like:
videoPlayer[item.id].setNativeProps({
paused: false
})
This is a doc page about it: https://facebook.github.io/react-native/docs/direct-manipulation
Related
Today for a school project I need to create a shop in which when you click a button, the Video (used as background) in the Home page changes.
I found how to change color through style but here the Video is a component and the Video's link is it content so I'm not sure how to proceed...
I'm trying to use useEffect like this :
useEffect(() => {
const backGround = document.getElementById("bg");
setBg(backGround.Video = "source{require("./test2.mp4")}");
}, [bg])
`
If you guys could refer me, it would be awesome !
First-of-all I apologise because I'm new to this concept of redux haha so bare with me here :)
I have implemented a very simple redux in my app
I have one screen here ListAnItem
Here there is a button.
Add size when pressing this they get navigated to another screen called SizeSelector
SizeSelector
here there is a button called dispatch size when they press this button it runs the following.
dispatch({type: "ADD_SIZE", payload: size })
this works perfectly with useSelector.
once this dispatch has been run I use navigation.goBack() to send the user back to the ListAnItem screen.
but once they come to this screen I want to add this useSelector redux state value to a useState hook something like this;
const [sizeState, setSizeState] = React.useState(null)
how can I change this state the minute something has been added to useSelector value of ADD_SIZE.
if that makes sense 😂.
Thanks,
Arnav.
I need to use a callback function for the mouse click event. Below code is working in React web app:
const checkAnswer = (e: React.MouseEvent<HTMLButtonElement>) => {
const answer = e.currentTarget.value // here .value property is undefined and gives error in React-Native. Just e.currentTarget is defined.
const correct = questions[number].correct_answer === answer
if(correct) setScore(prev => prev + 1)
}
But I couldn't apply it on React Native (mobile) for Pressable or TouchableOpacity.
This is the render part of React web app's code:
<button value={answer} onClick{checkAnswer} />
and I try to apply it on React Native. The value will be passed to button's value. But there is no "value" option in native's Pressable component. Therefore I am confused
Any help?
you can determine touch events by following
<View onTouchStart={(e) => {console.log('touchMove',e.nativeEvent)}} />
Here is some similar scenario what I could able to understand from the question.
There is a Score state which will store the user's score of a quiz game.
There is a array of question where all the options and correct option are given.
There will be a button for the option, if user choose a option, and based on that it will validate if user is correct or not.
It might not be the exact scenario of you. But this could definitely help to solve your scenario.
Here is a solution for the scenario => solution.
If you click on the solution link you will be redirect to a page which is similar to the screenshot attached below. On very right you will find "My Device", "Android", "ios", choose any and run. Run via "my device" with expo app installed in your mobile if you don't want to be in queue for some certain time.
Note: from your code this is for React web:
<button value={answer} onClick{checkAnswer} />
but in React Native you have to use a click event like this:
<TouchableOpacity onPress={()=>buttonHandler()}></TouchableOpacity>
Here ()=> and () extra need to be added to work a function properly.
Also instead of .map() function you can use FlatList to improve your app. FlatList support lazy loading.
I know this is a stupid question.
I have a component lets call it Component that is used in several screens for Example Screen1,Screen2,...
And in the Component I am navigating to a new Screen when the user click a button, lets call it ImagePicker.
my Question is how do I go back and pass a parameter( in this case image data) and get it back in the Component
I tried using navigation.goBack({img: image}) but that didn't work. I also can't use navigation.navigate('Screen') since my functions are in the Component component.
So what is the best solution for my problem ?
We cannot pass any params to the goBack method.
If we have to do so then, we can use the navigate method to navigate to the back screen, and using this method we can pass the params to the previous screen.
For ex.
navigation.navigate('PrevScreenName', {key: value})
Check out the official docs for the react-navigation.
React Navigation
If I understand your problem well, just do
navigation.navigate('Screen', {img: image})
instead of navigation.goBack({img: image}) and it should work
In the component code, I would pass along a callback function to the image picker screen
handleImageData = (data) =>
{
// do whatever
}
...
navigation.navigate('ImagePickerScreen',{mycallback:this.handleImageData});
and then in the screen code just call it like
this.props.route.params.mycallback(data);
navigation.goBack();
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.