I want to simulate the progressive bar that is on Snapchat story when recording a story. Everything is done but the button touch effect. How do you call a function while holding the button, not just onPress?
If you are using one of the Touchable buttons, I would use a combination of the onPressIn and onPressOut props to perform an operation while the user is holding the button. See more info here
Related
I have a component that is a navigation bar. The navigation bar persists within all screens in specific parts of my project, and is the highest level component at all given times.
Is it possible to somehow get a page-change event (so if I go from say, /main/viewer to /main/documents ) without having a callback triggering a pagechange going from navigation bar all the way down to the viewer component?
These components are nested in each other, as the NavBar displays main screen, which then directs to different component for different screens, which in turn have components that call different screens based on buttons pressed, etc etc.
I'm trying to get the simplest way to get a page-change event, so that I can trigger a function in viewer, which prompts to save any edits done, if page is about to be changed through the nav-bar (or another means) and not via a button in the viewer.
currently, I navigate between pages/components by using this.,props.history and then either .push("path", props) and .goBack() which is usually the last line on a function to handle exiting the component.
I have a component that uses onClick and onFocus. Both of the events call the same function that loads data from an API.
When the user is tabbing through elements on the page and lands upon this component's child textarea, onFocus runs and loads data from an API.
However, when the user clicks on the component's textarea child, both the onClick and onFocus events try and load data from the API. I want to prevent both events from firing a function twice.
I do NOT want to put events on the text area itself if possible.
function DataRow(props) {
function focused(e){
props.loadDataFromAPI(); /* This will get ran twice if clicked on tr element's textarea */
}
return <tr onFocus={focused} onClick={focused} ><textarea></textarea></tr>;
}
As you can see, I want it to get called when the user clicks on the tr as well as clicks/focuses on the textarea. I just don't want that duplicate call when clicking on the textarea!
Maybe you can implement a debounce system to avoid this behaviour.
In this way not only you will avoid this double event firing, but you will prevent user to spam you and polling request if he starts to repeatedly click on the button.
There are a lot of answers out there about debouncing, maybe you can give a look at lodash debounce, or google for specific React systems like debounce hooks.
I want to invoke function imediatly when user touch the TouchableWithoutFeedback, but if i use OnPressIn i have problem with scrolling. When user scroll - he activate the function. OnPress event on other hand is slow. What i need use? I want when user touch TouchableOpacity view to fire the function without need of release the button. OnPressIn with proper scroll functionality.
The items are inside FlatList. Every item need to have onPressIn and to be able to scroll without trigger onPressIn.
I have made a navbar, which holds a searchbar, and 3 icons.
On clicking these icons, a modal is rendered.
I wanted help with two things.
Closing the modals on outside clicks!, and
The hover element is slow because it has three states, every time it is called it re-renders the code from bottom to top. I wanted the hover to have one state assigned to one parent element. But on doing that, the hover effect for all three buttons gets activated at the same time.
Code is up on : https://codesandbox.io/s/unruffled-snowflake-he95w
Please feel free to edit the code and pass me the edited fork.
I have tried handleBlur, passing an event, and eventListener.
https://codesandbox.io/s/unruffled-snowflake-he95w
Expected - Modal rendered on screen should get disappeared on clicking outside the modal.
P.S - semantic UI icons are not rendering, but they are there. They will activate if you hover over them.
Credits - SVG close icon problem solved by Drew Reese.
Ah, I see. Your ToolBar is the controlling component, i.e. the state about whether or not each toolbar item is open is stored there. You need to pass a close handler to the children components so when a "close" button is clicked it is calling the callback the parent passed in.
Here is a fork of your sandbox where I pass in an onCloseClick callback to the calendar/picker thing that simply toggles that state value back to false to close it. The picker then just assigns that callback as its onClick handler for the contaning for the close button.
You can apply the same logic to the other two components.
Note: since the icons aren't rendering for me either I added some text to the buttons so they are easier to find/see.
I have four buttons and each button displays different information such as text, photos, map etc. I want to press a button and display information below it without navigating to a new screen.
Make each button set the component state, and have your render method query that state. Based on what the state is, you render method can display different components.