I have a snack setup:
https://snack.expo.io/#sj458147/view-not-scrolling
when you click show modal -> Click next button the View horizontally scrolls (animated), which then displays an image carousel. Now when you click an image, the View should horizontally scroll again but I get the error undefined is not an object. The error lies within the file:
SliderEntry.js
select = () => {
this.MyScrollView.current.moveToPage(3);
};
any help resolving the issue would be appreciated. Thanks in advance
You have MyScrollView ref in ShowModal. There are 2 ways:
Not recommend: Pass MyScrollView ref as props to Slider, then pass to SliderEntry
Recommend: create a callback as props in SliderEntry. Callback to Slider, then callback to ShowModal
Pass your function in props to other components and then access these functions from your another component.
You can find the answer here
React : Pass function to child component
Related
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 would like to know if it's possible to set the state to the initial state values whenever we press back the button in the tabBar ? At the moment, when I leave the tabBar and come back after a few navigation in the app, the infos that the user enter in TextField persist.
Thanks !
You could use React hooks to achieve similar results to lifecycle methods in class functions.
The useEffect method runs on component render. You can set the state in there.
const [currentState, setCurrentState] = useState(null);
useEffect(()=>{
// This will run after 1st render
setCurrentState("");
},[]);
I have a button on my header right that open up a drop down component. The component allow user to make some selection and apply it after the user hit the 'apply' button.
After the apply button pressed, it should be able to pass the value back to the 'main screen' component. How do I pass the value back to the 'main screen' ?
This is my interface , if you're wondering what I'm trying to do.
edit
I tried to pass in the useState function to the header component to update the state after the apply button pressed by passing it using the setParam from react navigation props. Is there any other better way to get the value ??
You can do it simply like:
props.navigation('Home', { state: SOME_VALUE });
Here is the react navigation doc to do this.
React navigation passing params to previous screen
Or you can use redux store.
I have a large long image with a few inputs at the bottom in my react native view. When the view loads I want it to be "scrolled" to the bottom of the page -- all the examples I can find online are triggered because of some event that the user does.
I want to call scrollToEnd() but I'm not sure where in the lifecycle the ref will actually be set -- anyone have ideas?
Use scrollToEnd this way. It will take to the bottom of ScrollView
<ScrollView
ref={ref => this.scrollView = ref}
onContentSizeChange={(contentWidth, contentHeight)=>{
this.scrollView.scrollToEnd({animated: true});
}}>
I am not clear with your question but
With react-native Image component we have onLoad prop. I think this is what you are looking for.
try something like:
<Image source={{uri...}} onLoad={(e)=>this.handleImageLoaded(e)}/>
then inside handleImageLoaded method you can use scrollToEnd() with some ref as per your code.
also there are other useful props like onLoadStart/End check here
https://facebook.github.io/react-native/docs/image
Or if you are just waiting for the view to render then to scroll
for that I think componentDidAppear() lifecycle method, if using react-native -navigation by wix
or with react-navigation
willFocus, willBlur, didFocus and didBlur events for the component render cycle.. explained here
https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle
I'm new to react-navigation and I would like to pass "navigation" as a props so I could use it. Because when I tried to use it in the other compo It is throwing an error message saying "undefined this.props.navigation etc.."
So here is what I would like to do
goto={()=>this.props.navigation.navigate('ChatBox', {
avatarUrl: matches.avatarUrl,
name: matches.name,
navigation: this.props.navigation
})}
As you can see I'm passing navigation via props to my compo named 'ChatBox'. But the problem is that my 'ChatBox' compo is not receiving the navigation. Could someone help me ? thanks
There are a few concepts I think you missed out on.
Every component mentioned in the stack navigator class gets a navigation object in its scope. You can access the same by using this.props.navigation()
If you need to pass navigation object to any other screen not mentioned in the stack navigator class, you'll be required to provide it as props, such as <Chatbox navigation={this.props.navigation} />
In your case, your navigation object is correctly being sent, just that you are fetching it wrongly in your Chatbox component. Your navigation as a prop is encapsulated in the navigation object itself ( .i.e. its present in this.props.navigation.state.params.navigation ) and since you haven't mentioned Chatbox component in your stack navigator class, you can't reference the navigation object as it is currently out of scope.
So,
You can replace a component by rendering the <Chatbox/> component and provide it the props ( as mentioned in point 2 above ) instead of navigating to the component.
If you need to navigate to the component, you'll be required to define the Chatbox screen in the stack navigator class and then you can use your navigation object.