I have a situation like this I use scrollview and I use scrollTo when it first opened to screen but when i do this my useSelector re render the scrollview and going to the beginning and scrolling again how can I keep scroll view position with useSelector
const [data1, setData1] = useState(useSelector(reduxData => reduxData.data1));
const [data2, setData2] = useState(useSelector(reduxData => reduxData.data2));
when I changed this state like this
const [data1, setData1] = useState([]);
const [data2, setData2] = useState([]);
scrollTo work perfectly, how can I fix this
You are duplicating the state using useSelector inside useState. What if you define a variable from redux like this:
let data1 = useSelector(reduxData => reduxData.data1);
And then use useEffect to scroll like this:
useEffect(() => {
scrollTo(data1)
},[data1]);
// OR IF data1 DOES NOT CONTAIN THE PLACE TO SCROLL SUBSTITUTE
// THE VARIABLE AS useEffect WILL ONLY RUN WHEN SUCH VARIABLE
// CHANGES
Does it work?
Related
I have a table that has items in it. When I click a specific item's edit button. It goes to edit page but when I submit an edit of that item. It goes back to main table page but the table page won't be updated. So, I think I need to trigger the useeffect function. To do that I need to update the state in main table page from another screen that is edit page screen.
my apps are not class-based. all of them functional. Here are my codes.
Main Table Page:
//I created a state to update
const [reload,
setReloader] = useState('');
I try to send the state to change it in edit item screen.
<TouchableOpacity onPress={() => navigation.navigate('addProduct', [reload])}>
Edit Item Page:
const [reload,
setReloader] = useState(route.params.reload); //I tried to pass state but it didn't work like that.
Pass a function through navigation
Pass the function in which you will be updating the state. i.e. setReloader
<TouchableOpacity onPress={() => navigation.navigate('addProduct', {setReloader})}>
On addProduct screen get the function by
const setReloader = route.params.setReloader;
once you have edited simply call the setReloader function on the edit page and then go back to the main screen
Using the navigation lifecycle method.
On the main screen, you can add a focus lister
const focusListner = navigation.addListener('focus', () => {
//call the API to fetch the updated data from the server
});
Focus listener is called whenever the return to that screen
You can do something like:
//I created a state to update
const [reload, setReloader] = useState('');
const updateState = (value) => {
setReloader(value);
}
Send `setReloader` as callback to update on edit screen
<TouchableOpacity onPress={() => navigation.navigate('addProduct', {callback: updateState})}>
Edit Item Page:
const callback = route.params.callback;
// call `callback` which will update view on parent screen
import { useIsFocused } from "#react-navigation/native";
const isFocused = useIsFocused();
Well it is worked for me. To trigger.
useEffect not called in React Native when back to screen
In React Native iOS, I would like to slide in and out of a like in the following picture.
So I installed this https://github.com/octopitus/rn-sliding-up-panel for ease.
but this error is showing =>
i cant understand whats wrong, I am new to react native. Please Help!
You cannot access variable called _panel from this object because you are inside a function itself. besides you are using function based react, in order to create a reference check useRef() hook or switch to class based component and then you can use this._panel;
smthg like this:
function AccessingElement() {
const elementRef = useRef();
const onPress = () => {
// e.g
elementRef.current.show();
}
return (
<View ref={elementRef}>
...child views
</View>
);
}
So I have a this.state.comments in my Home Screen and that's an array. In my other screen called Comments Screen I'd like to show the results of that state. Aka id like to use that array I mean this.state.comments and display it in a FLATLIST in Comments screen. That file Comments Screen just has one function and inside it a flatlist. Any help?
in Home use this.props.navigation.navigate('Comments',{comments: this.state.comments})
and in Comments screen if using react-navigation v4 use :
const commentsArray = this.props.navigation.getParam('comments')
if using react-navigation v5 use :
const commentsArray = this.props.route.params.comments;
As a response to your comment with the picture, if Komentar is a screen that is added in the navigation configuration you do:
const Komentar = (props) =>{
const commentsArray = props.navigation.getParam('comments');
return(
// your code here
)}
because it's a functional component you can't use this to access props.
What is the best way to use Animated.Value () in react-native ?
With useState() or not ?
const [fadeAnim] = useState(new Animated.Value(0))
Or
const fadeAnim = new Animated.Value(0)
React-native doc: https://facebook.github.io/react-native/docs/animations
Thanks
I've been using this recently:
const [fadeAnim] = useState(() => new Animated.Value(0));
and for set value the standard:
fadeAnim.setValue(0);
Also, you might want to look at useRef too, since it is what documentation recommend:
const fadeAnim = useRef(new Animated.Value(0)).current;
/*
...
*/
fadeAnim.setValue(0);
Actually , Hook are a better way , so i'd say first choise
I came across a dodgy UI bug where settings hook values would render in the view instantly and mess up the animations. I fixed this by putting putting the animation value in a useState hook like so:
Before:
const foo = new Animated.Value(1)
After:
const [foo] = useState(new Animated.Value(1));
Use useRef() as recommended in https://reactnative.dev/docs/animated and https://reactnative.dev/docs/animations#animated-api.
const [fadeAnim] = useState(() => new Animated.Value(0)); is same but semantically "state" means getter and setter - without setter 'fadeAnim' will be same throughout the component's lifetime so no different than useRef(...).current
I'm working on a navigation that there's no more than one route in the stack.
So I'm using replace() instead of the pop() and push(). But the problem I noticed is that while using replace(), there isn't a transition animation available such as the one I see with pop() and push().
Is there a way to get around that? Or is there other ways to implement a navigation with one view replacing an existing one (with transition animation of course)?
I was having the same issue and managed to find the solution here provided by zhaotai.
To solve the issue, define the following new method in the js file where you import the Navigator component.
Navigator.prototype.replaceWithAnimation = function (route) {
const activeLength = this.state.presentedIndex + 1;
const activeStack = this.state.routeStack.slice(0, activeLength);
const activeAnimationConfigStack = this.state.sceneConfigStack.slice(0, activeLength);
const nextStack = activeStack.concat([route]);
const destIndex = nextStack.length - 1;
const nextSceneConfig = this.props.configureScene(route, nextStack);
const nextAnimationConfigStack = activeAnimationConfigStack.concat([nextSceneConfig]);
const replacedStack = activeStack.slice(0, activeLength - 1).concat([route]);
this._emitWillFocus(nextStack[destIndex]);
this.setState({
routeStack: nextStack,
sceneConfigStack: nextAnimationConfigStack,
}, () => {
this._enableScene(destIndex);
this._transitionTo(destIndex, nextSceneConfig.defaultTransitionVelocity, null, () => {
this.immediatelyResetRouteStack(replacedStack);
});
});
};
Then, you can call navigator.replaceWithAnimation(route) instead.