I designed a page and I have a Flatlist and I have pickers, slider and text input in this page. I also used Animated View in this page and I have an issue with KeyboardAvoidingView.
The design looks like this when the page is first rendered:First Render
When user click "Add" Icon the page looks like this:
Animation Triggered and View Flex Grow
And here is my main issue. When user click the TextInput for type something. This page looks like this:
TextInput Focused
You can also see my render code in this photo.JSX Code
I tried placing "keyboardavoidingview" in different places but my problem was not solved. How can I solve this?
P.S: The animation value based on "flex" property. The view has "0.5" flex value on first start and When the button is clicked, it takes the value "1".
wrap your code inside
<KeyboardAvoidingView>
</KeyboardAvoidingView>
And give it a style like this
flex: 1,
behavior="padding"
Kolay gelsin :)
Related
I am using React Native with Expo and i am attempting to use Gorhom's Bottom Sheet component to display a bottom sheet when a user clicks on a button. Everything works fine except the bottom sheet insists to always pop up on screen mount, which is obviously bad, it should only pop up when user clicks on a trigger like a button.
Here's my component:
import BottomSheet, { BottomSheetScrollView } from '#gorhom/bottom-sheet'
<BottomSheet
ref={sheetRef}
enableOverDrag
handleIndicatorStyle={styles.handleIndicator}
snapPoints={snapPoints}
enablePanDownToClose
>
<BottomSheetScrollView>
{children}
</BottomSheetScrollView>
</BottomSheet>
I've tried to toggle a display none/flex but that makes the popup not smooth and very sudden:
containerStyle={[styles.container, {display: showSheet ? 'flex' : 'none'}]}
I've went through the entire docs twice but found nothing that can help me.
If the expected behavior is to only show the bottom sheet when the user clicks a button, then it's looking more like a modal. There's the BottomSheetModal wrapper/decorator for that.
Instead of importing BottomSheet, import BottomSheetModal. Then get its reference and call the methods bottomSheetRef.current.present() and bottomSheetRef.current.close(). Doing it this way, all the show/hide up/down animations will work right off the bet.
Take a look at the documentation for a full example.
After setting up the storybook-tailwind-dark-mode add-on for Storybook (by following these steps), my component is no longer displaying correctly in dark-mode in the Canvas view. The component displays correctly while in Document view and other components are displaying correctly in canvas view, so not every component has this issue.
The elements are visible for a split second before the page goes blank. When inspecting the page, I can see all of the elements are there, but they are just not visible.
The only difference to the HTML seems to be the dark class added to the body element.
Any ideas as to why the elements are no longer displayed would be greatly appreciated ⚡️
I've inspected the elements to see what could be causing the elements to not be displayed. I was expecting to see a change to display:none or an element that is in front of the other elements, causing them to be hidden, but it seems the only change is the dark class being added to body.
I've also looked at ./storybook/preview.js and ./storybook/main.js for anything suspicious but I haven't found anything that looks out of place.
There was a modal <div> that had a dark:bg-gray-800 class that was being overlayed over all of the other elements.
The modal was correctly set in light mode to show and hide according to when the modal was open/closed, but this conditional was not applied for dark mode, so the modal was always open, and hiding the other elements.
Im using react-simple-maps with react-tooltip
Looks like the hover works fine, but I try to click on a link I've added on the tooltip but before I can get to the tooltip, it disappears and I can't access the content with my mouse.
is this possible?
Depending on what your implementation specifically looks like, I think the delayHide property is what you're looking for. It defines the delay after the hover event ends until the tooltip disappears, in milliseconds.
<ReactTooltip delayHide={1000} />
I created a simple app to work through an issue I'm having toggling a sidebar. I'm trying to use onClicks so that I can open and close a sidebar, and yet can't get it to work. I'm using styled-components, and for whatever reason I can't get the sidebar to toggle. I have a simple piece of state, isOpen, which is initialized to false, and when i click on a button in the 'navbar', i'd like it to toggle state to true via an onClick, and the sidebar should appear, and yet, it isn't working.
Here is the codesandbox link
I tried re-writing the app from scratch, using destructuring vs not using destructuring, and looked for any bugs in the code but couldn't. Any ideas for what I can try next? Also I made sure to use arrow functions for my onClicks.
The first issue I see is that the SidebarContainer is creating an overlay that prevents clicking on the button to open it. You'll need to change the visibility property on the SidebarContainer that's exported from SidebarElements:
visibility: ${(props) => (props.isOpen ? "visible" : "hidden")};
I prefer using the visibility property over setting display to block or none because if you want to you can animate or transition properties like opacity or transform. When toggling the display property your sidebar will just appear and disappear instantly.
Something else, you don't need to use an anonymous callback when calling the toggle from inside of Sidebar and Navbar:
<CloseIcon onClick={toggle}>X</CloseIcon>
<OpenIcon onClick={toggle}>open sidebar</OpenIcon>
I've updated the sandbox link you provided.
There are two problems with your code
You are calling the toggle like onClick={() => toggle} when you should be calling it like onClick={toggle} or onClick={() => toggle()}
Your "sidebar" is a overlapping your navbar (it is position:fixed with opacity:0 and covers the whole screen)
So fix 1 and then either move the sidebar elsewhere (as to not overlap) or change its display from none to block instead of the opacity.
I'm trying to better understand how Material-UI works, and I was confused why I need to use the Toolbar component twice to get my scrolling toolbar to render properly as in this example code.
If I don't include the second Toolbar after the ElevationScroll, the menu I want to place below the app bar is rendered underneath the app bar. If I include it, my menu is pushed down and renders nicely. This works great, but I don't understand why I need to include an extra in my jsx in order to get things to look right, like in this simplified example:
function SettingsMenu() {
return (
<ElevationScroll>
<AppBar>
<Toolbar>
<Typography>
Settings
</Typography>
</Toolbar>
</AppBar>
</ElevationScroll>
<Toolbar/>
<MyMenu/>
);
}
I've checked in Google Devtools to figure out why this is happening, the second toolbar is rendered as a div with nearly identical css styles but with no child elements. When I delete it manually in Devtools, the menu gets pushed back up behind the app bar as before. Thanks for any help!
It's because AppBar have positon: fixed; which means it wont take space on the screen so you but another Toolbar which will be underneath the AppBar to push the content down and take the same space the Toolbar should take.